search

opendatasoft / ods-widgets

Components to easily build visualizations and interfaces from a data API.
MIT License
27 stars 11 forks source link

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

Open scMarth opened 6 years ago

scMarth commented 6 years ago

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 commented 6 years ago

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.