MapMetrics Atlas API Docs

Appearance

Drawing a Polyline on Your Map ​

This guide demonstrates how to display a polyline (LineString) on your MapMetrics map. Polylines are useful for showing routes, paths, or any sequence of connected points.

Prerequisites ​

Before you begin, ensure you have:

Adding a Polyline ​

To add a polyline, you need to:

  1. Define the coordinates for your line.
  2. Add a GeoJSON source to the map.
  3. Add a new layer of type line that uses this source.

Example: Adding a Polyline ​

javascript
// Define the coordinates for your polyline
const lineCoordinates = [
          [
            2.3398344221314176,
            48.85894283778356
          ],
          [
            2.349092133374455,
            48.856611153804636
          ],
          [
            2.3539379666036098,
            48.85466006946356
          ],
          [
            2.3610259017737576,
            48.85189986905755
          ],
          [
            2.3589284515699944,
            48.84828282438352
          ],
          [
            2.3505386507564197,
            48.851566731130646
          ],
          [
            2.3433783897170883,
            48.85399382812608
          ],
          [
            2.3386048823571173,
            48.85732494614973
          ],
          [
            2.334409981949733,
            48.85789597269732
          ],
          [
            2.3399067480006295,
            48.85899042203965
          ]
        ];

// Add the source and layer when the map is loaded
map.on('load', function () {
  map.addSource('route', {
    'type': 'geojson',
    'data': {
      'type': 'Feature',
      'properties': {},
      'geometry': {
        'type': 'LineString',
        'coordinates': lineCoordinates
      }
    }
  });

  map.addLayer({
    'id': 'route',
    'type': 'line',
    'source': 'route',
    'layout': {
      'line-join': 'round',
      'line-cap': 'round'
    },
    'paint': {
      'line-color': '#FF0000',
      'line-width': 4
    }
  });
});

Complete Example ​

Below is a complete example of how to add a polyline to your map:

html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.mapmetrics-atlas.net/versions/latest/mapmetrics-gl.css"
      rel="stylesheet"
    />
    <script src="https://cdn.mapmetrics-atlas.net/versions/latest/mapmetrics-gl.js"></script>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
      }
      #map {
        min-height: 500px;
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      // Don't forget to replace <YOUR_ACCESS_TOKEN> with your own access token
      const accessToken = "<YOUR_ACCESS_TOKEN>";
      const map = new mapmetricsgl.Map({
        container: "map",
        style: `${accessToken}`,
        zoom: 13,
        center: [2.359902, 48.845066],
        attributionControl: { compact: false, position: 'bottom-right' },
      }).addControl(new mapmetricsgl.NavigationControl(), "top-right");

      // Define the coordinates for your polyline
      const lineCoordinates = [
        [2.349902, 48.841066],
        [2.359902, 48.845066],
        [2.369902, 48.849066]
      ];

      map.on('load', function () {
        map.addSource('route', {
          'type': 'geojson',
          'data': {
            'type': 'Feature',
            'properties': {},
            'geometry': {
              'type': 'LineString',
              'coordinates': lineCoordinates
            }
          }
        });

        map.addLayer({
          'id': 'route',
          'type': 'line',
          'source': 'route',
          'layout': {
            'line-join': 'round',
            'line-cap': 'round'
          },
          'paint': {
            'line-color': '#FF0000',
            'line-width': 4
          }
        });
      });
    </script>
  </body>
</html>

For more information, visit the MapMetrics GitHub repository.

Polyline Example (Vue) ​

Below is a Vue-compatible example that displays a polyline (LineString) on the map: