No MCP yet? Connect your agent.
Replace visitorsByCountry, the scale stops, and the light and dark color ramps in
data.ts. Country matching uses each feature's NAME_LONG value. Keep the production
dataset keyed the same way or normalize both sides before joining them.
The block fetches a pinned Natural Earth world GeoJSON file from jsDelivr and uses
next-themes to choose concrete WebGL paint colors. Host the GeoJSON locally if needed.
The map is tile-less because it uses blank.
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.
