Linien einzeichnen

Sie können auf der Karte Linien anhand von GeoJSON einzeichnen.

Das Beispiel ist vollständig; Sie können es lokal in einer Datei abspeichern und im Browser aufrufen. Sie müssen lediglich den Wert für den apiKey ersetzen.

SmartMaps-Karte


Codebeispiel: Linien einzeichnen

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>Testbeispiel Linien einzeichnen</title>
</head>

<body>
  <div id="map-wrapper">
    <!-- Vordefiniertes div-Element, in das die Karte geladen wird. -->
    <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
      });

      // Objekt für GeoJSON definieren
      var geoJson = new modules.provider.GeoJSON(null, {
        style: function(feature) {
          return feature.properties && feature.properties.style;
        }
      });

      // Leeres Objekt in die Karte einbinden.
      geoJson.addTo(map);

      var DemoGeoJSON = {
        "type": "FeatureCollection",
        "features": [
          {
            // LineString
            "type": "Feature",
            "properties": {
              "style": {
                color: "#17932d"
              }
            },
            "geometry": {
              "type": "LineString",
              "coordinates": [
                [
                  8.671302795410156,
                  50.1390654170196
                ],
                [
                  8.702373504638672,
                  50.13686492019941
                ],
                [
                  8.70443344116211,
                  50.13466432216694
                ]
              ]
            }
          }
        ]
      }

      // Daten in GeoJSON-Objekt laden.
      geoJson.addData(DemoGeoJSON);
      window.map = map;
    });
  </script>

</body>

</html>