MapMetrics Atlas API Docs

Appearance

Draw GeoJSON Points ​

Render multiple points from a GeoJSON FeatureCollection using a circle layer — efficient for large datasets.

GeoJSON Points vs Markers ​

GeoJSON + Circle LayerMarker
PerformanceExcellent (WebGL rendered)Good (DOM elements)
Best forHundreds/thousands of pointsFew points with rich HTML
ClusteringBuilt-in supportManual
Custom HTMLNoYes

Draw Points from GeoJSON ​

javascript
map.addSource('points', {
  type: 'geojson',
  data: {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        properties: { name: 'Paris' },
        geometry: { type: 'Point', coordinates: [2.35, 48.85] }
      },
      {
        type: 'Feature',
        properties: { name: 'London' },
        geometry: { type: 'Point', coordinates: [-0.12, 51.50] }
      }
    ]
  }
});

map.addLayer({
  id: 'points-layer',
  type: 'circle',
  source: 'points',
  paint: {
    'circle-radius': 8,
    'circle-color': '#3b82f6',
    'circle-stroke-width': 2,
    'circle-stroke-color': '#fff'
  }
});

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: [10, 50],
        zoom: 3
      });
      map.on('load', () => {
        map.addSource('points', {
          type: 'geojson',
          data: {
            type: 'FeatureCollection',
            features: [
              { type: 'Feature', properties: { name: 'Paris' }, geometry: { type: 'Point', coordinates: [2.349902, 48.852966] } },
              { type: 'Feature', properties: { name: 'London' }, geometry: { type: 'Point', coordinates: [-0.1276, 51.5074] } },
              { type: 'Feature', properties: { name: 'Berlin' }, geometry: { type: 'Point', coordinates: [13.405, 52.52] } },
            ]
          }
        });
        map.addLayer({
          id: 'points-layer',
          type: 'circle',
          source: 'points',
          paint: { 'circle-radius': 8, 'circle-color': '#3b82f6', 'circle-stroke-width': 2, 'circle-stroke-color': '#fff' }
        });
        map.on('click', 'points-layer', (e) => {
          new mapmetricsgl.Popup().setLngLat(e.lngLat).setHTML(`<strong>${e.features[0].properties.name}</strong>`).addTo(map);
        });
      });
    </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 pointsData = {
  type: 'FeatureCollection',
  features: [
    { type: 'Feature', properties: { name: 'Paris' }, geometry: { type: 'Point', coordinates: [2.349902, 48.852966] } },
    { type: 'Feature', properties: { name: 'London' }, geometry: { type: 'Point', coordinates: [-0.1276, 51.5074] } },
    { type: 'Feature', properties: { name: 'Berlin' }, geometry: { type: 'Point', coordinates: [13.405, 52.52] } },
  ]
};

const GeoJSONPoints = () => {
  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: [10, 50],
      zoom: 3
    });
    map.current.on('load', () => {
      map.current.addSource('points', { type: 'geojson', data: pointsData });
      map.current.addLayer({
        id: 'points-layer',
        type: 'circle',
        source: 'points',
        paint: { 'circle-radius': 8, 'circle-color': '#3b82f6', 'circle-stroke-width': 2, 'circle-stroke-color': '#fff' }
      });
    });
    return () => { map.current?.remove(); map.current = null; };
  }, []);

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

export default GeoJSONPoints;

For more information, visit the MapMetrics GitHub repository.