Code examples

Map integrations

Elements

Marker and text overlays

Additional data integration

Interactive functions

Search functions

Focuses of other
pages:

API-Example: Dynamic Attributions

Static copyright notices can be long, if more than one author has to be named. The dynamic copyright notice displays after a single click.


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


<script>
  // Create attribution
  const attribution = '© 2025 <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>)';

  // Attribution is visible after clicking the "i" symbol in the lower
  // right map corner. This is the default behavior defined by OpenLayers.
  const map = new ol.Map({
    target: document.getElementById('map'),
    logo: false,
    controls: ol.control.defaults.defaults(),
    layers: [
      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'
        })
      })
    ],
    view: new ol.View({
      center: ol.proj.transform([-74.00846, 40.70868], 'EPSG:4326', 'EPSG:3857'),
      zoom: 14
    })
  });
</script>


<style>
  /* Attribution style */

  /* Disable attribution hover effect */
  .ol-attribution,
  .ol-attribution:hover {
    background-clip: padding-box;
    border-radius: 4px;
  }

  /* Change default attributions background color */
  .ol-attribution:not(.ol-collapsed) {
      background-color: rgba(255, 255, 255, 0.85);
  }

  /* Change attributions font size */
  .ol-attribution:not(.ol-collapsed) > ul > li {
    font-size: 11px;
  }

  .ol-attribution:not(.ol-collapsed) > ul > li > a {
    color: #464646;
    font-weight: 600;
  }

  /* Change attribution button color */
  .ol-attribution.ol-control button {
    background-color: rgba(39, 44, 49, 0.9);
  }
  /* end */
  .map {
    height: 400px;
    font-family: "HelveticaNeue", "Helvetica";
  }

</style>


<html>
    <head>
        <link rel='stylesheet' href='https://www.mapz.com/api/static/css/ol/7.3.0/ol.css' />
        <script src='https://www.mapz.com/api/static/javascript/lib/7.3.0/ol.js' type='text/javascript'></script>
        
        
        <style>
          /* Attribution style */

          /* Disable attribution hover effect */
          .ol-attribution,
          .ol-attribution:hover {
            background-clip: padding-box;
            border-radius: 4px;
          }

          /* Change default attributions background color */
          .ol-attribution:not(.ol-collapsed) {
              background-color: rgba(255, 255, 255, 0.85);
          }

          /* Change attributions font size */
          .ol-attribution:not(.ol-collapsed) > ul > li {
            font-size: 11px;
          }

          .ol-attribution:not(.ol-collapsed) > ul > li > a {
            color: #464646;
            font-weight: 600;
          }

          /* Change attribution button color */
          .ol-attribution.ol-control button {
            background-color: rgba(39, 44, 49, 0.9);
          }
          /* end */
          .map {
            height: 400px;
            font-family: "HelveticaNeue", "Helvetica";
          }

        </style>
    </head>
    <body>
        <div id="map" class="map"></div>
        <script>
          // Create attribution
          const attribution = '© 2025 <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>)';

          // Attribution is visible after clicking the "i" symbol in the lower
          // right map corner. This is the default behavior defined by OpenLayers.
          const map = new ol.Map({
            target: document.getElementById('map'),
            logo: false,
            controls: ol.control.defaults.defaults(),
            layers: [
              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'
                })
              })
            ],
            view: new ol.View({
              center: ol.proj.transform([-74.00846, 40.70868], 'EPSG:4326', 'EPSG:3857'),
              zoom: 14
            })
          });
        </script>
    </body>
</html>

