Leaflet Map Components

This project exposes a customizable Leaflet map wrapper built with React. It supports grouping locations by city, synchronizing selection state with parent apps, and rendering fully custom marker popups.

Theme mode

Consumers can switch between light and dark UI treatments (including the underlying Leaflet tiles) by passing a themeMode prop to LeafletMap.

<LeafletMap
  locations={locations}
  setLocations={setLocations}
  themeMode="dark" // or "light"
/>

The currently supported values are "light" (default) and "dark". The prop updates button, popup, marker chrome, and, unless you override it, swaps between OpenStreetMap standard tiles and CARTO Dark Matter so you can preview the full light/dark experience out of the box.

Tile presets

If you would like to try a specific public tile set (instead of the automatic theme-based default), pass the tilePreset prop. Accepted values today:

• osmStandard – OpenStreetMap Standard (light)
• osmHOT – OSM Humanitarian (light)
• osmFrance – OSM France (light)
• osmDE – OSM Deutschland (light)
• openTopoMap – OpenTopoMap (light)
• cartoPositron – CARTO Positron (light)
• cartoVoyager – CARTO Voyager (light)
• cartoDarkMatter – CARTO Dark Matter (dark)
• stamenTonerLite – Stamen Toner Lite (light)
• stamenToner – Stamen Toner (dark)
• stamenTonerBackground – Stamen Toner Background (dark)
• stamenWatercolor – Stamen Watercolor (light)
• stamenTerrain – Stamen Terrain (light)
• osmBW – Wikimedia Black & White (dark)

Each preset in the component already includes the correct attribution string, but please ensure your usage complies with the originating provider’s terms.