Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Strange behavior of ods-map layer tab / display-control #116

Open
scMarth opened this issue Jul 30, 2018 · 1 comment
Open

Strange behavior of ods-map layer tab / display-control #116

scMarth opened this issue Jul 30, 2018 · 1 comment

Comments

@scMarth
Copy link

scMarth commented Jul 30, 2018

I'm running into an issue with the layer tab or display-control of ods-map widgets.

There is one map where the layer tab looks fine:

<div class="cp-content-large">
    <ods-dataset-context context="parksandrecreation,familyresourceandcommunitycenters,libraries" libraries-dataset="libraries-es" parksandrecreation-dataset="parks-and-recreation-es" familyresourceandcommunitycenters-dataset="family-resource-and-community-centers-es">
        <ods-map no-refit="true" display-control="true" search-box="true" toolbar-fullscreen="true" toolbar-geolocation="true" location="14,36.68694,-121.64775">
            <ods-map-layer-group>
                <ods-map-layer context="parksandrecreation" color="#19630A" picto="ods-circle" show-marker="true" display="auto" shape-opacity="0.9" point-opacity="1" border-color="#FFFFFF" border-opacity="1" border-size="1" border-pattern="solid" caption="true" caption-picto-color="#19630A" title="Parks and Recreation" description="The map provided represents the various parks and areas of open space that is within and neighboring Salinas city limits. The parks are classified by Type: Small, Community, Neighborhood, Special R…" size="4" size-min="3" size-max="5" size-function="linear"></ods-map-layer>
            </ods-map-layer-group>
            <ods-map-layer-group>
                <ods-map-layer context="familyresourceandcommunitycenters" color="#BA022A" picto="dot" show-marker="false" display="auto" shape-opacity="0.5" point-opacity="1" border-color="#FFFFFF" border-opacity="1" border-size="1" border-pattern="solid" caption="true" caption-picto-color="#BA022A" title="Family resource and Community Centers" description="This map shows the locations of family resources and community centers operated by the City of Salinas, Monterey County, California. This service was created by a member of the GIS team in 2017." size="7" size-min="3" size-max="5" size-function="linear"></ods-map-layer>
            </ods-map-layer-group>
            <ods-map-layer-group>
                <ods-map-layer context="libraries" color="#184896" picto="ods-circle" show-marker="true" display="auto" shape-opacity="0.9" point-opacity="1" border-color="#FFFFFF" border-opacity="1" border-size="1" border-pattern="solid" caption="true" caption-picto-color="#184896" title="Libraries" description="The City of Salinas public libraries." size="4" size-min="3" size-max="5" size-function="linear">
                </ods-map-layer>
            </ods-map-layer-group>
        </ods-map>
    </ods-dataset-context>
</div>

ss1

If I navigate the legend in the bottom-right such that it expands in height, the display-control's height becomes smaller to compensate, which is what I want:

ss3

However, when I add a second map, it somehow affects the first map:

