Widget Tricks - ods-map: CSS Hacks

Default view for maps with several layers

<ods-dataset-context context="shanghaiworlduniversityrankingpublic"
                     shanghaiworlduniversityrankingpublic-dataset="shanghai-world-university-ranking"
                     shanghaiworlduniversityrankingpublic-domain="userclub">
    <ods-map style="height: 500px" no-refit="true" scroll-wheel-zoom="false" display-control="true" search-box="false"
             toolbar-fullscreen="true" toolbar-geolocation="true" basemap="jawg.light"
             display-control-single-layer="true">
        <ods-map-layer-group>
            <ods-map-layer context="shanghaiworlduniversityrankingpublic"
                           color-numeric-ranges="{'100':'#000000','200':'#303133','300':'#606266','400':'#909399','500':'#C0C5CC'}"
                           color-numeric-range-min="0" picto="ods-circle" show-marker="true" display="choropleth"
                           function="AVG" expression="world_rank_int" shape-opacity="0.9" point-opacity="1"
                           border-color="#FFFFFF" border-opacity="1" border-size="1" border-pattern="solid"
                           caption="true" caption-picto-color="#E5E5E5" title="Shanghai World University Ranking"
                           description="By ranking" size="4"></ods-map-layer>
        </ods-map-layer-group>
        <ods-map-layer-group displayed="false">
            <ods-map-layer context="shanghaiworlduniversityrankingpublic"
                           color-numeric-ranges="{'10':'#00757E','20':'#2E8D94','30':'#5CA5AB','40':'#8ABDC1','100':'#B8D5D8'}"
                           color-numeric-range-min="0" picto="ods-circle" show-marker="true" display="choropleth"
                           function="AVG" expression="total_score" shape-opacity="0.9" point-opacity="1"
                           border-color="#FFFFFF" border-opacity="1" border-size="1" border-pattern="solid"
                           caption="true" caption-picto-color="#E5E5E5" title="Shanghai World University Ranking"
                           description="By score" size="4"></ods-map-layer>
        </ods-map-layer-group>
    </ods-map>

</ods-dataset-context>

Minimized layers control and map controls on the left

In this example, the top right element, that displays the list of available layers is minimized with no background and a reduced size. The map controlers originally on the top right are also now on the left.

<ods-dataset-context context="shanghaiworlduniversityrankingpublic"
                     shanghaiworlduniversityrankingpublic-dataset="shanghai-world-university-ranking"
                     shanghaiworlduniversityrankingpublic-domain="userclub">
    <ods-map style="height: 500px" no-refit="true" scroll-wheel-zoom="false" display-control="true" search-box="false"
             toolbar-fullscreen="true" toolbar-geolocation="true" basemap="jawg.light"
             display-control-single-layer="true">
        <ods-map-layer-group>
            <ods-map-layer context="shanghaiworlduniversityrankingpublic"
                           color-numeric-ranges="{'100':'#000000','200':'#303133','300':'#606266','400':'#909399','500':'#C0C5CC'}"
                           color-numeric-range-min="0" picto="ods-circle" show-marker="true" display="choropleth"
                           function="AVG" expression="world_rank_int" shape-opacity="0.9" point-opacity="1"
                           border-color="#FFFFFF" border-opacity="1" border-size="1" border-pattern="solid"
                           caption="true" caption-picto-color="#E5E5E5" title="Shanghai World University Ranking"
                           description="By ranking" size="4"></ods-map-layer>
        </ods-map-layer-group>
        <ods-map-layer-group displayed="false">
            <ods-map-layer context="shanghaiworlduniversityrankingpublic"
                           color-numeric-ranges="{'10':'#00757E','20':'#2E8D94','30':'#5CA5AB','40':'#8ABDC1','100':'#B8D5D8'}"
                           color-numeric-range-min="0" picto="ods-circle" show-marker="true" display="choropleth"
                           function="AVG" expression="total_score" shape-opacity="0.9" point-opacity="1"
                           border-color="#FFFFFF" border-opacity="1" border-size="1" border-pattern="solid"
                           caption="true" caption-picto-color="#E5E5E5" title="Shanghai World University Ranking"
                           description="By score" size="4"></ods-map-layer>
        </ods-map-layer-group>
    </ods-map>
