CmMap
Use quando uma tela administrativa precisa mostrar pontos geográficos, abrir detalhes em popup ou capturar uma coordenada no cadastro. O Leaflet é carregado dinamicamente no cliente e fica isolado no entry dedicado.
Import
import "leaflet/dist/leaflet.css";
import { CmMap } from "cosmemilton-ui/map";Markers e seleção de coordenada
Pins tonais com popup React e um ponto selecionado que muda ao clicar no mapa ou arrastar o marcador.
-3.73380, -38.51440
Cor livre por marcador
color sobrepõe tone — ideal para reaproveitar a cor cadastrada em uma entidade de domínio (aqui, áreas de atuação) sem convertê-la para um tom semântico.
Meireles
Aldeota
Centro
API rápida
Props principais de cada peça exportada.
CmMap
CmMapMarker
Notas
Instale o peer opcional com `npm install leaflet` antes de usar `cosmemilton-ui/map`.
No Next, importe `leaflet/dist/leaflet.css` no layout raiz. O CSS global não deve ficar dentro de componentes de exemplo.
Sem `center`, o mapa enquadra os markers automaticamente; sem `center` e sem markers, abre no enquadramento do Brasil.
O modo picker é ativado por `value` + `onPick`; o pin selecionado também pode ser arrastado.
color no marker aceita qualquer valor CSS (hex, rgb(), var(...), nome) e sobrepõe tone — use para reaproveitar uma cor já cadastrada na entidade de domínio em vez de mapeá-la para um tom semântico.
O bundle global `window.CmUI` não inclui o CmMap, para não tornar Leaflet obrigatório para quem não usa mapa.