Flächen zeichnen

Sie können Flächen mithilfe von GeoJSON auf der Karte zeichnen. Das Beispiel ist vollständig; Sie können es lokal in einer Datei speichern und in Ihrem Browser ansehen. Sie müssen nur den Wert für apiKey ersetzen.

Test Example Drawing in Surfaces

<!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: 100%; height: 300px;"></div>
  </div>
  <!-- SmartMaps-API -->
  <script src="https://www.yellowmap.de/api_rst/api/loader?libraries=free-3&apiKey={[INSERT 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>

Dieser HTML-Code zeigt, wie Sie mit der SmartMaps API und GeoJSON Flächen auf der Karte zeichnen. Sie können diesen Code in einer Datei speichern und in Ihrem Browser öffnen, um die Flächen auf der Karte angezeigt zu sehen.