API-Example: GeoJSON: Point, line and area integration

Embed points and shapes by loading a GeoJSON file. The styling will be adopted from the GeoJSON file; however, you can also manually adjust the styles. GeoJSON elements without a user-defined style will be displayed in the standard mapz.com format.

In the event that the shapes are not already existent from a GIS system like QGIS (Quantum GIS) or a similar system, you can create the shapes in GeoJSON format using the mapz drawing tools. Simply plot the points by hand or let the mapz search function automatically populate the housing areas, country boundaries, administrative boundaries, or postal zones. Afterwards, you can download the GeoJSON file to your hard drive. You can find more information in our Interactive Maps and Data Integration documentation.


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

<script>
  // Create background layer
  const baseLayer = new ol.layer.Tile({
  	source: new ol.source.XYZ({
      attributions: ['© 2023 <a target="_blank" href="http://www.mapz.com">mapz.com </a>\
              - Map Data: <a target="_blank" href="http://openstreetmap.org">OpenStreetMap</a>\
              (<a href="http://opendatacommons.org/licenses/odbl/1.0/" target="_blank">ODbL</a>)'],
      tilePixelRatio: 2,
      url:'https://tiles.mapz.com/mapproxy/v1/demo-817ca352/tiles/1.0.0/mapz_shades_of_gray_hq/EPSG3857/{z}/{x}/{-y}.jpeg'
    })
  });

  // Create vectorlayer and load GeoJSON file from mapz.com
  const vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
      url: "https://www.mapz.com/api/data/mapz-example.geojson",
      format: new ol.format.GeoJSON()
    }),
    style: function(feature) {
      const featureStyle = new ol.mapz.style.MapzStyle(
        feature, {
          baseIconUrl: 'https://www.mapz.com/map/marker/svg/'
      });
      return [featureStyle];
    }
  });

  const map = new ol.Map({
    target: document.getElementById('map'),
    logo: false,
    layers: [
      baseLayer,
      vectorLayer // add the geojson layer to the map
    ],
    view: new ol.View({
      center: ol.proj.transform([13.35320296,52.51372], 'EPSG:4326', 'EPSG:3857'),
      zoom: 9
    })
  });
</script>

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

</style>

<html>
    <head>
        <link rel='stylesheet' href='https://www.mapz.com/api/css/ol/7.0.0/ol.css' />
        <script src='https://www.mapz.com/api/javascript/lib/7.0.0/ol.js' type='text/javascript'></script>
        
        
        <style>
          .map {
            height: 400px;
            font-family: "HelveticaNeue", "Helvetica";
          }

        </style>
    </head>
    <body>
        <div id="map" class="map"></div>
        <script>
          // Create background layer
          const baseLayer = new ol.layer.Tile({
          	source: new ol.source.XYZ({
              attributions: ['© 2023 <a target="_blank" href="http://www.mapz.com">mapz.com </a>\
                      - Map Data: <a target="_blank" href="http://openstreetmap.org">OpenStreetMap</a>\
                      (<a href="http://opendatacommons.org/licenses/odbl/1.0/" target="_blank">ODbL</a>)'],
              tilePixelRatio: 2,
              url:'https://tiles.mapz.com/mapproxy/v1/demo-817ca352/tiles/1.0.0/mapz_shades_of_gray_hq/EPSG3857/{z}/{x}/{-y}.jpeg'
            })
          });

          // Create vectorlayer and load GeoJSON file from mapz.com
          const vectorLayer = new ol.layer.Vector({
            source: new ol.source.Vector({
              url: "https://www.mapz.com/api/data/mapz-example.geojson",
              format: new ol.format.GeoJSON()
            }),
            style: function(feature) {
              const featureStyle = new ol.mapz.style.MapzStyle(
                feature, {
                  baseIconUrl: 'https://www.mapz.com/map/marker/svg/'
              });
              return [featureStyle];
            }
          });

          const map = new ol.Map({
            target: document.getElementById('map'),
            logo: false,
            layers: [
              baseLayer,
              vectorLayer // add the geojson layer to the map
            ],
            view: new ol.View({
              center: ol.proj.transform([13.35320296,52.51372], 'EPSG:4326', 'EPSG:3857'),
              zoom: 9
            })
          });
        </script>
    </body>