<style>
  :root,
  :host {
    --ol-background-color: white;
    --ol-accent-background-color: #F5F5F5;
    --ol-subtle-background-color: rgba(128, 128, 128, 0.25);
    --ol-partial-background-color: rgba(255, 255, 255, 0.75);
    --ol-foreground-color: #333333;
    --ol-subtle-foreground-color: #666666;
    --ol-brand-color: #00AAFF;
  }

  .ol-box {
    box-sizing: border-box;
    border-radius: 2px;
    border: 1.5px solid var(--ol-background-color);
    background-color: var(--ol-partial-background-color);
  }

  .ol-mouse-position {
    top: 8px;
    right: 8px;
    position: absolute;
  }

  .ol-scale-line {
    background: var(--ol-partial-background-color);
    border-radius: 4px;
    bottom: 8px;
    left: 8px;
    padding: 2px;
    position: absolute;
  }

  .ol-scale-line-inner {
    border: 1px solid var(--ol-subtle-foreground-color);
    border-top: none;
    color: var(--ol-foreground-color);
    font-size: 10px;
    text-align: center;
    margin: 1px;
    will-change: contents, width;
    transition: all 0.25s;
  }

  .ol-scale-bar {
    position: absolute;
    bottom: 8px;
    left: 8px;
  }

  .ol-scale-bar-inner {
    display: flex;
  }

  .ol-scale-step-marker {
    width: 1px;
    height: 15px;
    background-color: var(--ol-foreground-color);
    float: right;
    z-index: 10;
  }

  .ol-scale-step-text {
    position: absolute;
    bottom: -5px;
    font-size: 10px;
    z-index: 11;
    color: var(--ol-foreground-color);
    text-shadow: -1.5px 0 var(--ol-partial-background-color), 0 1.5px var(--ol-partial-background-color), 1.5px 0 var(--ol-partial-background-color), 0 -1.5px var(--ol-partial-background-color);
  }

  .ol-scale-text {
    position: absolute;
    font-size: 12px;
    text-align: center;
    bottom: 25px;
    color: var(--ol-foreground-color);
    text-shadow: -1.5px 0 var(--ol-partial-background-color), 0 1.5px var(--ol-partial-background-color), 1.5px 0 var(--ol-partial-background-color), 0 -1.5px var(--ol-partial-background-color);
  }

  .ol-scale-singlebar {
    position: relative;
    height: 10px;
    z-index: 9;
    box-sizing: border-box;
    border: 1px solid var(--ol-foreground-color);
  }

  .ol-scale-singlebar-even {
    background-color: var(--ol-subtle-foreground-color);
  }

  .ol-scale-singlebar-odd {
    background-color: var(--ol-background-color);
  }

  .ol-unsupported {
    display: none;
  }

  .ol-viewport,
  .ol-unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .ol-viewport canvas {
    all: unset;
  }

  .ol-selectable {
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
  }

  .ol-grabbing {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing;
  }

  .ol-grab {
    cursor: move;
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: grab;
  }

  .ol-control {
    position: absolute;
    background-color: var(--ol-subtle-background-color);
    border-radius: 4px;
  }

  .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;
  }

  .ol-control button {
    display: block;
    margin: 1px;
    padding: 0;
    color: var(--ol-subtle-foreground-color);
    font-weight: bold;
    text-decoration: none;
    font-size: inherit;
    text-align: center;
    height: 1.375em;
    width: 1.375em;
    line-height: .4em;
    background-color: var(--ol-background-color);
    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;
    will-change: transform;
  }

  .ol-touch .ol-control button {
    font-size: 1.5em;
  }

  .ol-touch .ol-zoom-extent {
    top: 5.5em;
  }

  .ol-control button:hover,
  .ol-control button:focus {
    text-decoration: none;
    outline: 1px solid var(--ol-subtle-foreground-color);
    color: var(--ol-foreground-color);
  }

  .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);
    display: flex;
    flex-flow: row-reverse;
    align-items: center;
  }

  .ol-attribution a {
    color: var(--ol-subtle-foreground-color);
    text-decoration: none;
  }

  .ol-attribution ul {
    margin: 0;
    padding: 1px .5em;
    color: var(--ol-foreground-color);
    text-shadow: 0 0 2px var(--ol-background-color);
    font-size: 12px;
  }

  .ol-attribution li {
    display: inline;
    list-style: none;
  }

  .ol-attribution li:not(:last-child):after {
    content: " ";
  }

  .ol-attribution img {
    max-height: 2em;
    max-width: inherit;
    vertical-align: middle;
  }

  .ol-attribution button {
    flex-shrink: 0;
  }

  .ol-attribution.ol-collapsed ul {
    display: none;
  }

  .ol-attribution:not(.ol-collapsed) {
    background: var(--ol-partial-background-color);
  }

  .ol-attribution.ol-uncollapsible {
    bottom: 0;
    right: 0;
    border-radius: 4px 0 0;
  }

  .ol-attribution.ol-uncollapsible img {
    margin-top: -.2em;
    max-height: 1.6em;
  }

  .ol-attribution.ol-uncollapsible button {
    display: none;
  }

  .ol-zoomslider {
    top: 4.5em;
    left: .5em;
    height: 200px;
  }

  .ol-zoomslider button {
    position: relative;
    height: 10px;
  }

  .ol-touch .ol-zoomslider {
    top: 5.5em;
  }

  .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: block;
  }

  .ol-overviewmap .ol-overviewmap-map {
    border: 1px solid var(--ol-subtle-foreground-color);
    height: 150px;
    width: 150px;
  }

  .ol-overviewmap:not(.ol-collapsed) button {
    bottom: 0;
    left: 0;
    position: absolute;
  }

  .ol-overviewmap.ol-collapsed .ol-overviewmap-map,
  .ol-overviewmap.ol-uncollapsible button {
    display: none;
  }

  .ol-overviewmap:not(.ol-collapsed) {
    background: var(--ol-subtle-background-color);
  }

  .ol-overviewmap-box {
    border: 1.5px dotted var(--ol-subtle-foreground-color);
  }

  .ol-overviewmap .ol-overviewmap-box:hover {
    cursor: move;
  }

  /* mapz */

  /* mapz style for controls */

  .ol-control,
  .ol-control:hover,
  .ol-control:focus {
    border-radius: 2px;
    background-color: inherit;
  }

  .ol-control button,
  .ol-control button:hover,
  .ol-control button:focus {
    background-color: rgba(39, 44, 49, 0.9);
    color: white;
  }

  /* 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 > li {
    font-size: 11px;
  }

  .ol-attribution:not(.ol-collapsed) > ul > li > a {
    color: #464646;
    font-weight: 600;
  }

  .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 {
    padding: 0;
  }

  /* ol.mapz.control.Filesearch */

  [hidden] {
    display: none!important;
  }

  .mapz-control-search {
    margin: 8px;
    width: 40%;
    min-width: 25em;
    position: inherit;
  }

  .aa-Form {
    display: flex;
  }

  .aa-InputWrapperPrefix {
    display: none;
  }

  .aa-InputWrapper {
    position: relative;
    width: 100%;
  }

  .aa-Input {
    border: 0;
    font: inherit;
    height: 2em;
    padding: 0;
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    color: rgb(70, 70, 70);
    padding: 0 0.5em;
    background: white;
  }

  .aa-Input:focus {
    border-color: none;
    box-shadow: none;
    outline: none;
  }

  .aa-Input::-webkit-search-decoration,
  .aa-Input::-webkit-search-cancel-button,
  .aa-Input::-webkit-search-results-button,
  .aa-Input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  }

  .aa-InputWrapperSuffix {
    align-items: center;
    display: flex;
    height: 2em;
  }

  .aa-InputWrapperSuffix .aa-ClearButton {
    margin: 0 0 0 8px;
  }

  .aa-InputWrapperSuffix .aa-ClearButton .aa-ClearIcon {
    fill: white;
  }

  .aa-Panel {
    margin: 8px 0 0 0;
    background: white;
  }

  .aa-PanelLayout {
    height: 100%;
    margin: 0;
    overflow-y: auto;
    padding: 8px;
    position: relative;
    text-align: left;
  }

  .aa-Panel--scrollable {
    margin: 0;
    max-height: 30vh;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: white #eaeaea;
    scrollbar-width: thin;
  }

  .aa-List {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .aa-Item {
    cursor: pointer;
    padding: 0.2em;
  }

  /* ol.mapz.control.Geolocate */

  .mapz-control-geolocate {
    top: 4em;
    left: 0.5em;
  }

  button.mapz-control-geolocate-button {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgYmFzZVByb2ZpbGU9InRpbnkiIGhlaWdodD0iMjRweCIgaWQ9IkxheWVyXzEiIHZlcnNpb249IjEuMiIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGc+PHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTEwLjM2OCwxOS4xMDJjMC4zNDksMS4wNDksMS4wMTEsMS4wODYsMS40NzgsMC4wODZsNS4zMDktMTEuMzc1YzAuNDY3LTEuMDAyLDAuMDM0LTEuNDM0LTAuOTY3LTAuOTY3TDQuODEyLDEyLjE1NCAgIGMtMS4wMDEsMC40NjctMC45NjMsMS4xMjksMC4wODUsMS40NzlMOSwxNUwxMC4zNjgsMTkuMTAyeiIvPjwvZz48L3N2Zz4=');
    background-size: 1.375em;
  }

  /* ol.mapz.controls.GeoTracker */

  .mapz-control-geotracker {
    top: 4em;
    left: 0.5em;
  }

  button.mapz-control-geotracker-button {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgYmFzZVByb2ZpbGU9InRpbnkiIGhlaWdodD0iMjRweCIgaWQ9IkxheWVyXzEiIHZlcnNpb249IjEuMiIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGc+PHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTEwLjM2OCwxOS4xMDJjMC4zNDksMS4wNDksMS4wMTEsMS4wODYsMS40NzgsMC4wODZsNS4zMDktMTEuMzc1YzAuNDY3LTEuMDAyLDAuMDM0LTEuNDM0LTAuOTY3LTAuOTY3TDQuODEyLDEyLjE1NCAgIGMtMS4wMDEsMC40NjctMC45NjMsMS4xMjksMC4wODUsMS40NzlMOSwxNUwxMC4zNjgsMTkuMTAyeiIvPjwvZz48L3N2Zz4=');
    background-size: 1.375em;
  }

  /* ol.mapz.control.LayerSwitcher */

  .mapz-control-layerswitcher,
  .mapz-control-layerswitcher:hover {
    top: 0.5em;
    right: 0.5em;
    text-align: left;
    padding: 0;
    background-color: rgba(39, 44, 49, 0.9);
  }

  .mapz-control-layerswitcher .heading-container {
    display: flex;
  }

  .mapz-control-layerswitcher .heading-container .title {
    color: white;
    font-size: 0.9em;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    padding: 0.5em 1em;
    width: 100%;
  }

  .mapz-control-layerswitcher .heading-container .title.closed {
    display: none;
  }

  .mapz-control-layerswitcher .heading-container .toggle-button,
  .mapz-control-layerswitcher .heading-container .toggle-button:hover {
    color: white;
    background-color: transparent;
    flex-shrink: 0;
  }

  .mapz-control-layerswitcher .heading-container .toggle-button::before {
    content: 'x';
  }

  .mapz-control-layerswitcher .heading-container .toggle-button.closed::before {
    content: unset;
  }

  .mapz-control-layerswitcher .heading-container .toggle-button.closed {
    display: block;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjIgMjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0id2hpdGUiPjxwYXRoIHBvaW50cz0iNDgwIDE1MCAyNTYgNDggMzIgMTUwIDI1NiAyNTQgNDgwIDE1MCIgZD0iTTIwLjYyNSA2LjQ0NUwxMSAyLjA2M0wxLjM3NSA2LjQ0NUwxMSAxMC45MTRMMjAuNjI1IDYuNDQ1WiIvPjxwYXRoIHBvaW50cz0iMjU1LjcxIDM5Mi45NSAxMTAuOSAzMjYuNzUgMzIgMzYyIDI1NiA0NjQgNDgwIDM2MiA0MDEuMzEgMzI2LjcgMjU1LjcxIDM5Mi45NSIgZD0iTTEwLjk4OCAxNi44ODVMNC43NjUgMTQuMDRMMS4zNzUgMTUuNTU1TDExIDE5LjkzOEwyMC42MjUgMTUuNTU1TDE3LjI0NCAxNC4wMzhMMTAuOTg4IDE2Ljg4NVoiLz48cGF0aCBkPSJNMjAuNjI1IDExbC0zLjI0NSAtMS40NDFMMTEuMDA0IDEyLjQ4NyA0LjYxMiA5LjU1OCAxLjM3NSAxMSAxMSAxNS4zODMgMjAuNjI1IDExUzIwLjYyNSAxMSAyMC42MjUgMTFaIi8+PC9zdmc+');
    background-color: rgba(39, 44, 49, 0.9);
  }

  .mapz-control-layerswitcher .layers-container {
    margin-top: 0px;
    padding: 0.5em 0.75em 0.5em 0.75em;
    -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 .layers-container.closed {
    display: none;
  }

  .mapz-control-layerswitcher input {
    margin: 0.2em 0.7em 0.2em 0;
    font-size: 0.75em;
    cursor: pointer;
    vertical-align: middle;
  }

  .mapz-control-layerswitcher label {
    cursor: pointer;
  }

  .mapz-control-layerswitcher span {
    color: white;
    font-weight: bold;
    font-size: 0.75em;
  }

  /* ol.mapz.control.Search */

  .mapz-control-search {
    margin: 8px;
    width: 40%;
  }

  .mapz-control-search input {
    border: 0;
    font: inherit;
    height: 2em;
    padding: 0;
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    color: rgb(70, 70, 70);
    padding: 0 0.5em;
    background: white;
  }

  .mapz-control-search input:focus {
    border-color: none;
    box-shadow: none;
    outline: none;
  }

  .search-input-container.nominatim {
    display: flex;
  }

  .mapz-control-search .search-suffix-container {
    align-items: center;
    display: flex;
    height: 2em;
  }

  .mapz-control-search .search-suffix-container .clear-button {
    margin: 0 0 0 8px;
  }

  .search-input-container .search-suffix-container .requesting {
    background-image: url('data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==');
    background-position: center;
    background-color: rgba(39, 44, 49, 0.9);
    margin: 0 0 0 8px;
    width: 1.375em;
    height: 1.375em;
  }

  .search-input-container .search-suffix-container .clear-button {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgYmFzZVByb2ZpbGU9InRpbnkiIHdpZHRoPSIxOHB4IiBoZWlnaHQ9IjE4cHgiIHZlcnNpb249IjEuMiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJ3aGl0ZSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGc+PHBhdGggZD0iTTUuMjkzIDYuNzA3bDUuMjkzIDUuMjkzLTUuMjkzIDUuMjkzYy0wLjM5MSAwLjM5MS0wLjM5MSAxLjAyNCAwIDEuNDE0czEuMDI0IDAuMzkxIDEuNDE0IDBsNS4yOTMtNS4yOTMgNS4yOTMgNS4yOTNjMC4zOTEgMC4zOTEgMS4wMjQgMC4zOTEgMS40MTQgMHMwLjM5MS0xLjAyNCAwLTEuNDE0bC01LjI5My01LjI5MyA1LjI5My01LjI5M2MwLjM5MS0wLjM5MSAwLjM5MS0xLjAyNCAwLTEuNDE0cy0xLjAyNC0wLjM5MS0xLjQxNCAwbC01LjI5MyA1LjI5My01LjI5My01LjI5M2MtMC4zOTEtMC4zOTEtMS4wMjQtMC4zOTEtMS40MTQgMHMtMC4zOTEgMS4wMjQgMCAxLjQxNHoiLz48L2c+PC9zdmc+');
    background-position: center;
  }

  .mapz-control-search .search-results {
    margin-top: 0.3em;
    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: 30vh;
    overflow-y: auto;
    padding: 5px 5px;
    width: 95%;
    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: 16px;
  }

  .search-results div span.name,
  .search-results div span.description {
    display: block;
  }

  .search-results div:hover {
    background-color: #f2f2f2;
    border-radius: 4px;
  }

  .search-results div.no-results,
  .search-results div.no-results:hover {
    border: 0;
  }

  /* ol.mapz.control.Modal */

  .mapz-control-modal, 
  .mapz-control-modal:focus,
  .mapz-control-modal:hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .mapz-control-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(254, 254, 254, 0.9);
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    box-shadow: 0 2px 8px 0 rgba(169, 169, 169, 0.5);
    padding: 30px 30px;
    width: 50%;
    min-height: 30%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .mapz-control-modal-message {
    text-align: center;
  }
</style>
Start map editor Start map editor
MAPZ.COM
MY MAPZ
Legal Notice
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.
Notification
Warning
Warning

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

Newsletter Subscription

We appreciate your interest. Please tell us your email address, so that we can keep you up to date.

Complete newsletter registration
Thank you for signing up! In a few minutes you will receive an email with an activation link. Please follow this link and complete the newsletter registration.
Back to the website
You have subscribed to the newsletter!
Thank you for signing up! At any time you have the option to terminate the subscription via the unsubscribe link included in each newsletter.
Back to the website
mapz.com