API-Beispiel: Route und Objekte nach Klick auf ein Symbol darstellen

Zeichnen Sie Objekte oder Routen ein, die sich erst durch Click auf ein Icon öffnen.

Die Objekte, die in die Karte eingezeichnet werden sollen, müssen im GeoJSON-Format übergeben werden. Details dazu finden Sie in unserem Beispiel GeoJSON: Linien, Flächen und Punkte einbinden.


<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_shades_of_gray_hq/EPSG3857/{z}/{x}/{-y}.jpeg'
    })
  });
  
  // Define a feature
  var iconFeature = new ol.Feature({
    geometry: new ol.geom.Point(
      ol.proj.transform([13.3565714, 52.5995951], 'EPSG:4326', 'EPSG:3857')
    )
  });
  
  // Add style to feature
  iconFeature.setStyle(new ol.style.Style({
    image: new ol.style.Icon(({
      src: 'https://www.mapz.com/api/static/images/tour.svg',
      // Set imgSize to fix IE11-Bug
      imgSize: [100, 100],
      scale: 0.5
    }))
  }));
  
  // Create layer with source
  var iconLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
      features: [iconFeature]
    })
  });
  
  // Create Vector layer with GeoJSON file source
  var routeLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
      url: "https://www.mapz.com/api/static/data/berliner_mauerweg.geojson",
      format: new ol.format.GeoJSON()
    }),
    visible: false,
    style: new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'rgba(239, 130, 20, 0.6)',
        width: 3
      })
    })
  });
  
  var map = new ol.Map({
    target: document.getElementById('map'),
    logo: false,
    layers: [
      baseLayer,
      routeLayer,
      iconLayer
    ],
    view: new ol.View({
      center: ol.proj.transform([13.3765714, 52.5095951], 'EPSG:4326', 'EPSG:3857'),
      zoom: 10
    })
  });
  
  map.on('click', function(evt) {
    // When click in map, look for a feature
    var feature = map.forEachFeatureAtPixel(evt.pixel,
      function(feature, layer) {
        return feature;
      }
    );
    // Show the route
    if (feature && !routeLayer.getVisible()) {
      routeLayer.setVisible(true);
    // Hide the route
    } else if (feature) {
      routeLayer.setVisible(false);
    }
  });
  
  // change mouse cursor when over marker
  map.on('pointermove', function(e) {
    var pixel = map.getEventPixel(e.originalEvent);
    var hit = map.hasFeatureAtPixel(pixel);
    map.getTarget().style.cursor = hit ? 'pointer' : '';
  });
</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_shades_of_gray_hq/EPSG3857/{z}/{x}/{-y}.jpeg'
            })
          });
          
          // Define a feature
          var iconFeature = new ol.Feature({
            geometry: new ol.geom.Point(
              ol.proj.transform([13.3565714, 52.5995951], 'EPSG:4326', 'EPSG:3857')
            )
          });
          
          // Add style to feature
          iconFeature.setStyle(new ol.style.Style({
            image: new ol.style.Icon(({
              src: 'https://www.mapz.com/api/static/images/tour.svg',
              // Set imgSize to fix IE11-Bug
              imgSize: [100, 100],
              scale: 0.5
            }))
          }));
          
          // Create layer with source
          var iconLayer = new ol.layer.Vector({
            source: new ol.source.Vector({
              features: [iconFeature]
            })
          });
          
          // Create Vector layer with GeoJSON file source
          var routeLayer = new ol.layer.Vector({
            source: new ol.source.Vector({
              url: "https://www.mapz.com/api/static/data/berliner_mauerweg.geojson",
              format: new ol.format.GeoJSON()
            }),
            visible: false,
            style: new ol.style.Style({
              stroke: new ol.style.Stroke({
                color: 'rgba(239, 130, 20, 0.6)',
                width: 3
              })
            })
          });
          
          var map = new ol.Map({
            target: document.getElementById('map'),
            logo: false,
            layers: [
              baseLayer,
              routeLayer,
              iconLayer
            ],
            view: new ol.View({
              center: ol.proj.transform([13.3765714, 52.5095951], 'EPSG:4326', 'EPSG:3857'),
              zoom: 10
            })
          });
          
          map.on('click', function(evt) {
            // When click in map, look for a feature
            var feature = map.forEachFeatureAtPixel(evt.pixel,
              function(feature, layer) {
                return feature;
              }
            );
            // Show the route
            if (feature && !routeLayer.getVisible()) {
              routeLayer.setVisible(true);
            // Hide the route
            } else if (feature) {
              routeLayer.setVisible(false);
            }
          });
          
          // change mouse cursor when over marker
          map.on('pointermove', function(e) {
            var pixel = map.getEventPixel(e.originalEvent);
            var hit = map.hasFeatureAtPixel(pixel);
            map.getTarget().style.cursor = hit ? 'pointer' : '';
          });
        </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>