Code examples

Map integrations

Elements

Marker and text overlays

Additional data integration

Interactive functions

Search functions

Focuses of other
pages:

API-Example: Group location symbols with a callout

Red Wines:
White Wines:
Contact
Telephon:
Telefax:
Telephon: Telefax:
Detailed information

Complete your clusters with a callout box containing information about the locations.


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

    <div class="template-container">
        <div class="detail-template">
            <img class="image" height="190px" width="160px"/>
            <h4 class="name"></h4>
            <div class="contact">
                <div>
                    <i>Red Wines:</i>
                    <span class="red-wines"></span>
                </div>
                <div>
                    <i>White Wines:</i>
                    <span class="white-wines"></span>
                </div>
                <h5>Contact</h5>

                <div class="address"></div>
                <div class="phone-container">
                    Telephon:
                    <span class="phone">
                    </span>
                </div>
                <div class="fax-container">
                    Telefax:
                    <span class="fax">
                    </span>
                </div>

                <a class="email"></a>
                <a class="homepage"></a>
            </div>
        </div>
        <div class="overview-template">
            <img class="image" height="71px" width="71px"/>
            <h5 class="name"></h5>
            <div class="contact">
                <div>
                    <span class="address"></span>
                </div>
                <div>
                    <span>Telephon:</span>
                    <span class="phone"></span>
                    <span>Telefax:</span>
                    <span class="fax"></span>
                </div>
                <a class="detail-info">
                    Detailed information
                </a>
            </div>
        </div>
    </div>
</body>


<script>
  // Create background layer
  var baseLayer = new ol.layer.Tile({
  	source: new ol.source.XYZ({
      attributions: [new ol.Attribution({
        html: '© 2022 <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/data/winegrowers.geojson",
        format: new ol.format.GeoJSON()
      })
    }),
    // Define cluster style
    style: function(feature, resolution) {
      var size = feature.get('features').length;
      if (size === 1) {
        // Clustered features containing only one feature
        // are treated as normal features
        return [new ol.style.Style({
          image: new ol.style.Icon({
            src: 'https://www.mapz.com/api/images/wine.svg',
            // Set imgSize to fix IE11-Bug
            imgSize: [51.625, 72.039436],
            scale: 0.5
          })
        })];
      }

      // Otherweise display number of clustered features
      // in the icon
      return [new ol.style.Style({
        geometry: feature.getGeometry(),
        image: new ol.style.Icon({
          src: 'https://www.mapz.com/api/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: '#000000'
          }),
          stroke: new ol.style.Stroke({
            color: '#CCCCCC'
          })
        })
      })];
    }
  });

  var detailTemplate = $('.template-container .detail-template');
  var overviewTemplate = $('.template-container .overview-template');

  var popupOverlay = new ol.Overlay.Popup();

  var map = new ol.Map({
    logo: false,
    target: document.getElementById('map'),
    layers: [
      baseLayer,
      clusters
    ],
    overlays: [popupOverlay],
    view: new ol.View({
      center: [0, 0],
      zoom: 0,
      maxZoom: 18
    })
  });

  map.getView().fit(ol.proj.transformExtent(
    [
      8.15072930290222, 49.3761328277921,
      8.18735018650818, 49.611902
    ],
    'EPSG:4326', 'EPSG:3857'
  ), map.getSize());

  function showPopUp(features) {
      var content;
      // For 1 feature, show the detail popup
      if (features.length === 1) {
        content = createDetailPopup(features[0]);
      }
      // Otherwise show the overview popup
      else {
        content = createOverviewPopup(features);
      }
      var popupContent = popupOverlay.show(features[0].getGeometry().getCoordinates(), content.html());
      // add container as javascript object to get click events
      $(popupContent).empty().append(content);
  }

  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 popup
    if (feature) {
       var features = feature.get('features');
       showPopUp(features);
    // Hide the popup
    } else {
      popupOverlay.hide();
    }
  });

  // 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' : '';
  });

  var imageBaseUrl = 'https://www.mapz.com/api/images/winegrowers';

  var createOverviewPopup = function(features) {
    // Create a container
    var container = $('<div></div>');
    container.addClass('overview');
    features.forEach(function(feature) {
      // Clone the template
      var overview = overviewTemplate.clone();
      // Get feature properties
      var name = feature.get('name');
      var imageName = feature.get('imageName') + '_preview.png';
      var contact = feature.get('contact');

      // Fill the tempalte
      overview.find('.image')
        .attr('src', imageBaseUrl + '/' + imageName);
      overview.find('.name')
        .text(name);
      overview.find('.address')
        .text(contact.address);
      overview.find('.phone')
        .text(contact.phone);
      overview.find('.fax')
        .text(contact.fax);

      overview.find('.detail-info')
        .data('coordinates', feature.get('geometry').getCoordinates());
      container.append(overview);

      overview.find('.detail-info').click(function() {
        map.once('moveend', function() {
          showPopUp([feature]);
        });
        var coordinates = $(this).data('coordinates');
        map.getView().setCenter(coordinates);
        map.getView().setZoom(16);

      })

    });
    var wrapper = $('<div></div>');
    wrapper.append(container);
    return wrapper;
  };

  var createDetailPopup = function(feature) {
    // Clone the template
    var details = detailTemplate.clone();
    details.addClass('detail');
    // Get feature properties
    var name = feature.get('name');
    var imageName = feature.get('imageName') + '.png';
    var redWines = feature.get('redWines');
    var whiteWines = feature.get('whiteWines');
    var contact = feature.get('contact');

    // Fill the tempalte
    details.find('.image')
      .attr('src', imageBaseUrl + '/' + imageName);
    details.find('.name')
      .text(name);
    details.find('.red-wines')
      .text(redWines);
    details.find('.white-wines')
      .text(whiteWines);
    details.find('.address')
      .text(contact.address);
    details.find('.phone')
      .text(contact.phone);
    details.find('.fax')
      .text(contact.fax);
    details.find('.email')
      .attr('href', 'mailto:' + contact.email)
      .text(contact.email);
    details.find('.homepage')
      .attr('href', 'http://' + contact.homepage)
      .text(contact.homepage);

    var wrapper = $('<div></div>');
    wrapper.append(details);
    return wrapper;
  };
