Version:

Create static map


Create static map from current map or from parameters

Create static map

<!DOCTYPE html>
<html>
  <head>
    <title>Create static map</title>
    <script src="https://maps.cercalia.com/maps/loader.js?key=YOUR_API_KEY&v=5&lang=en&theme=1976d2"></script>
  </head>
  <body>
    <style>
      #staticImageDiv {
        background-color: #fff;
        width: 800px;
        height: 600px;
        overflow: auto;
        position: absolute;
        top: 105px;
        right: 20px;
        box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
        z-index: 1000;
      }

      input {
        width: 120px;
      }

      label {
        width: 120px;
      }

    </style>
    <div id="map" class="map"></div>
    <div class="container">
      <div class="row">
        <div class="col-md-6 col-sm-6">
            <button id="staticMapFromMap">Generate Static map from current map with features</button>
        </div>
        <div class="col-md-6 col-sm-6">
          <div>
            <label for="longitude">Longitude</label>
            <input type="text" id="longitude" placeholder="2.8079" value="2.8079"/>
          </div>
          <div>
            <label for="latitude">Latitude</label>
            <input type="text" id="latitude" placeholder="41.972" value="41.972"/>
          </div>
          <div>
            <label for="zoom">Zoom</label>
            <input type="text" id="zoom" value="14" placeholder="14"/>
          </div>
          <div>
            <label for="width">Image width</label>
            <input type="text" id="width" placeholder="1024" value="1024"/>
          </div>
          <div>
            <label for="height">Image height</label>
            <input type="text" id="height" placeholder="768" value="768"/>
          </div>
          <br/>
          <div>
            <button id="staticMapParams">Static map from parameters without features</button>
          </div>
        </div>
      </div>
    </div>    <script>
      var map;

      document.addEventListener('cercalia-ready', initMap);

      function initMap() {

        map = new cercalia.Map({
          target: 'map',
          center: new cercalia.LonLat(2.1156363311304576, 41.4425607706632),
          zoom: 12
        });

        drawSampleFeatures();

        var staticMapFromMapBtn = document.querySelector('#staticMapFromMap');
        var staticMapParamsBtn = document.querySelector('#staticMapParams');
        staticMapFromMapBtn.addEventListener('click', handleStaticMapFromMapBtn);
        staticMapParamsBtn.addEventListener('click', handleStaticMapParamsBtn);
      }

      function drawSampleFeatures() {
        map.addFeature(new cercalia.Feature({
          wkt: 'POLYGON((2.8111422635925765 41.96151811540572,2.812730131329393 41.96557873653652,2.8143179990662093 41.9697348213897,2.8232443906677718 41.96766080142036,2.8229694642437453 41.967232029254134,2.822394130410051 41.966867072066954,2.820814309300279 41.96626478842101,2.818816063584184 41.96630866358087,2.817397175015306 41.966073332824294,2.8165281392944808 41.96552289477895,2.8111422635925765 41.96151811540572))'
        }));

        map.addFeature(new cercalia.Feature({
          wkt: 'POLYGON((2.814495231865446 41.97015766448458,2.823410894630949 41.96788423105042,2.823829319237272 41.96939188544235,2.824279930351774 41.9739385635645,2.8167053720937174 41.97547000312332,2.814495231865446 41.97015766448458))',
          strokeColor: '#641E16',
          fillColor: '#E74C3C',
          fillOpacity: 0.4
        }));

        map.addMarker(new cercalia.Marker({
          position: new cercalia.LonLat(2.8111422635925765, 41.96151811540572),
          icon: new cercalia.Icon({
            src: 'https://maps.cercalia.com/maps/v5/img/cercalia-marker-icon-A.png'
          })
        }));

        map.addMarker(new cercalia.Marker({
          position: new cercalia.LonLat(2.814495231865446, 41.97015766448458),
          icon: new cercalia.Icon({
            src: 'https://maps.cercalia.com/maps/v5/img/cercalia-marker-icon-B.png'
          })
        }));

        map.centerToFeatures();
      }

      function handleStaticMapFromMapBtn() {
        var staticMapService = new cercalia.service.StaticMap();
        createDivStaticImage();
        staticMapService.createFromMap(map, handleCreateMap);
      }

      function handleStaticMapParamsBtn() {

        var longitude = document.querySelector('#longitude').value;
        var latitude = document.querySelector('#latitude').value;
        var width = document.querySelector('#width').value;
        var height = document.querySelector('#height').value;
        var zoom = document.querySelector('#zoom').value;

        if (longitude.length > 0 && latitude.length > 0 && width.length > 0 && height.length > 0 && zoom.length > 0) {
          var params = {
            width: parseInt(width),
            height: parseInt(height),
            center: new cercalia.LonLat(parseFloat(longitude), parseFloat(latitude)),
            zoom: parseInt(zoom)
          };

          var staticMapService = new cercalia.service.StaticMap();
          createDivStaticImage();
          staticMapService.createFromParams(params, handleCreateMap);
        } else {
          alert('Incorrect input values. Check them');
        }
      }

      function handleCreateMap(imgElement) {
        document.querySelector('#staticImageDiv').innerHTML = '';
        document.querySelector('#staticImageDiv').appendChild(imgElement);
      }


      function createDivStaticImage() {
        if (document.querySelector('#staticImageDiv')) {
          document.querySelector('#staticImageDiv').remove();
        }

        var div = document.createElement('div');
        div.id = 'staticImageDiv';
        div.innerHTML = 'Generating image ...';
        document.body.appendChild(div);
      }
    </script>
  </body>
</html>