</ods-dataset-context>
/* Custom map control, get rid of background, add box-shadow on layer controller */
ul.odswidget-map-display-control__groups {
    width: fit-content;
}
ul.odswidget-map-display-control__groups {
    background-color: transparent;
}
.odswidget.odswidget-map-display-control {
    box-shadow: none;
}
li.ng-scope.odswidget-map-display-control__group.odswidget-map-display-control__group--disabled {
    background-color: white;
    opacity: 0.7;
}
li.ng-scope.odswidget-map-display-control__group {
    background-color: white;
    box-shadow: 2px 2px 10px #868585;
}
/* Custom map controler (zoom etc) : align left ! */
.leaflet-top.leaflet-right, .odswidget-map__map--with-display-control .leaflet-top.leaflet-right {
    right: inherit;
    left: 10px;
    top: 190px;
}
.leaflet-right .leaflet-control {
    float: left;
}
      

Custom legend - simple

In this example, the legend is the same than the default one, but slightly modified. It’s a manual operation of copying HTML code of the legend and cleaning and pasting it in the page.

<ods-dataset-context context="shanghaiworlduniversityrankingpublic"
                     shanghaiworlduniversityrankingpublic-dataset="shanghai-world-university-ranking"
                     shanghaiworlduniversityrankingpublic-domain="userclub">
    <div class="map-container">
        <ods-map style="height: 500px" no-refit="true" scroll-wheel-zoom="false" display-control="true"
                 search-box="false" toolbar-fullscreen="true" toolbar-geolocation="true" basemap="jawg.light"
                 display-control-single-layer="true">
            <ods-map-layer-group>
                <ods-map-layer context="shanghaiworlduniversityrankingpublic"
                               color-numeric-ranges="{'100':'#000000','200':'#303133','300':'#606266','400':'#909399','500':'#C0C5CC'}"
                               color-numeric-range-min="0" picto="ods-circle" show-marker="true" display="choropleth"
                               function="AVG" expression="world_rank_int" shape-opacity="0.9" point-opacity="1"
                               border-color="#FFFFFF" border-opacity="1" border-size="1" border-pattern="solid"
                               caption="false" caption-picto-color="#E5E5E5" title="Shanghai World University Ranking"
                               description="By ranking" size="4"></ods-map-layer>
            </ods-map-layer-group>
        </ods-map>
        <div class="odswidget odswidget-map-legend">
            <div class="odswidget-map-legend__header">
                <div class="odswidget-map-legend__title" title="Shanghai World University Ranking">Shanghai World
                    University Ranking
                </div>
                <div class="odswidget-map-legend__label">World rank integer (Average)</div>
            </div>
            <div>
                <div class="odswidget-map-legend__choropleth-container">
                    <div class="odswidget-map-legend__choropleth__item">
                        <div class="odswidget-map-legend__choropleth__item-color">
                            <div class="odswidget-map-legend__choropleth__color-block"
                                 style="background-color: rgb(0, 0, 0);"></div>
                        </div>
                        <div class="odswidget-map-legend__choropleth__item-range">
                            <div class="odswidget-map-legend__choropleth__item-range__bound">0
                                <i aria-hidden="true"
                                   class="fa fa-long-arrow-right odswidget-map-legend__choropleth__item-range__bound-arrow"></i>
                            </div>
                            <div class="odswidget-map-legend__choropleth__item-range__bound">100</div>
                        </div>
                    </div>
                    <div class="odswidget-map-legend__choropleth__item">
                        <div class="odswidget-map-legend__choropleth__item-color">
                            <div class="odswidget-map-legend__choropleth__color-block"
                                 style="background-color: rgb(48, 49, 51);"></div>
                        </div>
                        <div class="odswidget-map-legend__choropleth__item-range">
                            <div class="odswidget-map-legend__choropleth__item-range__bound">101
                                <i aria-hidden="true"
                                   class="fa fa-long-arrow-right odswidget-map-legend__choropleth__item-range__bound-arrow"></i>
                            </div>
                            <div class="odswidget-map-legend__choropleth__item-range__bound">200</div>
                        </div>
                    </div>
                    <div class="odswidget-map-legend__choropleth__item">
                        <div class="odswidget-map-legend__choropleth__item-color">
                            <div class="odswidget-map-legend__choropleth__color-block"
                                 style="background-color: rgb(96, 98, 102);"></div>
                        </div>
                        <div class="odswidget-map-legend__choropleth__item-range">
                            <div class="odswidget-map-legend__choropleth__item-range__bound">201
                                <i aria-hidden="true"
                                   class="fa fa-long-arrow-right odswidget-map-legend__choropleth__item-range__bound-arrow"></i>
                            </div>
                            <div class="odswidget-map-legend__choropleth__item-range__bound">300</div>
                        </div>
                    </div>
                    <div class="odswidget-map-legend__choropleth__item">
                        <div class="odswidget-map-legend__choropleth__item-color">
                            <div class="odswidget-map-legend__choropleth__color-block"
                                 style="background-color: rgb(144, 147, 153);"></div>
                        </div>
                        <div class="odswidget-map-legend__choropleth__item-range">
                            <div class="odswidget-map-legend__choropleth__item-range__bound">301
                                <i aria-hidden="true"
                                   class="fa fa-long-arrow-right odswidget-map-legend__choropleth__item-range__bound-arrow"></i>
                            </div>
                            <div class="odswidget-map-legend__choropleth__item-range__bound">400</div>
                        </div>
                    </div>
                    <div class="odswidget-map-legend__choropleth__item">
                        <div class="odswidget-map-legend__choropleth__item-color">
                            <div class="odswidget-map-legend__choropleth__color-block"
                                 style="background-color: rgb(192, 197, 204);"></div>
                        </div>
                        <div class="odswidget-map-legend__choropleth__item-range">
                            <div class="odswidget-map-legend__choropleth__item-range__bound">401
                                <i aria-hidden="true"
                                   class="fa fa-long-arrow-right odswidget-map-legend__choropleth__item-range__bound-arrow"></i>
                            </div>
                            <div class="odswidget-map-legend__choropleth__item-range__bound">500</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</ods-dataset-context>
.map-container {
    position: relative;
}
/* simple legend */
.odswidget-map-legend {
    background-color: #ffffffd1;
}

Custom legend - simple inlined

Same HTML structure, but with custom CSS to display in line.

<ods-dataset-context context="shanghaiworlduniversityrankingpublic"
                     shanghaiworlduniversityrankingpublic-dataset="shanghai-world-university-ranking"
                     shanghaiworlduniversityrankingpublic-domain="userclub">
    <div class="map-container">
        <ods-map style="height: 500px" no-refit="true" scroll-wheel-zoom="false" display-control="true"
                 search-box="false" toolbar-fullscreen="true" toolbar-geolocation="true" basemap="jawg.light"
                 display-control-single-layer="true">
            <ods-map-layer-group>
                <ods-map-layer context="shanghaiworlduniversityrankingpublic"
                               color-numeric-ranges="{'100':'#000000','200':'#303133','300':'#606266','400':'#909399','500':'#C0C5CC'}"
                               color-numeric-range-min="0" picto="ods-circle" show-marker="true" display="choropleth"
                               function="AVG" expression="world_rank_int" shape-opacity="0.9" point-opacity="1"
                               border-color="#FFFFFF" border-opacity="1" border-size="1" border-pattern="solid"
                               caption="false" caption-picto-color="#E5E5E5" title="Shanghai World University Ranking"
                               description="By ranking" size="4"></ods-map-layer>
            </ods-map-layer-group>
        </ods-map>
        <div class="odswidget odswidget-map-legend">
            <div class="odswidget-map-legend__header">
                <div class="odswidget-map-legend__title" title="Shanghai World University Ranking">Shanghai World
                    University Ranking
                </div>
                <div class="odswidget-map-legend__label">World rank integer (Average)</div>
            </div>
            <div>
                <div class="odswidget-map-legend__choropleth-container">
                    <div class="odswidget-map-legend__choropleth__item">
                        <div class="odswidget-map-legend__choropleth__item-color">
                            <div class="odswidget-map-legend__choropleth__color-block"
                                 style="background-color: rgb(0, 0, 0);"></div>
                        </div>
                        <div class="odswidget-map-legend__choropleth__item-range">
                            <div class="odswidget-map-legend__choropleth__item-range__bound">0
                                <i aria-hidden="true"
                                   class="fa fa-long-arrow-right odswidget-map-legend__choropleth__item-range__bound-arrow"></i>
                            </div>
                            <div class="odswidget-map-legend__choropleth__item-range__bound">100</div>
                        </div>
                    </div>
                    <div class="odswidget-map-legend__choropleth__item">
                        <div class="odswidget-map-legend__choropleth__item-color">
                            <div class="odswidget-map-legend__choropleth__color-block"
                                 style="background-color: rgb(48, 49, 51);"></div>
                        </div>
                        <div class="odswidget-map-legend__choropleth__item-range">
                            <div class="odswidget-map-legend__choropleth__item-range__bound">101
                                <i aria-hidden="true"
                                   class="fa fa-long-arrow-right odswidget-map-legend__choropleth__item-range__bound-arrow"></i>
                            </div>
                            <div class="odswidget-map-legend__choropleth__item-range__bound">200</div>
                        </div>
                    </div>
                    <div class="odswidget-map-legend__choropleth__item">
                        <div class="odswidget-map-legend__choropleth__item-color">
                            <div class="odswidget-map-legend__choropleth__color-block"
                                 style="background-color: rgb(96, 98, 102);"></div>
                        </div>
                        <div class="odswidget-map-legend__choropleth__item-range">
                            <div class="odswidget-map-legend__choropleth__item-range__bound">201
                                <i aria-hidden="true"
                                   class="fa fa-long-arrow-right odswidget-map-legend__choropleth__item-range__bound-arrow"></i>
                            </div>
                            <div class="odswidget-map-legend__choropleth__item-range__bound">300</div>
                        </div>
                    </div>
                    <div class="odswidget-map-legend__choropleth__item">
                        <div class="odswidget-map-legend__choropleth__item-color">
                            <div class="odswidget-map-legend__choropleth__color-block"
                                 style="background-color: rgb(144, 147, 153);"></div>
                        </div>
                        <div class="odswidget-map-legend__choropleth__item-range">
                            <div class="odswidget-map-legend__choropleth__item-range__bound">301
                                <i aria-hidden="true"
                                   class="fa fa-long-arrow-right odswidget-map-legend__choropleth__item-range__bound-arrow"></i>
                            </div>
                            <div class="odswidget-map-legend__choropleth__item-range__bound">400</div>
                        </div>
                    </div>
                    <div class="odswidget-map-legend__choropleth__item">
                        <div class="odswidget-map-legend__choropleth__item-color">
                            <div class="odswidget-map-legend__choropleth__color-block"
                                 style="background-color: rgb(192, 197, 204);"></div>
                        </div>
                        <div class="odswidget-map-legend__choropleth__item-range">
                            <div class="odswidget-map-legend__choropleth__item-range__bound">401
                                <i aria-hidden="true"
                                   class="fa fa-long-arrow-right odswidget-map-legend__choropleth__item-range__bound-arrow"></i>
                            </div>
                            <div class="odswidget-map-legend__choropleth__item-range__bound">500</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</ods-dataset-context>