</script>


<style>
  .ol-popup {
      display: none;
      position: absolute;
      background-color: white;
      padding: 15px 25px 15px 15px;
      border: 1px solid #cccccc;
      bottom: 12px;
      left: -50px;
  }

  .ol-popup:after, .ol-popup:before {
      top: 100%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
  }

  .ol-popup:after {
      border-top-color: white;
      border-width: 10px;
      left: 48px;
      margin-left: -10px;
  }

  .ol-popup:before {
      border-top-color: #cccccc;
      border-width: 11px;
      left: 48px;
      margin-left: -11px;
  }

  .ol-popup-content {
    min-width: 170px;
    max-height: 200px;
    overflow-x: hidden;
  }

  .ol-popup-closer {
      position: absolute;
      top: 2px;
      right: 2px;
      padding: 0 4px;
      color: #cccccc;
      text-decoration: none;
      font-weight: bold;
  }

  .ol-popup-closer:after {
      content: "x";
  }

  /* Hide templates container */
  .template-container {
    display: none;
  }

  /* Definitions below styles the content
   * elements.
   */

  .ol-popup-content .detail {
    width: 450px;
  }

  .ol-popup-content .overview {
    width: 350px;
    max-height: 200px;
  }

  .ol-popup-content div {
    clear: both;
  }

  .ol-popup-content h4,
  .ol-popup-content h5 {
    color: #ef8214;
    font-weight: 400;
    margin-bottom: 9px;
    margin-top: 0px;
  }

  .ol-popup-content h5 {
    margin-top: 4px;
    margin-bottom: 3px;
  }

  .ol-popup-content p,
  .ol-popup-content i,
  .ol-popup-content span,
  .ol-popup-content .contact div,
  .ol-popup-content a {
    font-size: 11px;
    line-height: 17px;
  }

  .ol-popup-content p {
    color: #464646;
  }

  .ol-popup-content a,
  .ol-popup-content a:visited
  .ol-popup-content a:hover {
    color: #ef8214;
    text-decoration: none;
    display: block;
  }

  .ol-popup-content img {
    float: left;
    margin-right: 20px;
    border: 1px solid #cccccc;
  }

  .ol-popup-content .contact {
    display: inline-block;
  }

  .ol-popup-content .overview img {
    margin-bottom: 10px;
  }

  .ol-popup-content .overview > div > div:last-of-type > img {
    margin-bottom: 0;
  }

  .detail-info {
    cursor: pointer;
  }

  .ol-popup-content .detail div.phone-container,
  .ol-popup-content .detail div.fax-container {
    display: inline-block;
  }

  .ol-popup-content .detail .contact {
    width: 260px;
  }

  @media (max-width: 575px) {
    .ol-popup {
      width: 330px;
      left: -25px;
      padding: 10px;
    }

    .ol-popup::before {
      left: 24px;
    }

    .ol-popup::after {
      left: 24px;
    }

    .ol-popup-closer {
      font-size: 10px;
    }

    .ol-popup-content h4 {
      font-size: 10px;
      margin-bottom: 0;
    }

    .ol-popup-content h5 {
      font-size: 9px;
      margin-bottom: 0;
    }

    .ol-popup-content p {
      margin-bottom: 5px;
    }

    .ol-popup-content p,
    .ol-popup-content i,
    .ol-popup-content span,
    .ol-popup-content .contact div,
    .ol-popup-content a {
      font-size: 9px;
      line-height: 12px;
    }

    .ol-popup-content .detail a {
      margin-top: 2px;
    }

    .ol-popup-content img {
      margin-right: 10px;
    }

    .ol-popup-content .detail .contact {
      width: 180px;
      line-height: 12px;
    }

    .ol-popup-content .overview h5,
    .ol-popup-content .overview .contact div {
      margin-bottom: 7px;
    }

    .ol-popup-content .detail .contact div {
      display: inline-block;
    }

    .ol-popup-content .detail div.phone-container,
    .ol-popup-content .detail div.fax-container {
      display: block;
    }

    .ol-popup-content .overview h5 {
      font-size: 10px;
    }

    .ol-popup-content .detail .image {
      width: 120px;
      height: auto;
    }

    .ol-popup-content .logo {
      height: 12px;
      bottom: 34px;
      right: 20px;
    }
  }
  .map {
    height: 400px;
    font-family: "HelveticaNeue", "Helvetica";
  }