</html>

<style>
  :host,:root{--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 .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-unselectable,.ol-viewport{-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:700;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:400;will-change:transform}.ol-touch .ol-control button{font-size:1.5em}.ol-touch .ol-zoom-extent{top:5.5em}.ol-control button:focus,.ol-control button:hover{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:.5em;bottom:.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}.ol-control,.ol-control:focus,.ol-control:hover{border-radius:2px;background-color:inherit}.ol-control button,.ol-control button:focus,.ol-control button:hover{background-color:rgba(39,44,49,.9);color:#fff}.ol-compass{background-color:rgba(39,44,49,.9);color:#fff}.ol-attribution,.ol-attribution:hover{background-clip:padding-box;border-radius:4px}.ol-attribution:not(.ol-collapsed){background-color:rgba(255,255,255,.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}[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:700;border-radius:4px;color:rgb(70,70,70);padding:0 .5em 0 .5em}.aa-Input:focus{border-color:none;box-shadow:none;outline:0}.aa-Input::-webkit-search-cancel-button,.aa-Input::-webkit-search-decoration,.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:#fff}.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:.2em}.mapz-control-geolocate{top:4em;left:.5em}button.mapz-control-geolocate-button{background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgYmFzZVByb2ZpbGU9InRpbnkiIGhlaWdodD0iMjRweCIgaWQ9IkxheWVyXzEiIHZlcnNpb249IjEuMiIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGc+PHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTEwLjM2OCwxOS4xMDJjMC4zNDksMS4wNDksMS4wMTEsMS4wODYsMS40NzgsMC4wODZsNS4zMDktMTEuMzc1YzAuNDY3LTEuMDAyLDAuMDM0LTEuNDM0LTAuOTY3LTAuOTY3TDQuODEyLDEyLjE1NCAgIGMtMS4wMDEsMC40NjctMC45NjMsMS4xMjksMC4wODUsMS40NzlMOSwxNUwxMC4zNjgsMTkuMTAyeiIvPjwvZz48L3N2Zz4=');background-size:1.375em}.mapz-control-geotracker{top:4em;left:.5em}button.mapz-control-geotracker-button{background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgYmFzZVByb2ZpbGU9InRpbnkiIGhlaWdodD0iMjRweCIgaWQ9IkxheWVyXzEiIHZlcnNpb249IjEuMiIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGc+PHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTEwLjM2OCwxOS4xMDJjMC4zNDksMS4wNDksMS4wMTEsMS4wODYsMS40NzgsMC4wODZsNS4zMDktMTEuMzc1YzAuNDY3LTEuMDAyLDAuMDM0LTEuNDM0LTAuOTY3LTAuOTY3TDQuODEyLDEyLjE1NCAgIGMtMS4wMDEsMC40NjctMC45NjMsMS4xMjksMC4wODUsMS40NzlMOSwxNUwxMC4zNjgsMTkuMTAyeiIvPjwvZz48L3N2Zz4=');background-size:1.375em}.mapz-control-layerswitcher,.mapz-control-layerswitcher:hover{top:.5em;right:.5em;text-align:left;padding:0;background-color:rgba(39,44,49,.9)}.mapz-control-layerswitcher .heading-container{display:flex}.mapz-control-layerswitcher .heading-container .title{color:#fff;font-size:.9em;font-weight:700;display:inline-flex;align-items:center;padding:.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:#fff;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,.9)}.mapz-control-layerswitcher .layers-container{margin-top:0;padding:.5em .75em .5em .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:.2em .7em .2em 0;font-size:.75em;cursor:pointer;vertical-align:middle}.mapz-control-layerswitcher label{cursor:pointer}.mapz-control-layerswitcher span{color:#fff;font-weight:700;font-size:.75em}.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:700;border-radius:4px;color:rgb(70,70,70);padding:0 .5em 0 .5em}.mapz-control-search input:focus{border-color:none;box-shadow:none;outline:0}.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,.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:.3em;background-clip:padding-box;background-color:#fff;border:1px solid #d9d9d9;border-radius:4px;box-shadow:0 2px 4px 0 rgba(169,169,169,.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.description,.search-results div span.name{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}
</style>