<div class="cp-content-large">
    <ods-dataset-context context="parksandrecreation,familyresourceandcommunitycenters,libraries" libraries-dataset="libraries-es" parksandrecreation-dataset="parks-and-recreation-es" familyresourceandcommunitycenters-dataset="family-resource-and-community-centers-es">
        <ods-map no-refit="true" display-control="true" search-box="true" toolbar-fullscreen="true" toolbar-geolocation="true" location="14,36.68694,-121.64775">
            <ods-map-layer-group>
                <ods-map-layer context="parksandrecreation" color="#19630A" picto="ods-circle" show-marker="true" display="auto" shape-opacity="0.9" point-opacity="1" border-color="#FFFFFF" border-opacity="1" border-size="1" border-pattern="solid" caption="true" caption-picto-color="#19630A" title="Parks and Recreation" description="The map provided represents the various parks and areas of open space that is within and neighboring Salinas city limits. The parks are classified by Type: Small, Community, Neighborhood, Special R…" size="4" size-min="3" size-max="5" size-function="linear"></ods-map-layer>
            </ods-map-layer-group>
            <ods-map-layer-group>
                <ods-map-layer context="familyresourceandcommunitycenters" color="#BA022A" picto="dot" show-marker="false" display="auto" shape-opacity="0.5" point-opacity="1" border-color="#FFFFFF" border-opacity="1" border-size="1" border-pattern="solid" caption="true" caption-picto-color="#BA022A" title="Family resource and Community Centers" description="This map shows the locations of family resources and community centers operated by the City of Salinas, Monterey County, California. This service was created by a member of the GIS team in 2017." size="7" size-min="3" size-max="5" size-function="linear"></ods-map-layer>
            </ods-map-layer-group>
            <ods-map-layer-group>
                <ods-map-layer context="libraries" color="#184896" picto="ods-circle" show-marker="true" display="auto" shape-opacity="0.9" point-opacity="1" border-color="#FFFFFF" border-opacity="1" border-size="1" border-pattern="solid" caption="true" caption-picto-color="#184896" title="Libraries" description="The City of Salinas public libraries." size="4" size-min="3" size-max="5" size-function="linear">
                </ods-map-layer>
            </ods-map-layer-group>
        </ods-map>
    </ods-dataset-context>
    <br>
    <ods-dataset-context context="waterways0,schoolsites,femafederalemergencymanagementagency" waterways0-dataset="waterways0" schoolsites-dataset="school_sites" femafederalemergencymanagementagency-dataset="fema-federal-emergency-management-agency">
        <ods-map no-refit="true" display-control="true" search-box="true" toolbar-fullscreen="true" toolbar-geolocation="true" location="13,36.69444,-121.63719">
            <ods-map-layer-group>
                <ods-map-layer context="waterways0" color="#0b72b5" picto="ods-circle" show-marker="true" display="auto" shape-opacity="1" point-opacity="1" border-color="#FFFFFF" border-opacity="1" border-size="1" border-pattern="solid" caption="true" caption-picto-color="#0b72b5" title="Waterways" size="4" size-min="3" size-max="5" size-function="linear"></ods-map-layer>
            </ods-map-layer-group>
            <ods-map-layer-group>
                <ods-map-layer context="schoolsites" color="#5a1887" caption-picto-color="#5a1887" picto="dot" show-marker="false" display="auto" shape-opacity="0.5" point-opacity="1" border-color="#FFFFFF" border-opacity="1" border-size="1" border-pattern="solid" caption="true" title="School Sites" description="This map depicts the schools within Salinas. This includes Colleges, Elementary, Middle and High Schools. The information provided includes the district, address, zipcode, phone number, ages as wel…" size="6" size-min="3" size-max="5" size-function="linear"></ods-map-layer>
            </ods-map-layer-group>
            <ods-map-layer-group>
                <ods-map-layer context="femafederalemergencymanagementagency" color-categories="{'0.2 PCT ANNUAL CHANCE FLOOD HAZARD':'#FFFFFF','AREA OF MINIMAL FLOOD HAZARD':'#FFFFFF','FLOODWAY':'#F7C87E'}" color-by-field="zone_subty" color-categories-other="#C32D1C" picto="ods-circle" show-marker="true" display="categories" shape-opacity="0.5" point-opacity="1" border-color="#FFFFFF" border-opacity="1" border-size="1" border-pattern="solid" caption="true" title="FEMA - Federal Emergency Management Agency" description="The location of areas which are in FEMA's Flood Hazard Zone within and Surrounding Salinas, Ca. The Complete Federal Emergency Management Agency (FEMA) National Flood Hazard Layer (NFHL), metadata,…" size="4"></ods-map-layer>
            </ods-map-layer-group>
        </ods-map>

    </ods-dataset-context>
</div>

ss2

Now, the display-control or layers tab will overlap with the legend, which isn't what I want.

Somehow, by adding a second map, it affects the first map. I have not touched the stylesheet at all, and I can consistently reproduce this bug by only changing the html (adding the second map), so I'm fairly certain that it is not the CSS.

@scMarth
Copy link
Author

scMarth commented Aug 6, 2018

Upon closer inspection, it looks like the scroll bar on the first map disappears when the second map is added. Height of the 'odswidget-map-display-control__groups' also increases and becomes fixed, instead of scaling as it does when there is just one map.

It's strange that the first map's overflow properties and layer tab would be affected by the presence of the second map.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant