API-Beispiel: Kartenauswahl und Feature einbinden

Über den Karten können weitere Ebenen mit Zusatzinformationen eingeblendet werden. Basis ist eine GeoJSON-Datei, die Sie an die API übergeben.

var attribution = 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>)'
});

// Create background layer
var baseLayer = new ol.layer.Tile({
	source: new ol.source.XYZ({
    attributions: [attribution],
    tilePixelRatio: 2,
    url:'https://tiles.mapz.com/mapproxy/v1/demo-817ca352/tiles/1.0.0/mapz_multicolor_poi_hq/EPSG3857/{z}/{x}/{-y}.jpeg'
  }),
  visible: false,
  name: "osm",
  title: "Multicolor"
});

// Create background with gray styling layer
var baseLayerGray = new ol.layer.Tile({
	source: new ol.source.XYZ({
    attributions: [attribution],
    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'
  }),
  name: "mapz_shades_of_gray",
  title: "Shades of Gray"
});

// Create vectorlayer and load GeoJSON file from mapz.com
var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: "https://www.mapz.com/api/static/data/hamburg_airport.geojson",
    format: new ol.format.GeoJSON()
  }),
  title: 'Features',
  // add a type to the vectorlayer to define an overlay
  type: 'overlay',
  style: function(feature) {
    var featureStyle = new ol.mapz.style.FromGeoJSON(
      feature, {
        baseIconUrl: 'https://www.mapz.com/map/marker/'
    });
    return [featureStyle];
  }
});

var map = new ol.Map({
  target: document.getElementById('map'),
  logo: false,
  layers: [baseLayer, baseLayerGray, vectorLayer],
  view: new ol.View({
    center: ol.proj.transform([9.98671, 53.63102], 'EPSG:4326', 'EPSG:3857'),
    zoom: 9
  })
});

var layerSwitcherControl = new ol.mapz.control.LayerSwitcher();
map.addControl(layerSwitcherControl);


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


<script>
  var attribution = 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>)'
  });
  
  // Create background layer
  var baseLayer = new ol.layer.Tile({
  	source: new ol.source.XYZ({
      attributions: [attribution],
      tilePixelRatio: 2,
      url:'https://tiles.mapz.com/mapproxy/v1/demo-817ca352/tiles/1.0.0/mapz_multicolor_poi_hq/EPSG3857/{z}/{x}/{-y}.jpeg'
    }),
    visible: false,
    name: "osm",
    title: "Multicolor"
  });
  
  // Create background with gray styling layer
  var baseLayerGray = new ol.layer.Tile({
  	source: new ol.source.XYZ({
      attributions: [attribution],
      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'
    }),
    name: "mapz_shades_of_gray",
    title: "Shades of Gray"
  });
  
  // Create vectorlayer and load GeoJSON file from mapz.com
  var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
      url: "https://www.mapz.com/api/static/data/hamburg_airport.geojson",
      format: new ol.format.GeoJSON()
    }),
    title: 'Features',
    // add a type to the vectorlayer to define an overlay
    type: 'overlay',
    style: function(feature) {
      var featureStyle = new ol.mapz.style.FromGeoJSON(
        feature, {
          baseIconUrl: 'https://www.mapz.com/map/marker/'
      });
      return [featureStyle];
    }
  });
  
  var map = new ol.Map({
    target: document.getElementById('map'),
    logo: false,
    layers: [baseLayer, baseLayerGray, vectorLayer],
    view: new ol.View({
      center: ol.proj.transform([9.98671, 53.63102], 'EPSG:4326', 'EPSG:3857'),
      zoom: 9
    })
  });
  
  var layerSwitcherControl = new ol.mapz.control.LayerSwitcher();
  map.addControl(layerSwitcherControl);
</script>


<style>
  div.mapz-control-layerswitcher, .mapz-control-layerswitcher:hover {
    background-color: rgba(39, 44, 49, 0.9);
  }
  .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>
          div.mapz-control-layerswitcher, .mapz-control-layerswitcher:hover {
            background-color: rgba(39, 44, 49, 0.9);
          }
          .map {
            height: 400px;
            font-family: "HelveticaNeue", "Helvetica";
          }
        </style>
    </head>
    <body>
        <div id="map" class="map"></div>
        <script>
          var attribution = 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>)'
          });
          
          // Create background layer
          var baseLayer = new ol.layer.Tile({
          	source: new ol.source.XYZ({
              attributions: [attribution],
              tilePixelRatio: 2,
              url:'https://tiles.mapz.com/mapproxy/v1/demo-817ca352/tiles/1.0.0/mapz_multicolor_poi_hq/EPSG3857/{z}/{x}/{-y}.jpeg'
            }),
            visible: false,
            name: "osm",
            title: "Multicolor"
          });
          
          // Create background with gray styling layer
          var baseLayerGray = new ol.layer.Tile({
          	source: new ol.source.XYZ({
              attributions: [attribution],
              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'
            }),
            name: "mapz_shades_of_gray",
            title: "Shades of Gray"
          });
          
          // Create vectorlayer and load GeoJSON file from mapz.com
          var vectorLayer = new ol.layer.Vector({
            source: new ol.source.Vector({
              url: "https://www.mapz.com/api/static/data/hamburg_airport.geojson",
              format: new ol.format.GeoJSON()
            }),
            title: 'Features',
            // add a type to the vectorlayer to define an overlay
            type: 'overlay',
            style: function(feature) {
              var featureStyle = new ol.mapz.style.FromGeoJSON(
                feature, {
                  baseIconUrl: 'https://www.mapz.com/map/marker/'
              });
              return [featureStyle];
            }
          });
          
          var map = new ol.Map({
            target: document.getElementById('map'),
            logo: false,
            layers: [baseLayer, baseLayerGray, vectorLayer],
            view: new ol.View({
              center: ol.proj.transform([9.98671, 53.63102], 'EPSG:4326', 'EPSG:3857'),
              zoom: 9
            })
          });
          
          var layerSwitcherControl = new ol.mapz.control.LayerSwitcher();
          map.addControl(layerSwitcherControl);
        </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>

Benutzereinstellungen

Hier können Sie Ihre Emailadresse und Ihr Passwort auf den letzten Stand bringen. Falls Sie Ihre Adressdaten aktualisieren möchten, so wird Ihnen diese Möglichkeit während Ihres nächsten Downloads angeboten.

Sprache

Hier können Sie die Sprache einstellen in der Ihnen mapz.com angezeigt wird.

Piwik Webanalyse

Download-Optionen

Sollen die Karteninhalte dynamisch an das von Ihnen gewählte Papierformat angepasst werden oder wollen Sie genau das Kartenbild herunterladen, das im Karteneditor für Ihren Ziel-Zoomlevel angezeigt wird?

Benutzeraccount deaktivieren

Sie können Ihren Zugang hier stilllegen. Ihr Zugang wird damit deaktiviert und Sie werden keine weiteren Nachrichten von uns erhalten.

Code-Beispiele

Karten einbinden

Elemente

Marker und Texte setzen

Weitere Daten einbinden

Interaktivität

Suchfunktionen

Das könnte Sie auch
interessieren: