Anmoldeep Singh

External demo

Installation

No MCP yet? Connect your agent.

Using the map component

Render Map inside a container with an explicit height. The map fills its parent and does not create height on its own. Compose controls, markers, popups, routes, arcs, GeoJSON layers, and clusters as children. A ref exposes the underlying MapLibre map for features that are not wrapped by mapcn.

Without theme, the component watches the document's light or dark class, data-theme, and then the system preference. Pass theme to control it directly.

The default styles use CARTO basemaps. Those tiles are governed by CARTO's separate terms, not mapcn's MIT license. Pass styles for another MapLibre-compatible provider, or use blank for a transparent tile-less canvas and add your own data layers. See the collection's runtime guide for the worker, CSP, self-hosting, and provider setup.

Agent guide

Configure map tiles and the MapLibre workerWhen: Before production, especially for commercial use, a strict Content Security Policy, or a self-hosted worker.From the collection

Configure map tiles and the MapLibre worker

mapcn's source code is MIT licensed. Its default light and dark styles request CARTO basemaps, which have separate provider terms. Upstream states that commercial use of those basemaps requires a CARTO Enterprise license. Review the provider's current terms before production use. Do not treat the component's MIT license as a tile license.

To use another provider, pass MapLibre-compatible style URLs or style objects through the styles prop. The explicit styles override blank. Use blank when the design only needs your own GeoJSON, arcs, markers, clusters, or custom layers. That creates a transparent style with no basemap tile requests.

The component configures MapLibre GL 6's module worker at runtime with MapLibreGL.setWorkerUrl, using the installed MapLibre version in an unpkg URL. Under a strict Content Security Policy, allow the actual worker and basemap origins. Upstream's minimum worker policy is:

script-src 'self' https://unpkg.com;
worker-src 'self' blob:;

To remove the unpkg runtime dependency, copy both adjacent MapLibre modules into the app's public directory:

node_modules/maplibre-gl/dist/maplibre-gl-worker.mjs
node_modules/maplibre-gl/dist/maplibre-gl-shared.mjs

Then replace the component's default worker URL with:

MapLibreGL.setWorkerUrl("/maplibre-gl-worker.mjs");

Keep the shared module beside the worker module. Add the chosen style and tile origins to the application's CSP as required by that provider.