MapMetrics Atlas API Docs

Appearance

Add a GeoJSON Polygon ​

Add a GeoJSON Polygon and display it as a filled area with an outline border.

Add a Polygon ​

javascript
map.on('load', () => {
  map.addSource('polygon', {
    type: 'geojson',
    data: {
      type: 'Feature',
      geometry: {
        type: 'Polygon',
        coordinates: [[
          [lng1, lat1],
          [lng2, lat2],
          [lng3, lat3],
          [lng1, lat1]  // close the ring
        ]]
      }
    }
  });

  // Filled area
  map.addLayer({
    id: 'polygon-fill',
    type: 'fill',
    source: 'polygon',
    paint: { 'fill-color': '#3b82f6', 'fill-opacity': 0.3 }
  });

  // Border outline
  map.addLayer({
    id: 'polygon-outline',
    type: 'line',
    source: 'polygon',
    paint: { 'line-color': '#1d4ed8', 'line-width': 2 }
  });
});

Polygon with a Hole ​

javascript
coordinates: [
  // Outer ring
  [[-5, 40], [10, 40], [10, 50], [-5, 50], [-5, 40]],
  // Inner ring (hole)
  [[0, 44], [5, 44], [5, 47], [0, 47], [0, 44]]
]

Complete Example ​

html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <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>#map { height: 500px; width: 100%; }</style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      const map = new mapmetricsgl.Map({
        container: 'map',
        style: '<StyleFile_URL_with_Token>',
        center: [2.349902, 48.852966],
        zoom: 4
      });
      map.on('load', () => {
        map.addSource('polygon', {
          type: 'geojson',
          data: {
            type: 'Feature',
            geometry: {
              type: 'Polygon',
              coordinates: [[[-4.5, 48.0], [8.2, 48.0], [7.5, 43.5], [3.0, 42.5], [-1.8, 43.4], [-4.5, 48.0]]]
            }
          }
        });
        map.addLayer({ id: 'polygon-fill', type: 'fill', source: 'polygon', paint: { 'fill-color': '#3b82f6', 'fill-opacity': 0.3 } });
        map.addLayer({ id: 'polygon-outline', type: 'line', source: 'polygon', paint: { 'line-color': '#1d4ed8', 'line-width': 2 } });
      });
    </script>
  </body>
</html>
jsx
import React, { useEffect, useRef } from 'react';
import mapmetricsgl from '@mapmetrics/mapmetrics-gl';
import '@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css';

const GeoJSONPolygon = () => {
  const mapContainer = useRef(null);
  const map = useRef(null);

  useEffect(() => {
    if (map.current) return;
    map.current = new mapmetricsgl.Map({
      container: mapContainer.current,
      style: '<StyleFile_URL_with_Token>',
      center: [2.349902, 48.852966],
      zoom: 4
    });
    map.current.on('load', () => {
      map.current.addSource('polygon', {
        type: 'geojson',
        data: {
          type: 'Feature',
          geometry: {
            type: 'Polygon',
            coordinates: [[[-4.5, 48.0], [8.2, 48.0], [7.5, 43.5], [3.0, 42.5], [-1.8, 43.4], [-4.5, 48.0]]]
          }
        }
      });
      map.current.addLayer({ id: 'polygon-fill', type: 'fill', source: 'polygon', paint: { 'fill-color': '#3b82f6', 'fill-opacity': 0.3 } });
      map.current.addLayer({ id: 'polygon-outline', type: 'line', source: 'polygon', paint: { 'line-color': '#1d4ed8', 'line-width': 2 } });
    });
    return () => { map.current?.remove(); map.current = null; };
  }, []);

  return <div ref={mapContainer} style={{ height: '500px', width: '100%' }} />;
};

export default GeoJSONPolygon;

For more information, visit the MapMetrics GitHub repository.