MapMetrics Atlas API Docs

Appearance

Show Polygon Information on Click ​

Click on a polygon to display its properties in a popup.

Click Polygon to Show Popup ​

javascript
map.on('click', 'my-polygon-layer', (e) => {
  const properties = e.features[0].properties;

  new mapmetricsgl.Popup()
    .setLngLat(e.lngLat)
    .setHTML(`
      <h3>${properties.name}</h3>
      <p>Area: ${properties.area}</p>
      <p>Population: ${properties.population}</p>
    `)
    .addTo(map);
});

// Change cursor on hover
map.on('mouseenter', 'my-polygon-layer', () => { map.getCanvas().style.cursor = 'pointer'; });
map.on('mouseleave', 'my-polygon-layer', () => { map.getCanvas().style.cursor = ''; });

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: [5, 48], zoom: 4 });
      map.on('load', () => {
        map.addSource('regions', {
          type: 'geojson',
          data: {
            type: 'FeatureCollection',
            features: [
              { type: 'Feature', properties: { name: 'France', capital: 'Paris' }, geometry: { type: 'Polygon', coordinates: [[[-4.5,48],[8.2,48],[7.5,43.5],[3,42.5],[-1.8,43.4],[-4.5,48]]] } },
              { type: 'Feature', properties: { name: 'Germany', capital: 'Berlin' }, geometry: { type: 'Polygon', coordinates: [[[6,51],[15,51],[15,47.5],[10.5,47.5],[6,48],[6,51]]] } },
            ]
          }
        });
        map.addLayer({ id: 'regions-fill', type: 'fill', source: 'regions', paint: { 'fill-color': '#3b82f6', 'fill-opacity': 0.3 } });
        map.addLayer({ id: 'regions-outline', type: 'line', source: 'regions', paint: { 'line-color': '#1d4ed8', 'line-width': 2 } });
        map.on('click', 'regions-fill', (e) => {
          const p = e.features[0].properties;
          new mapmetricsgl.Popup().setLngLat(e.lngLat).setHTML(`<strong>${p.name}</strong><br/>Capital: ${p.capital}`).addTo(map);
        });
        map.on('mouseenter', 'regions-fill', () => { map.getCanvas().style.cursor = 'pointer'; });
        map.on('mouseleave', 'regions-fill', () => { map.getCanvas().style.cursor = ''; });
      });
    </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 regionsData = {
  type: 'FeatureCollection',
  features: [
    { type: 'Feature', properties: { name: 'France', capital: 'Paris' }, geometry: { type: 'Polygon', coordinates: [[[-4.5,48],[8.2,48],[7.5,43.5],[3,42.5],[-1.8,43.4],[-4.5,48]]] } },
    { type: 'Feature', properties: { name: 'Germany', capital: 'Berlin' }, geometry: { type: 'Polygon', coordinates: [[[6,51],[15,51],[15,47.5],[10.5,47.5],[6,48],[6,51]]] } },
  ]
};

const PolygonInfo = () => {
  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: [5, 48], zoom: 4 });
    map.current.on('load', () => {
      map.current.addSource('regions', { type: 'geojson', data: regionsData });
      map.current.addLayer({ id: 'regions-fill', type: 'fill', source: 'regions', paint: { 'fill-color': '#3b82f6', 'fill-opacity': 0.3 } });
      map.current.addLayer({ id: 'regions-outline', type: 'line', source: 'regions', paint: { 'line-color': '#1d4ed8', 'line-width': 2 } });
      map.current.on('click', 'regions-fill', (e) => {
        const p = e.features[0].properties;
        new mapmetricsgl.Popup().setLngLat(e.lngLat).setHTML(`<strong>${p.name}</strong><br/>Capital: ${p.capital}`).addTo(map.current);
      });
      map.current.on('mouseenter', 'regions-fill', () => { map.current.getCanvas().style.cursor = 'pointer'; });
      map.current.on('mouseleave', 'regions-fill', () => { map.current.getCanvas().style.cursor = ''; });
    });
    return () => { map.current?.remove(); map.current = null; };
  }, []);

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

export default PolygonInfo;

For more information, visit the MapMetrics GitHub repository.