Drawing lines

You can draw lines 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: Drawing lines

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>Test example drawing lines</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": [
          {
            // LineString
            "type": "Feature",
            "properties": {
              "style": {
                color: "#17932d"
              }
            },
            "geometry": {
              "type": "LineString",
              "coordinates": [
                [
                  8.671302795410156,
                  50.1390654170196
                ],
                [
                  8.702373504638672,
                  50.13686492019941
                ],
                [
                  8.70443344116211,
                  50.13466432216694
                ]
              ]
            }
          }
        ]
      }

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

</body>

</html>