.map-container {
    position: relative;
}
/* inlined legend */
.odswidget-map-legend__choropleth-container {
    display: flex;
    justify-content: space-evenly;
}
.odswidget.odswidget-map-legend {
    left: 4px;
    right: 4px;
    width: inherit;
    padding: 5px 5px 0 5px;
    background-color: #ffffffd1;
}
.odswidget-map-legend__choropleth__item {
    flex-direction: column;
    align-items: center;
}
.odswidget-map-legend__choropleth__item-color {
    margin: 0;
}
.odswidget-map-legend__choropleth__color-block {
    width: 120px;
}
i.fa.fa-long-arrow-right.odswidget-map-legend__choropleth__item-range__bound-arrow {
    margin: 10px;
}
.odswidget-map-legend__choropleth__item-range__bound {
    width: inherit;
}
.odswidget-map-legend__choropleth__item-range {
    font-size: inherit;
    align-items: center;
}
.leaflet-bottom.leaflet-left {
    bottom: 130px;
}
      

Custom legend - Custom layer selector

A custom version of a bit everything, it controls layers and legends.

<ods-dataset-context context="rapworldpublic,opendatasoftofficespublic,shanghaiworlduniversityrankingpublic"
                     rapworldpublic-dataset="rapworld"
                     rapworldpublic-domain="public"
                     rapworldpublic-parameters="{'q':'NOT #null(bio_deathdate)'}"
                     opendatasoftofficespublic-dataset="opendatasoft-offices"
                     opendatasoftofficespublic-domain="public"
                     shanghaiworlduniversityrankingpublic-dataset="shanghai-world-university-ranking"
                     shanghaiworlduniversityrankingpublic-domain="userclub">
    <div class="map-container">
      <div id="customcontroler"
           ng-init="drawer = {'status':false};
                    layerselection = {'rap':true, 'offices':true, 'shapes':true}">
          <ods-map no-refit="true"
                   scroll-wheel-zoom="true"
                   display-control="false"
                   toolbar-fullscreen="false"
                   toolbar-geolocation="true">
              <ods-map-layer-group>
                  <ods-map-layer show-if="layerselection.rap"
                                 context="rapworldpublic"
                                 color-categories="{'rapper':'#BA022A','singer':'#5A1887','producer':'#19630A'}"
                                 color-by-field="categories"
                                 picto="dot"
                                 caption="false"
                                 show-marker="false" display="categories" shape-opacity="0.5" point-opacity="1" border-color="#FFFFFF" border-opacity="1" border-size="1" border-pattern="solid" caption="true" title="Rap World Artists" description="Data Presented" size="4"></ods-map-layer>
              </ods-map-layer-group>
              <ods-map-layer-group>
                  <ods-map-layer show-if="layerselection.offices"
                                 caption="false"
                                 context="opendatasoftofficespublic" color="#336179" picto="ods-circle" show-marker="true" display="auto" shape-opacity="0.5" point-opacity="1" border-color="#FFFFFF" border-opacity="1" border-size="1" border-pattern="solid" caption="true" title="Opendatasoft Offices" description="This dataset contains the list of all Opendatasoft headquarters and local offices, worldwide." 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 show-if="layerselection.shapes" color="#336179"
                                 context="shanghaiworlduniversityrankingpublic"
                                 caption="false"
                                 shape-opacity="0.5">
                  </ods-map-layer>
              </ods-map-layer-group>
          </ods-map>
          <div class="map-control">
              <ul class="odswidget-map-display-control__groups" style="max-height: calc(464px);">
                  <li class="ng-scope odswidget-map-display-control__group"
                      ng-click="layerselection.rap = !layerselection.rap"
                      ng-class="{'odswidget-map-display-control__group--disabled': !layerselection.rap}"
                      style="border-left-color: rgb(229, 229, 229);">
                      <span class="odswidget-map-display-control__group-title">Rap artists</span>
                      <div class="map-control-icons">
                          <svg id="dot-icon" width="19px" height="19px" viewBox="0 0 19 19" version="1.1" xmlns="http://www.w3.org/2000/svg"
                               xmlns:xlink="http://www.w3.org/1999/xlink"
                               xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
                               style="fill: green; width: 35px; height: 35px;">
                              <path d="M13,9.50004202 C13,11.4330618 11.4329777,13.000084 9.49995798,13.000084 C7.56693813,13.000084 5.99991595,11.4330618 5.99991595,9.50004202 C5.99991595,7.56702218 7.56693813,6 9.49995798,6 C11.4329777,6 13,7.56702218 13,9.50004202 L13,9.50004202 Z"
                                    fill="#000000" style="fill: green;"></path>
                          </svg>
                          <svg id="dot-icon" width="19px" height="19px" viewBox="0 0 19 19" version="1.1" xmlns="http://www.w3.org/2000/svg"
                               xmlns:xlink="http://www.w3.org/1999/xlink"
                               xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
                               style="fill: red; width: 35px; height: 35px;">
                              <path d="M13,9.50004202 C13,11.4330618 11.4329777,13.000084 9.49995798,13.000084 C7.56693813,13.000084 5.99991595,11.4330618 5.99991595,9.50004202 C5.99991595,7.56702218 7.56693813,6 9.49995798,6 C11.4329777,6 13,7.56702218 13,9.50004202 L13,9.50004202 Z"
                                    fill="#000000" style="fill: red;"></path>
                          </svg>
                          <svg id="dot-icon" width="19px" height="19px" viewBox="0 0 19 19" version="1.1" xmlns="http://www.w3.org/2000/svg"
                               xmlns:xlink="http://www.w3.org/1999/xlink"
                               xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
                               style="fill: purple; width: 35px; height: 35px;">
                              <path d="M13,9.50004202 C13,11.4330618 11.4329777,13.000084 9.49995798,13.000084 C7.56693813,13.000084 5.99991595,11.4330618 5.99991595,9.50004202 C5.99991595,7.56702218 7.56693813,6 9.49995798,6 C11.4329777,6 13,7.56702218 13,9.50004202 L13,9.50004202 Z"
                                    fill="#000000" style="fill: purple;"></path>
                          </svg>
                      </div>
                  </li>
                  <li class="ng-scope odswidget-map-display-control__group"
                      ng-click="layerselection.offices = !layerselection.offices"
                      ng-class="{'odswidget-map-display-control__group--disabled': !layerselection.offices}"
                      style="border-left-color: rgb(229, 229, 229);">
                      <span class="odswidget-map-display-control__group-title">OpenDataSoft Officies</span>
                      <div class="leaflet-vectormarker" tabindex="0" style="width: 24px; height: 41px; position: relative;">
                          <svg id="svg-vectormarker-marker" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 56">
                              <g id="svg-vectormarker" fill-rule="nonzero" fill="none">
                                  <path fill="rgb(51,97,121)" fill-rule="evenodd" d="M16 0C7.222 0 0 7.217 0 16.157c0 4.86 1.03 8.446 2.66 12.027L16 56l13.34-27.816c1.63-3.58 2.66-7.167 2.66-12.027C32 7.217 24.778 0 16 0z"></path>
                                  <path stroke="rgb(157,202,229)" d="M16 54.844l12.886-26.868c1.79-3.933 2.614-7.42 2.614-11.82C31.5 7.52 24.527.5 16 .5 7.473.5.5 7.52.5 16.157c0 4.4.824 7.886 2.61 11.81L16 54.844z"></path>
                              </g>
                          </svg>
                          <div class="leaflet-vectormarker-iconoverlay" style="opacity: 1; top: 4px"><!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->
                              <svg width="19px" height="19px" viewBox="0 0 19 19" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                   xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
                                   style="fill: white; width: 14px; height: 14px;">
                                  <path d="M18,9.50004182 C18,14.1944851 14.1944015,18.0000836 9.49995818,18.0000836 C4.80551469,18.0000836 0.99991635,14.1944851 0.99991635,9.50004182 C0.99991635,4.80559834 4.80551469,1 9.49995818,1 C14.1944015,1 18,4.80559834 18,9.50004182 L18,9.50004182 Z"
                                        fill="#000000" style="fill: white;"></path>
                                  <rect style="opacity: 0; fill: white;" x="0" y="0" width="19" height="19"></rect>
                              </svg>
                          </div>
                      </div>
                  </li>
                  <li class="ng-scope odswidget-map-display-control__group"
                      ng-click="layerselection.shapes = !layerselection.shapes"
                      ng-class="{'odswidget-map-display-control__group--disabled': !layerselection.shapes}"
                      style="border-left-color: rgb(229, 229, 229);">
                      <span class="odswidget-map-display-control__group-title">Shanghai ranking countries</span>
                  </li>
              </ul>
          </div>
          <div class="map-legend" ng-show="layerselection.rap">
              <!-- would be good to turn off when the diffusion tube layer is deselected -->
              <div class="map-legend-item">
                  <i class="fa fa-circle red" aria-hidden="true"> </i>
                  <strong>Rapper</strong>
              </div>
              <div class="map-legend-item">
                  <i class="fa fa-circle purple" aria-hidden="true"> </i>
                  <strong>Singer</strong>
              </div>
              <div class="map-legend-item">
                  <i class="fa fa-circle green" aria-hidden="true"></i>
                  <strong>Producer</strong>
              </div>
              <div class="map-legend-item">
                  <i class="fa fa-circle black" aria-hidden="true"></i>
                  <strong>Other</strong>
              </div>
          </div>
      </div>
  </div>