</style>


<html>
    <head>
        <link rel='stylesheet' href='https://www.mapz.com/api/css/ol.css' />
        <script src='https://www.mapz.com/api/javascript/lib/3.15.1/openlayers.js' type='text/javascript'></script>
        <script src='http://code.jquery.com/jquery-1.11.0.min.js' type='text/javascript'></script>
        
        <style>
          .ol-popup {
              display: none;
              position: absolute;
              background-color: white;
              padding: 15px 25px 15px 15px;
              border: 1px solid #cccccc;
              bottom: 12px;
              left: -50px;
          }

          .ol-popup:after, .ol-popup:before {
              top: 100%;
              border: solid transparent;
              content: " ";
              height: 0;
              width: 0;
              position: absolute;
              pointer-events: none;
          }

          .ol-popup:after {
              border-top-color: white;
              border-width: 10px;
              left: 48px;
              margin-left: -10px;
          }

          .ol-popup:before {
              border-top-color: #cccccc;
              border-width: 11px;
              left: 48px;
              margin-left: -11px;
          }

          .ol-popup-content {
            min-width: 170px;
            max-height: 200px;
            overflow-x: hidden;
          }

          .ol-popup-closer {
              position: absolute;
              top: 2px;
              right: 2px;
              padding: 0 4px;
              color: #cccccc;
              text-decoration: none;
              font-weight: bold;
          }

          .ol-popup-closer:after {
              content: "x";
          }

          /* Hide templates container */
          .template-container {
            display: none;
          }

          /* Definitions below styles the content
           * elements.
           */

          .ol-popup-content .detail {
            width: 450px;
          }

          .ol-popup-content .overview {
            width: 350px;
            max-height: 200px;
          }

          .ol-popup-content div {
            clear: both;
          }

          .ol-popup-content h4,
          .ol-popup-content h5 {
            color: #ef8214;
            font-weight: 400;
            margin-bottom: 9px;
            margin-top: 0px;
          }

          .ol-popup-content h5 {
            margin-top: 4px;
            margin-bottom: 3px;
          }

          .ol-popup-content p,
          .ol-popup-content i,
          .ol-popup-content span,
          .ol-popup-content .contact div,
          .ol-popup-content a {
            font-size: 11px;
            line-height: 17px;
          }

          .ol-popup-content p {
            color: #464646;
          }

          .ol-popup-content a,
          .ol-popup-content a:visited
          .ol-popup-content a:hover {
            color: #ef8214;
            text-decoration: none;
            display: block;
          }

          .ol-popup-content img {
            float: left;
            margin-right: 20px;
            border: 1px solid #cccccc;
          }

          .ol-popup-content .contact {
            display: inline-block;
          }

          .ol-popup-content .overview img {
            margin-bottom: 10px;
          }

          .ol-popup-content .overview > div > div:last-of-type > img {
            margin-bottom: 0;
          }

          .detail-info {
            cursor: pointer;
          }

          .ol-popup-content .detail div.phone-container,
          .ol-popup-content .detail div.fax-container {
            display: inline-block;
          }

          .ol-popup-content .detail .contact {
            width: 260px;
          }

          @media (max-width: 575px) {
            .ol-popup {
              width: 330px;
              left: -25px;
              padding: 10px;
            }

            .ol-popup::before {
              left: 24px;
            }

            .ol-popup::after {
              left: 24px;
            }

            .ol-popup-closer {
              font-size: 10px;
            }

            .ol-popup-content h4 {
              font-size: 10px;
              margin-bottom: 0;
            }

            .ol-popup-content h5 {
              font-size: 9px;
              margin-bottom: 0;
            }

            .ol-popup-content p {
              margin-bottom: 5px;
            }

            .ol-popup-content p,
            .ol-popup-content i,
            .ol-popup-content span,
            .ol-popup-content .contact div,
            .ol-popup-content a {
              font-size: 9px;
              line-height: 12px;
            }

            .ol-popup-content .detail a {
              margin-top: 2px;
            }

            .ol-popup-content img {
              margin-right: 10px;
            }

            .ol-popup-content .detail .contact {
              width: 180px;
              line-height: 12px;
            }

            .ol-popup-content .overview h5,
            .ol-popup-content .overview .contact div {
              margin-bottom: 7px;
            }

            .ol-popup-content .detail .contact div {
              display: inline-block;
            }

            .ol-popup-content .detail div.phone-container,
            .ol-popup-content .detail div.fax-container {
              display: block;
            }

            .ol-popup-content .overview h5 {
              font-size: 10px;
            }

            .ol-popup-content .detail .image {
              width: 120px;
              height: auto;
            }

            .ol-popup-content .logo {
              height: 12px;
              bottom: 34px;
              right: 20px;
            }
          }
          .map {
            height: 400px;
            font-family: "HelveticaNeue", "Helvetica";
          }

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

        <div class="template-container">
            <div class="detail-template">
                <img class="image" height="190px" width="160px"/>
                <h4 class="name"></h4>
                <div class="contact">
                    <div>
                        <i>Red Wines:</i>
                        <span class="red-wines"></span>
                    </div>
                    <div>
                        <i>White Wines:</i>
                        <span class="white-wines"></span>
                    </div>
                    <h5>Contact</h5>

                    <div class="address"></div>
                    <div class="phone-container">
                        Telephon:
                        <span class="phone">
                        </span>
                    </div>
                    <div class="fax-container">
                        Telefax:
                        <span class="fax">
                        </span>
                    </div>

                    <a class="email"></a>
                    <a class="homepage"></a>
                </div>
            </div>
            <div class="overview-template">
                <img class="image" height="71px" width="71px"/>
                <h5 class="name"></h5>
                <div class="contact">
                    <div>
                        <span class="address"></span>
                    </div>
                    <div>
                        <span>Telephon:</span>
                        <span class="phone"></span>
                        <span>Telefax:</span>
                        <span class="fax"></span>
                    </div>
                    <a class="detail-info">
                        Detailed information
                    </a>
                </div>
            </div>
        </div>
        <script>
          // Create background layer
          var baseLayer = new ol.layer.Tile({
          	source: new ol.source.XYZ({
              attributions: [new ol.Attribution({
                html: '© 2022 <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/data/winegrowers.geojson",
                format: new ol.format.GeoJSON()
              })
            }),
            // Define cluster style
            style: function(feature, resolution) {
              var size = feature.get('features').length;
              if (size === 1) {
                // Clustered features containing only one feature
                // are treated as normal features
                return [new ol.style.Style({
                  image: new ol.style.Icon({
                    src: 'https://www.mapz.com/api/images/wine.svg',
                    // Set imgSize to fix IE11-Bug
                    imgSize: [51.625, 72.039436],
                    scale: 0.5
                  })
                })];
              }

              // Otherweise display number of clustered features
              // in the icon
              return [new ol.style.Style({
                geometry: feature.getGeometry(),
                image: new ol.style.Icon({
                  src: 'https://www.mapz.com/api/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: '#000000'
                  }),
                  stroke: new ol.style.Stroke({
                    color: '#CCCCCC'
                  })
                })
              })];
            }
          });

          var detailTemplate = $('.template-container .detail-template');
          var overviewTemplate = $('.template-container .overview-template');

          var popupOverlay = new ol.Overlay.Popup();

          var map = new ol.Map({
            logo: false,
            target: document.getElementById('map'),
            layers: [
              baseLayer,
              clusters
            ],
            overlays: [popupOverlay],
            view: new ol.View({
              center: [0, 0],
              zoom: 0,
              maxZoom: 18
            })
          });

          map.getView().fit(ol.proj.transformExtent(
            [
              8.15072930290222, 49.3761328277921,
              8.18735018650818, 49.611902
            ],
            'EPSG:4326', 'EPSG:3857'
          ), map.getSize());

          function showPopUp(features) {
              var content;
              // For 1 feature, show the detail popup
              if (features.length === 1) {
                content = createDetailPopup(features[0]);
              }
              // Otherwise show the overview popup
              else {
                content = createOverviewPopup(features);
              }
              var popupContent = popupOverlay.show(features[0].getGeometry().getCoordinates(), content.html());
              // add container as javascript object to get click events
              $(popupContent).empty().append(content);
          }

          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 popup
            if (feature) {
               var features = feature.get('features');
               showPopUp(features);
            // Hide the popup
            } else {
              popupOverlay.hide();
            }
          });

          // 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' : '';
          });

          var imageBaseUrl = 'https://www.mapz.com/api/images/winegrowers';

          var createOverviewPopup = function(features) {
            // Create a container
            var container = $('<div></div>');
            container.addClass('overview');
            features.forEach(function(feature) {
              // Clone the template
              var overview = overviewTemplate.clone();
              // Get feature properties
              var name = feature.get('name');
              var imageName = feature.get('imageName') + '_preview.png';
              var contact = feature.get('contact');

              // Fill the tempalte
              overview.find('.image')
                .attr('src', imageBaseUrl + '/' + imageName);
              overview.find('.name')
                .text(name);
              overview.find('.address')
                .text(contact.address);
              overview.find('.phone')
                .text(contact.phone);
              overview.find('.fax')
                .text(contact.fax);

              overview.find('.detail-info')
                .data('coordinates', feature.get('geometry').getCoordinates());
              container.append(overview);

              overview.find('.detail-info').click(function() {
                map.once('moveend', function() {
                  showPopUp([feature]);
                });
                var coordinates = $(this).data('coordinates');
                map.getView().setCenter(coordinates);
                map.getView().setZoom(16);

              })

            });
            var wrapper = $('<div></div>');
            wrapper.append(container);
            return wrapper;
          };

          var createDetailPopup = function(feature) {
            // Clone the template
            var details = detailTemplate.clone();
            details.addClass('detail');
            // Get feature properties
            var name = feature.get('name');
            var imageName = feature.get('imageName') + '.png';
            var redWines = feature.get('redWines');
            var whiteWines = feature.get('whiteWines');
            var contact = feature.get('contact');

            // Fill the tempalte
            details.find('.image')
              .attr('src', imageBaseUrl + '/' + imageName);
            details.find('.name')
              .text(name);
            details.find('.red-wines')
              .text(redWines);
            details.find('.white-wines')
              .text(whiteWines);
            details.find('.address')
              .text(contact.address);
            details.find('.phone')
              .text(contact.phone);
            details.find('.fax')
              .text(contact.fax);
            details.find('.email')
              .attr('href', 'mailto:' + contact.email)
              .text(contact.email);
            details.find('.homepage')
              .attr('href', 'http://' + contact.homepage)
              .text(contact.homepage);

            var wrapper = $('<div></div>');
            wrapper.append(details);
            return wrapper;
          };
        </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>
