Components / Map components
mapcn
Put map interactions inside a React product.
Understand the resource
What it is.
mapcn provides React map components built on MapLibre and styled with Tailwind. Its examples offer a concrete way to explore location interfaces while separating the UI layer from map data and tile services.
When it is useful
A product needs locations, routes or place selection alongside ordinary application controls.
A proposed application
Put it to work.
This example illustrates a possible use. The proposed workflow and expected result are separate from the bounded checks recorded below.
Try this
Display synthetic service locations and provide a synchronized text list for people who cannot use the map.
Result to aim for
A location interface with a non-map route to the same information.
Before you start
What you need.
- React, MapLibre-compatible setup and an appropriate map-data/tile provider.
The practical boundaries
What to watch for.
- Tile requests and location queries may expose usage or location data to providers.
- Map data attribution, provider quotas and keyboard alternatives need separate review; no map runtime or network behavior was tested.
Review record
What we could establish.
- Public primary documentation and the bounded account-free checks below were reviewed. The basic-map sample exposed a tabindex=0 canvas that retained focus after ArrowRight. Camera movement was not verified, so this is an input-affordance check rather than a complete map test.
The source-review notes describe documentation and identity. The account-free evaluation below records exactly which public interaction or local fixture was checked, what happened, and what remains untested.
Check current access, terms, licensing and data handling before using a resource with your own material.
Runtime and security evaluation
What the evaluation covers.
The basic-map sample exposed a tabindex=0 canvas that retained focus after ArrowRight. Camera movement was not verified, so this is an input-affordance check rather than a complete map test.
Methods: Public HTTP response · Public browser sample. A completed check covers the stated sample; it is not a safety certification.
- Target
- https://www.mapcn.dev/docs/basic-map
- Version or capture
- Unversioned public page checked 2026-10-19
- Integrity scope
- sha256:93d5e6380763cc55a893d7f7a57ddad8a518b4123dd22ca1baa511c2d9dd6abb
Test conditions
- Chromium 155.0.8059.82 on Windows; fresh temporary profile and fresh account-free contexts.
- Public HTTPS GET/HEAD requests only; telemetry/auth routes and WebSockets blocked. No account storage or credential environment variables.
Individual checks and observations
Public document and DOM
passPublic browser sample: Fresh Chromium GET, then inspect rendered controls after hydration delay
Observed: HTTP 200; 4 captured button labels; 0 inputs; 0 canvases.
Map canvas and keyboard affordance
passPublic browser sample: Inspect loaded map canvas, then focus it and press ArrowRight
Observed: Map canvas tabindex=0, retained focus after ArrowRight=true. Camera movement not verified; public tile hosts recorded separately.
Security findings and boundaries
Passive inspection of the public response headers, requested hosts and the named browser sample. No active exploitation, authenticated permissions test or complete security audit.
Observed · caution
Map delivery depends on external data providers
The public sample fetched map assets from provider hosts recorded in the evidence. Tiles, styles and map services need their own terms, availability and privacy review.
Practical caveats
- Provide a non-map route to essential location information and review the exact tile provider before production use.
- Pin and recheck the selected version or sample before adoption; the observations apply only to the scope and date shown.
What remains untested
- No geolocation permission, private coordinates, routing request, measured camera change, local install or offline fallback.
- Fresh-browser restrictions can affect external assets and hydration. Initial failed selectors and limited probes remain in the evidence; they are not blanket product failures.
Security limits
- No authenticated workspace, private content, production backend permissions or data-retention verification.
- No geolocation permission, private coordinates, routing request, measured camera change, local install or offline fallback.
Evaluation sources
Follow the evidence
Sources and further reading.
Keep exploring