API-Beispiel: Clustern Sie Standortsymbole

Wenn viele Standorte in einer Karte angezeigt werden sollen und sie sich überlagern würden, können Sie zusammengefasst dargestellt werden. Zoomt der Anwender weiter hinein, wird die Zusammenfassung aufgelöst.


<body>
    <div id="map" class="map"></div>
</body>

<script>
  // Create background layer
  var baseLayer = new ol.layer.Tile({
  	source: new ol.source.XYZ({
      attributions: [new ol.Attribution({
        html: '© 2018 <a target="_blank" href="http://www.mapz.com">mapz.com </a>\
              - Map Data: <a target="_blank" href="http://openstreetmap.org" >OpenStreetMap</a>\
              (<a href="http://opendatacommons.org/licenses/odbl/1.0/" target="_blank">ODbL</a>)'
      })],
      tilePixelRatio: 2,
      url:'https://tiles.mapz.com/mapproxy/v1/demo-817ca352/tiles/1.0.0/mapz_multicolor_base_hq/EPSG3857/{z}/{x}/{-y}.jpeg'
    })
  });
  
  // Create a vector layer with clustring source and add a styling
  var clusters = new ol.layer.Vector({
    // Wrap vector source in cluster source
    source: new ol.source.Cluster({
      distance: 40,
        source: new ol.source.Vector({
        url: "https://www.mapz.com/api/static/data/demo-poi-newyork.geojson",
        format: new ol.format.GeoJSON()
      })
    }),
    // Define cluster style
    style: function(feature, resolution) {
      var size = feature.get('features').length;
      var icon, text;
  
      if (size > 1) {
        // When feature is clustered, use `cluster_marker.svg` and show text
        icon = new ol.style.Icon({
          src: 'https://www.mapz.com/api/static/images/cluster_marker.svg',
          // Set imgSize to fix IE11-Bug
          imgSize: [51.613998, 72.042],
          scale: 0.5
        });
        text = new ol.style.Text({
          text: size.toString(),
          textAlign: 'center',
          textBaseline: 'middle',
          offsetX: 0,
          offsetY: -4,
          rotation: 0,
          fill: new ol.style.Fill({
            color: '#000'
          }),
          stroke: new ol.style.Stroke({
            color: '#ccc'
          })
        })
      } else {
        // Otherwise show the `food.svg` icon only
        icon = new ol.style.Icon({
          src: 'https://www.mapz.com/api/static/images/food.svg',
          // Set imgSize to fix IE11-Bug
          imgSize: [51.625, 72.039436],
          scale: 0.5
        });
      }
  
      return [new ol.style.Style({
        geometry: feature.getGeometry(),
        image: icon,
        text: text
      })];
    }
  });
  
  var map = new ol.Map({
    target: document.getElementById('map'),
    logo: false,
    layers: [
      baseLayer,
      clusters
    ],
    view: new ol.View({
      center: ol.proj.transform([-73.95964, 40.72677], 'EPSG:4326', 'EPSG:3857'),
      zoom: 12,
      maxZoom: 18
    })
  });
</script>

<style>
  .map {
    height: 400px;
    font-family: "HelveticaNeue", "Helvetica";
  }
</style>

<html>
    <head>
        <link rel='stylesheet' href='https://www.mapz.com/api/static/css/ol.css' />
        <script src='https://www.mapz.com/api/static/javascript/lib/3.15.1/openlayers.js' type='text/javascript'></script>
        
        
        <style>
          .map {
            height: 400px;
            font-family: "HelveticaNeue", "Helvetica";
          }
        </style>
    </head>
    <body>
        <div id="map" class="map"></div>
        <script>
          // Create background layer
          var baseLayer = new ol.layer.Tile({
          	source: new ol.source.XYZ({
              attributions: [new ol.Attribution({
                html: '© 2018 <a target="_blank" href="http://www.mapz.com">mapz.com </a>\
                      - Map Data: <a target="_blank" href="http://openstreetmap.org" >OpenStreetMap</a>\
                      (<a href="http://opendatacommons.org/licenses/odbl/1.0/" target="_blank">ODbL</a>)'
              })],
              tilePixelRatio: 2,
              url:'https://tiles.mapz.com/mapproxy/v1/demo-817ca352/tiles/1.0.0/mapz_multicolor_base_hq/EPSG3857/{z}/{x}/{-y}.jpeg'
            })
          });
          
          // Create a vector layer with clustring source and add a styling
          var clusters = new ol.layer.Vector({
            // Wrap vector source in cluster source
            source: new ol.source.Cluster({
              distance: 40,
                source: new ol.source.Vector({
                url: "https://www.mapz.com/api/static/data/demo-poi-newyork.geojson",
                format: new ol.format.GeoJSON()
              })
            }),
            // Define cluster style
            style: function(feature, resolution) {
              var size = feature.get('features').length;
              var icon, text;
          
              if (size > 1) {
                // When feature is clustered, use `cluster_marker.svg` and show text
                icon = new ol.style.Icon({
                  src: 'https://www.mapz.com/api/static/images/cluster_marker.svg',
                  // Set imgSize to fix IE11-Bug
                  imgSize: [51.613998, 72.042],
                  scale: 0.5
                });
                text = new ol.style.Text({
                  text: size.toString(),
                  textAlign: 'center',
                  textBaseline: 'middle',
                  offsetX: 0,
                  offsetY: -4,
                  rotation: 0,
                  fill: new ol.style.Fill({
                    color: '#000'
                  }),
                  stroke: new ol.style.Stroke({
                    color: '#ccc'
                  })
                })
              } else {
                // Otherwise show the `food.svg` icon only
                icon = new ol.style.Icon({
                  src: 'https://www.mapz.com/api/static/images/food.svg',
                  // Set imgSize to fix IE11-Bug
                  imgSize: [51.625, 72.039436],
                  scale: 0.5
                });
              }
          
              return [new ol.style.Style({
                geometry: feature.getGeometry(),
                image: icon,
                text: text
              })];
            }
          });
          
          var map = new ol.Map({
            target: document.getElementById('map'),
            logo: false,
            layers: [
              baseLayer,
              clusters
            ],
            view: new ol.View({
              center: ol.proj.transform([-73.95964, 40.72677], 'EPSG:4326', 'EPSG:3857'),
              zoom: 12,
              maxZoom: 18
            })
          });
        </script>
    </body>
</html>