Start map editor Start map editor
MAPZ.COM
MY MAPZ
LEGAL INFORMATION
Request a new password

Forgot your password? No Problem! Please enter your email address.

To the login screen
Request a new password
Thank you! In a few minutes, you'll receive an email with a link to reset your password. Click on this link and select a new password.
To the login screen
Set new password

Forgot your password? No problem! Please enter a new password.

Settings
|
Download Options
|
Deactivate Account

User Settings

Edit your email address or password, it's now just a click away! If you would like to update your personal data, then you'll get the opportunity to do so during your next download.

Update email address


*

*
* required

Update password


*

*

*
* required

Language

Select your language for mapz.com.

Matomo Webanalytics

Download options

You have two options to generate your maps:

These options only affect newly created maps, already created maps will not be affected by changing this setting! Are you unsure which setting is the right one for you? In our manual we go into this topic again in more detail and also generally explain a bit more comprehensively why screen views can differ from the downloaded file (or its preview).

Deactivate Account

You can deactive your maps.com account here. Once you deactivated your account, you will lose access to your account and all of the information stored within your account will be deleted.

Deactivate account
mapz.com

Please verify your account before requesting a new password.

You haven't received a message from us to verify your account? There must be a glitch in the system. Please request a new verification email from us.

To the login screen
Warning
In a few minutes, you'll receive an email with an activation link. Please click on this link and complete the registration.
To the login screen
Warning!

We're sorry, but the map editor is not yet compatible with mobile devices.

Warning
Sorry! This link was deactivated and is no longer available.
Warning
This link was created for a closed user group. It appears that you are not included in this group. If you feel there is an error, please contact us.

Please wait ...

The map download is being prepared.

Please wait ...

Creating preview map. Please do not close this window.

Please wait ...

The data is being created.

mapz.com
Warning

Are you sure that you want to cancel your account? This action cannot be undone.

mapz.com