MapMetrics Atlas API Docs

Appearance

Change a Layer's Color with Buttons ​

Use setPaintProperty() to update a layer's color dynamically without reloading the map.

setPaintProperty ​

javascript
// Change fill color
map.setPaintProperty('my-layer', 'fill-color', '#ef4444');

// Change line color and width
map.setPaintProperty('my-line-layer', 'line-color', '#22c55e');
map.setPaintProperty('my-line-layer', 'line-width', 5);

// Change circle radius and color
map.setPaintProperty('my-circle-layer', 'circle-color', '#8b5cf6');
map.setPaintProperty('my-circle-layer', 'circle-radius', 15);

// Change opacity
map.setPaintProperty('my-layer', 'fill-opacity', 0.8);

setLayoutProperty ​

For layout properties (visibility, text, icon):

javascript
// Toggle layer visibility
map.setLayoutProperty('my-layer', 'visibility', 'none');    // hide
map.setLayoutProperty('my-layer', 'visibility', 'visible'); // show

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 style="margin-bottom:8px;">
      <button onclick="setColor('#3b82f6')">Blue</button>
      <button onclick="setColor('#ef4444')">Red</button>
      <button onclick="setColor('#22c55e')">Green</button>
    </div>
    <div id="map"></div>
    <script>
      const map = new mapmetricsgl.Map({ container: 'map', style: '<StyleFile_URL_with_Token>', center: [2.35, 48.85], zoom: 4 });
      map.on('load', () => {
        map.addSource('polygon', { type: 'geojson', data: { type: 'Feature', geometry: { type: 'Polygon', coordinates: [[[-4.5,48],[8.2,48],[7.5,43.5],[3,42.5],[-1.8,43.4],[-4.5,48]]] } } });
        map.addLayer({ id: 'polygon-fill', type: 'fill', source: 'polygon', paint: { 'fill-color': '#3b82f6', 'fill-opacity': 0.5 } });
      });
      function setColor(color) {
        map.setPaintProperty('polygon-fill', 'fill-color', color);
      }
    </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 colors = ['#3b82f6', '#ef4444', '#22c55e', '#8b5cf6', '#f59e0b'];

const ChangeLayerColor = () => {
  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.35, 48.85], zoom: 4 });
    map.current.on('load', () => {
      map.current.addSource('polygon', { type: 'geojson', data: { type: 'Feature', geometry: { type: 'Polygon', coordinates: [[[-4.5,48],[8.2,48],[7.5,43.5],[3,42.5],[-1.8,43.4],[-4.5,48]]] } } });
      map.current.addLayer({ id: 'polygon-fill', type: 'fill', source: 'polygon', paint: { 'fill-color': '#3b82f6', 'fill-opacity': 0.5 } });
    });
    return () => { map.current?.remove(); map.current = null; };
  }, []);

  const setColor = (color) => {
    map.current?.setPaintProperty('polygon-fill', 'fill-color', color);
  };

  return (
    <div>
      <div style={{ display: 'flex', gap: '8px', marginBottom: '8px' }}>
        {colors.map(c => (
          <button key={c} onClick={() => setColor(c)} style={{ padding: '8px 16px', background: c, color: 'white', border: 'none', borderRadius: '6px', cursor: 'pointer' }}>
            {c}
          </button>
        ))}
      </div>
      <div ref={mapContainer} style={{ height: '500px', width: '100%' }} />
    </div>
  );
};

export default ChangeLayerColor;

For more information, visit the MapMetrics GitHub repository.