Draw in areas

You can draw areas on the map using GeoJSON.

The example is complete; you can save it locally in a file and view it in your browser. You only have to replace the value for the apiKey.

SmartMaps map


Code example: Draw in areas

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>Test example drawing in surfaces</title>
</head>

<body>
  <div id="map-wrapper">
    <!-- Predefined div-element into which the map is loaded. -->
    <div id="map" style="width: 600px; height: 600px;"></div>
  </div>
  <!-- SmartMaps-API -->
  <script src="https://www.yellowmap.de/api_rst/api/loader?libraries=free-3&apiKey={API_KEY}"></script>

  <script>
    ym.ready(function(modules) {
      var map = ym.map("map", {
        center: ym.latLng(50.095685, 8.690445),
        zoom: 12
      });

      // Define object for GeoJSON
      var geoJson = new modules.provider.GeoJSON(null, {
        style: function(feature) {
          return feature.properties && feature.properties.style;
        }
      });

      // Include empty object in the map.
      geoJson.addTo(map);

      var DemoGeoJSON = {
        "type": "FeatureCollection",
        "features": [
          // Polygon
          {
            "type": "Feature",
            "properties": {
              "style": {
                color: "#8000ff",
                weight: 2,
                opacity: 1,
                fillColor: "#5f215a",
                fillOpacity: 0.5
              }
            },
            "geometry": {
              "type": "Polygon",
              "coordinates": [
                [
                  [
                    8.64469528198242,
                    50.11727603943097
                  ],
                  [
                    8.635082244873047,
                    50.112542691690734
                  ],
                  [
                    8.639202117919922,
                    50.10142298804818
                  ],
                  [
                    8.659114837646484,
                    50.10164320525455
                  ],
                  [
                    8.662376403808594,
                    50.11045106339959
                  ],
                  [
                    8.64469528198242,
                    50.11727603943097
                  ]
                ]
              ]
            }
          },
          {
            // Polygon
            "type": "Feature",
            "properties": {
              "style": {
                color: "#0606a4",
                weight: 2,
                opacity: 1,
                fillColor: "#b4dfe4",
                fillOpacity: 0.5
              }
            },
            "geometry": {
              "type": "Polygon",
              "coordinates": [
                [
                  [
                    8.710784912109375,
                    50.095917228872004
                  ],
                  [
                    8.724517822265625,
                    50.095917228872004
                  ],
                  [
                    8.724517822265625,
                    50.10142298804818
                  ],
                  [
                    8.710784912109375,
                    50.10142298804818
                  ],
                  [
                    8.710784912109375,
                    50.095917228872004
                  ]
                ]
              ]
            }
          }
        ]
      }

      // Load data into GeoJSON object.
      geoJson.addData(DemoGeoJSON);
      window.map = map;
    });
  </script>

</body>

</html>