Leaflet Map Config Builder

Leaflet.js is the leading open-source JavaScript library for interactive maps. It's lightweight (~42KB gzipped), mobile-friendly, and works with any tile provider — OpenStreetMap, Mapbox, CartoDB, and others. Unlike Google Maps or Mapbox GL JS, Leaflet has no mandatory API key for the base library (though some tile providers require one). It's the standard choice for adding interactive maps to web apps without depending on a paid service.

OpenStreetMap is completely free with no API key — perfect for development and small production sites. CartoDB Light/Dark give a clean, minimal look for data visualization. Esri Satellite is good for geographic applications. Mapbox requires an API key but offers premium styling and vector tiles. For privacy-conscious applications, OpenStreetMap (self-hosted via tile.openstreetmap.org) is the most open choice.

The tile.openstreetmap.org tiles are free for moderate use but have a Tile Usage Policy: you must display attribution ('© OpenStreetMap contributors'), cache tiles when possible, and not use them for high-traffic commercial apps without self-hosting. For high-traffic production apps, consider running your own tile server, using a commercial provider like Stadia Maps, or switching to Mapbox/Cloudflare.

Import Leaflet and its CSS: import L from 'leaflet'; import 'leaflet/dist/leaflet.css'. Create the map inside a useEffect with an empty dependency array, and return a cleanup function: useEffect(() => { const map = L.map('map').setView([lat, lng], zoom); L.tileLayer(...).addTo(map); return () => map.remove(); }, []). The map.remove() cleanup prevents 'Map container is already initialized' errors in React strict mode.

Markers are pin icons placed at a lat/lng coordinate — great for points of interest with popup labels. Circles are drawn with a center point and radius in meters — useful for showing proximity zones (e.g. delivery radius, sensor range). Polygons define arbitrary shapes with multiple vertices — perfect for regions, districts, or boundaries. All three can have custom colors and click handlers.

This is a known Leaflet + bundler issue caused by how Leaflet resolves image URLs. Fix: import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png'; import markerIcon from 'leaflet/dist/images/marker-icon.png'; import markerShadow from 'leaflet/dist/images/marker-shadow.png'; delete L.Icon.Default.prototype._getIconUrl; L.Icon.Default.mergeOptions({ iconUrl: markerIcon, iconRetinaUrl: markerIcon2x, shadowUrl: markerShadow }); Add this once at app initialization.