<style>
  
  .ol-mouse-position {
    top: 8px;
    right: 8px;
    position: absolute;
  }
  
  .ol-scale-line {
    background: rgba(255, 255, 255, 0.85);
    border-radius: 3px;
    bottom: 10px;
    left: 8px;
    padding: 5px;
    font-size: 11px;
    position: absolute;
    color: #464646;
  }
  
  .ol-scale-line-inner {
    border: 1px solid #464646;
    border-top: none;
    text-align: center;
    margin: 1px;
    will-change: contents, width;
    display: inline-block;
  }
  
  .ol-scale-line-zoom-inner {
    display: inline-block;
    margin-right: 10px;
    width: auto;
  }
  
  .ol-scale-line-scale-inner {
    display: inline-block;
    margin-left: 10px;
    width: auto;
  }
  
  .ol-overlay-container {
    will-change: left,right,top,bottom;
  }
  
  .ol-unsupported {
    display: none;
  }
  .ol-viewport .ol-unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  
  .ol-control {
    position: absolute;
    background-color: #eee;
    background-color: rgba(255,255,255,0.4);
    border-radius: 4px;
    padding: 2px;
  }
  .ol-control:hover {
    background-color: rgba(255,255,255,0.6);
  }
  .ol-zoom {
    top: .5em;
    left: .5em;
  }
  .ol-rotate {
    top: .5em;
    right: .5em;
    transition: opacity .25s linear, visibility 0s linear;
  }
  .ol-rotate.ol-hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s linear, visibility 0s linear .25s;
  }
  .ol-zoom-extent {
    top: 4.643em;
    left: .5em;
  }
  .ol-full-screen {
    right: .5em;
    top: .5em;
  }
  @media print {
    .ol-control {
      display: none;
    }
  }
  
  .ol-control button {
    display: block;
    margin: 1px;
    padding: 0;
    color: white;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    height: 22px;
    width: 22px;
    line-height: .4em;
    background-color: #7b98bc;
    background-color: rgba(0,60,136,0.5);
    border: none;
    border-radius: 2px;
  }
  .ol-control button::-moz-focus-inner {
    border: none;
    padding: 0;
  }
  .ol-zoom-extent button {
    line-height: 1.4em;
  }
  .ol-compass {
    display: block;
    font-weight: normal;
    font-size: 1.2em;
    will-change: transform;
  }
  .ol-touch .ol-control button {
    font-size: 1.5em;
    line-height: 1.2em;
  }
  .ol-touch .ol-zoom-extent {
    top: 5.5em;
  }
  .ol-control button:hover,
  .ol-control button:focus {
    text-decoration: none;
    background-color: #4c6079;
    background-color: rgba(0,60,136,0.7);
  }
  .ol-zoom .ol-zoom-in {
    border-radius: 2px 2px 0 0;
  }
  .ol-zoom .ol-zoom-out {
    border-radius: 0 0 2px 2px;
  }
  
  
  .ol-attribution {
    text-align: right;
    bottom: .5em;
    right: .5em;
    max-width: calc(100% - 1.3em);
  }
  
  .ol-attribution a {
    text-decoration: none;
  }
  
  .ol-attribution ul {
    margin: 0;
    padding: 0 .5em;
    font-size: .7rem;
    line-height: 1.375em;
    color: #000;
    text-shadow: 0 0 2px #fff;
  }
  .ol-attribution li {
    display: inline;
    list-style: none;
    line-height: inherit;
  }
  .ol-attribution li:not(:last-child):after {
    content: " ";
  }
  .ol-attribution img {
    max-height: 2em;
    max-width: inherit;
  }
  .ol-attribution ul, .ol-attribution button {
    display: inline-block;
  }
  .ol-attribution.ol-collapsed ul {
    display: none;
  }
  .ol-attribution.ol-logo-only ul {
    display: block;
  }
  .ol-attribution:not(.ol-collapsed) {
    background: rgba(255,255,255,0.8);
  }
  .ol-attribution.ol-uncollapsible {
    bottom: 0;
    right: 0;
    border-radius: 4px 0 0;
    height: 1.1em;
    line-height: 1em;
  }
  .ol-attribution.ol-logo-only {
    background: transparent;
    bottom: .4em;
    height: 1.1em;
    line-height: 1em;
  }
  .ol-attribution.ol-uncollapsible img {
    margin-top: -.2em;
    max-height: 1.6em;
  }
  .ol-attribution.ol-logo-only button,
  .ol-attribution.ol-uncollapsible button {
    display: none;
  }
  
  .ol-zoomslider {
    top: 4.5em;
    left: .5em;
    width: 24px;
    height: 200px;
  }
  .ol-zoomslider-thumb {
    position: absolute;
    background: #7b98bc;
    background: rgba(0,60,136,0.5);
    border-radius: 2px;
    cursor: pointer;
    height: 10px;
    width: 22px;
    margin: 3px;
  }
  
  .ol-touch .ol-zoomslider {
    top: 5.5em;
    width: 2.052em;
  }
  .ol-touch .ol-zoomslider-thumb {
    width: 1.8em;
  }
  
  .ol-overviewmap {
    left: 0.5em;
    bottom: 0.5em;
  }
  .ol-overviewmap.ol-uncollapsible {
    bottom: 0;
    left: 0;
    border-radius: 0 4px 0 0;
  }
  .ol-overviewmap .ol-overviewmap-map,
  .ol-overviewmap button {
    display: inline-block;
  }
  .ol-overviewmap .ol-overviewmap-map {
    border: 1px solid #7b98bc;
    height: 150px;
    margin: 2px;
    width: 150px;
  }
  .ol-overviewmap:not(.ol-collapsed) button{
    bottom: 1px;
    left: 2px;
    position: absolute;
  }
  .ol-overviewmap.ol-collapsed .ol-overviewmap-map,
  .ol-overviewmap.ol-uncollapsible button {
    display: none;
  }
  .ol-overviewmap:not(.ol-collapsed) {
    background: rgba(255,255,255,0.8);
  }
  .ol-overviewmap-box {
    border: 2px dotted rgba(0,60,136,0.7);
  }
  
  /* mapz */
  
  /* mapz style for controls */
  .ol-control,
  .ol-control:hover {
    border-radius: 2px;
    background-color: inherit;
  }
  
  /* mapz style for zoom buttons */
  .ol-zoom button,
  .ol-zoom button:hover {
    background-color: rgba(39, 44, 49, 0.9);
    color: white;
    cursor: pointer;
  }
  /* end */
  
  /* mapz style for attribution */
  
  .ol-attribution,
  .ol-attribution:hover {
    background-clip: padding-box;
    border-radius: 4px;
  }
  
  .ol-attribution:not(.ol-collapsed) {
      background-color: rgba(255, 255, 255, 0.85);
  }
  
  .ol-attribution:not(.ol-collapsed) > ul {
    padding: 0 5px 0 0 !important;
    margin-bottom: 0px !important;
  }
  
  .ol-attribution:not(.ol-collapsed) > ul > li {
    font-size: 11px !important;
  }
  
  .ol-attribution:not(.ol-collapsed) > ul > li > a {
    color: #464646;
    font-weight: 600;
    font-size: 11px !important;
  }
  
  .ol-attribution.ol-control button {
    background-color: rgba(39, 44, 49, 0.9);
    cursor: pointer;
  }
  
  .ol-attribution.ol-control button span {
    color: #fff;
  }
  
  .ol-attribution.ol-uncollapsible {
    margin: 0 10px 10px 0;
    border-radius: 3px;
    padding: 5px;
    box-sizing: content-box;
  }
  
  .ol-attribution.ol-uncollapsible > ul {
    display: inline-block !important;
    padding: 0 !important;
  }
  
  .ol-attribution.ol-uncollapsible > ul > li {
    padding: 0 !important;
  }
  
  /* ol.mapz.control.Geolocate */
  
  .mapz-control-geolocate {
    position: absolute;
    top: 70px;
    left: 7px;
  }
  
  button.mapz-control-geolocate-button {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH3wcQCC0PcwOZEwAAAYVJREFUOMvtlE1LQkEUhp+5TSJCQmjkIlxaUFiXUpKgyIWLskX4P/whbdoEQZv6BUVRi4yIWhh2S+xjES0LUkECkUS63jvtiujDW9mudzlz5oE55z2v6B/SFW2Wxh/oH/ozTUSHmU8m2gMdDQ+wtLjA8vIK5XLpwxrpDKWIjAySSqVIJueQUpLJ7JI1Lr4PlcImOqaTSCSYmZnF6/UCYJoma2urn7/76NAtFbHxKNPTcSYnpwgEAm/ut7Y2yV/eOIP29XYTi8WIx+OEw8P4fL7XBiiFEIJqtcrGxvqXzXqBdrkFkcgYuq7jcrm4urrENE08Hg+hUAi/vweAnZ1tTs+vnUFrDUU2myWXy2FZFratsG2bYDBIOp3G7++hWLxnby/Tcqxvvl9+eHxXIO5uqdfrABweHnFydt7SiS19qmkaUnZSqVQ4ONjHUtrvN0oIDSk7KBQKHOcMR65uaX4pJaVSiXw+z5OltQfabJoYhoFhnDheZeEk+bvcglpDtTelvgP8szx9BiSpfm0R/9QCAAAAAElFTkSuQmCC');
    background-color: inherit;
    width: 21px;
    height: 21px;
    color: white;
    cursor: pointer;
    opacity: 0.9;
  }
  
  
  /* ol.mapz.control.LayerSwitcher */
  
  .mapz-control-layerswitcher,
  .mapz-control-layerswitcher:hover {
    top: 10px;
    right: 10px;
    text-align: left;
    padding: 0;
    background-color: rgba(39, 44, 49, 0.9);
  }
  
  .mapz-control-layerswitcher .layers-container {
    margin-top: 0px;
    padding: 0 15px 10px 15px;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
  }
  
  
  .mapz-control-layerswitcher .layers-container:empty {
      padding: 0;
  }
  
  .mapz-control-layerswitcher div.layers-container:first-of-type {
    padding-top: 10px;
  }
  
  .mapz-control-layerswitcher .layers-container.closed {
    display: none;
  }
  
  .mapz-control-layerswitcher .layers-container div.title {
    color: white;
    font-size: 0.9em;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  .mapz-control-layerswitcher input {
    margin: 0.2em 0.7em 0.2em 0;
    font-size: 0.75em;
    line-height: 15px;
  }
  
  .mapz-control-layerswitcher label,
  .mapz-control-layerswitcher label input {
    cursor: pointer;
  }
  
  .mapz-control-layerswitcher span {
    color: white;
    font-weight: bold;
    font-size: 0.75em;
    line-height: 20px;
    position: relative;
    bottom: 1px;
  }
  
  .mapz-control-layerswitcher > button.toggle-button,
  .mapz-control-layerswitcher > button.toggle-button:hover {
    color: white;
    float:right;
    cursor: pointer;
    padding: 5px;
    line-height: 5px;
    background-color: transparent;
    height: 22px;
    width: 22px;
  }
  
  .mapz-control-layerswitcher button.toggle-button:before {
    content: 'x';
    font-size: 12px;
  }
  
  .mapz-control-layerswitcher button.toggle-button.closed:before {
    content: '';
  }
  .mapz-control-layerswitcher button.toggle-button.closed {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAMAAADzapwJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAXRQTFRF////ITE8NUROM0JMIzI9NkVPJDM+M0NNN0VP5ObnITI8LTxGMD9JMkFLNENNIjE9NENM5efoKThDLDtFIjI9NkROJTQ/yMzPJjVAzM/SIjM98vPzKTdDJjZALz5IJDU/M0FMJTM/MUBLIzQ+KDdC5OboNkVOLTtFIzM+e4WLKThELj1HLz5JSVZgeIKJJTVAsba6eYKJfoeOJTRAMkFMLTxHYm52ys7RIzI+eIKIJDM/sLa6y87RfYeNMD9KKzlFOkhSJzZAKDZC5eboLDpGJzdBLDxGSFVfJjdBLj1IKjpEKztFr7S5yc3QKTlDZnF5JjVBJzhCKzpEW2ZuYGtzNkRQbHd/vMHEVmJrXGZvvcLFys7QMj9LJDQ/KDhCcHqBVGBob3mA8vP0W2dvbHd+cn2DfYaMNkRPzNDSeIGIX2tzsLW5eYOJRlNbRVJbbXh/b3mBRlNcoaito6qvys3Qe4SKKzpFr7W5WmZucnuDe4SLOkhTalR+ggAAATtJREFUeNpkzFVXQkEUBeBtIIJSXhXpbpDuDum0u7s7/7wzF1i48HuY2SfWgUgkGhnG52O4zWdBLpeP980S9I9EYDAYJqgVKaSfVquV5lgMGo1Gp9NtSUFJT/bmCb8fC8QVD328qEqlcruRzUYHTXawuNRuI5fz/muXy1Aqlfu3f454jUZjpwO73d5sck4bbLOxvnYxQ6FafagrUL9b3cHr9f2zAhtvy+k0ajWbiS7eHDJPHzTkbUyhAIvF8v7NDvL0MdkYhikWMUVljsLs7fDjT4aUwSAcjoO4AvFSKIFEqPRyjO1zR6UCtTopoYueTZfLQ4MkqXY6MU342EH38ZE6lYJerxcIBGcy9rbsa5cUgkAAYz2tS8haWq22W0EoFIoJLkGikP5csRijA3NEL8JsNnOIyR5O168AAwC4zzIECwP69gAAAABJRU5ErkJggg==');
    background-color: rgba(39, 44, 49, 0.9);
  }
  
  /* ol.mapz.control.Search */
  
  .mapz-control-search,
  .mapz-control-search:hover {
    text-align: left;
    background-color: transparent;
    position: relative;
  }
  
  .ol-control.mapz-control-search,
  .ol-control.mapz-control-search:hover {
    top: 5px;
    right: 5px;
    position: absolute;
  }
  
  .mapz-control-search input {
    font-size: 13px;
    font-weight: bold;
    border-radius: 4px;
    color: #464646;
    height: 28px;
    line-height: 28px;
    padding: 0 0 0 6px;
    vertical-align: middle;
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #fafafa 0%, #ffffff 100%) repeat scroll 0 0;
    border: 1px solid rgba(0, 0, 0, 0.15);
    outline: medium none;
    width: 350px;
    box-sizing: border-box;
  }
  
  .mapz-control-search .search-results {
    margin-top: 5px;
    background-clip: padding-box;
    background-color: white;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    box-shadow: 0 2px 4px 0 rgba(169, 169, 169, 0.5);
    height: auto;
    max-height: 200px;
    overflow-y: auto;
    padding: 5px 5px;
    position: absolute;
    width: 350px;
    z-index: 1000;
    box-sizing: border-box;
    font-family: "HelveticaNeue", "Helvetica";
  }
  
  .ol-control.mapz-control-search .search-results {
    position: relative;
  }
  
  .search-results div {
    background-color: none;
    padding: 5px 5px;
    cursor: pointer;
    margin: 5px 5px;
    border-bottom: 1px solid  #d9d9d9;
    color: #464646;
    font-size: 13px;
  }
  
  .search-results div span.name,
  .search-results div span.description {
    color: #464646;
    font-size: 13px !important;
    line-height: 15px;
    display: block;
    cursor: pointer;
  }
  
  .search-results div:hover {
    background-color: #f2f2f2;
    border-radius: 4px;
  }
  
  .search-results div.no-results,
  .search-results div.no-results:hover {
  /*,
  .search-results div.requesting,
  .search-results div.requesting:hover {*/
    font-size: 13px;
    border: 0;
  }
  
  .search-input-container {
    position: relative;
    width: 350px;
  }
  
  .search-input-container .clear-button,
  .search-input-container .clear-button:hover,
  .search-input-container .clear-button:focus,
  .search-input-container .requesting {
    background-color: transparent;
    border: medium none;
    position: absolute;
    right: 5px;
    top: 3px;
  }
  
  .search-input-container .clear-button,
  .search-input-container .clear-button:hover,
  .search-input-container .clear-button:focus {
  cursor: pointer;
    color: #cccccc;
    font-weight: bold;
    font-size: 13px;
  }
  
  .search-input-container .clear-button:before {
    content: "x";
  }
  
  .search-input-container .requesting {
    background-image: url('data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==');
    height: 16px;
    width: 16px;
  }
  
  .search-input-container .requesting:before {
    content: " ";
  }
  
  @media (max-width: 400px) {
    .mapz-control-search input,
    .mapz-control-search .search-results,
    .search-input-container {
      width: 250px;
    }
  }
  
  /* ol.mapz.controls.FileSearch */
  .search-input-container span.twitter-typeahead {
    width: 100%;
  }
  
  .search-results div.tt-dataset-result:hover,
  .search-results div.tt-dataset-result {
    border: 0;
    background: white;
  }
  
  .search-results div.tt-selectable:hover {
    background-color: #f2f2f2;
    border-radius: 4px;
  }
  
  .search-results strong.tt-highlight {
    font-weight: bold;
  }
  
  
  /* ol.mapz.controls.GeoTracker */
  .mapz-control-geotracker {
    position: absolute;
    top: 55px;
    left: 7px;
  }
  
  button.mapz-control-geotracker-button,
  button.mapz-control-geotracker-button:hover,
  button.mapz-control-geotracker-button:focus {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH3wcQCC0PcwOZEwAAAYVJREFUOMvtlE1LQkEUhp+5TSJCQmjkIlxaUFiXUpKgyIWLskX4P/whbdoEQZv6BUVRi4yIWhh2S+xjES0LUkECkUS63jvtiujDW9mudzlz5oE55z2v6B/SFW2Wxh/oH/ozTUSHmU8m2gMdDQ+wtLjA8vIK5XLpwxrpDKWIjAySSqVIJueQUpLJ7JI1Lr4PlcImOqaTSCSYmZnF6/UCYJoma2urn7/76NAtFbHxKNPTcSYnpwgEAm/ut7Y2yV/eOIP29XYTi8WIx+OEw8P4fL7XBiiFEIJqtcrGxvqXzXqBdrkFkcgYuq7jcrm4urrENE08Hg+hUAi/vweAnZ1tTs+vnUFrDUU2myWXy2FZFratsG2bYDBIOp3G7++hWLxnby/Tcqxvvl9+eHxXIO5uqdfrABweHnFydt7SiS19qmkaUnZSqVQ4ONjHUtrvN0oIDSk7KBQKHOcMR65uaX4pJaVSiXw+z5OltQfabJoYhoFhnDheZeEk+bvcglpDtTelvgP8szx9BiSpfm0R/9QCAAAAAElFTkSuQmCC');
    background-color: inherit;
    width: 22px;
    height: 22px;
    color: white;
    cursor: pointer;
    opacity: 0.9;
  }
</style>