</ods-dataset-context>
.map-container {
    position: relative;
}
/* Custom map control, get rid of background, add box-shadow on layer controller */
ul.odswidget-map-display-control__groups {
    width: fit-content;
}
ul.odswidget-map-display-control__groups {
    background-color: transparent;
}
.odswidget.odswidget-map-display-control {
    box-shadow: none;
}
li.ng-scope.odswidget-map-display-control__group.odswidget-map-display-control__group--disabled {
    background-color: white;
    opacity: 0.7;
}
li.ng-scope.odswidget-map-display-control__group {
    background-color: white;
    box-shadow: 2px 2px 10px #868585;
}
/* Custom map controler (zoom etc) : align left ! */
.leaflet-top.leaflet-right, .odswidget-map__map--with-display-control .leaflet-top.leaflet-right {
    right: inherit;
    left: 10px;
    top: 190px;
}
.leaflet-right .leaflet-control {
    float: left;
}
/* Style map */
.map-control {
    position: absolute;
    bottom: 16px;
    right: 0px;
}
ul.odswidget-map-display-control__groups {
    min-width: 220px;
}
li.ng-scope.odswidget-map-display-control__group {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
li.ng-scope.odswidget-map-display-control__group > span {
    margin-right: 3px;
}
.map-control-icons {
    display: flex;
    align-items: center;
}
.map-control-icons > svg {
    margin: -8px;
}
.map-legend {
    position: absolute;
    bottom: 50px;
    left: 10px;
    border-right-color: rgb(229, 229, 229);
    border-right-width: 5px;
    background-color: rgba(255, 255, 255, 0.6);
    box-shadow: 2px 2px 10px #868585;
    padding: 5px 10px;
}
.odswidget-map {
    height: 500px;
}
.green  {
    color: green;
}
.orange  {
    color: orange;
}
.red  {
    color: red;
}
.purple  {
    color: purple;
}
/* leaflet custom style */
.leaflet-vectormarker .leaflet-vectormarker-singleicon #dot-icon {
    stroke-width: 0.4px;
}