dominican-republic-map demos

Selección y eventos

Click, doble click, hover, selección controlada y cambios de zoom.

<dr-map show-labels selection-mode="single"
  default-selected-provinces='["DO-32"]'
  colors='{"selectedFill":"#f6b44b"}'></dr-map>

Choropleth por datos

Valores numéricos, escala de color, tooltips y dominio configurado.

<dr-map data='{"DO-01":{"value":98,"label":"98%"}}'
  color-scale="#dff3e8,#9bd8bc,#42a883,#17745f"
  value-min="20" value-max="100"></dr-map>

Marcadores y selección múltiple

Puntos en coordenadas SVG, eventos de marcador y provincias seleccionables.

<dr-map show-popup
  markers='[{"id":"sdq","x":445,"y":329,"icon":"hospital","label":"Santo Domingo","popup":"Unidad disponible"}]'
  selection-mode="multiple"></dr-map>

Iconos y popups por caso de uso

Hospitales, transporte, brigadas, escuelas, seguridad y alertas con contenido informativo.

6 iconos

— popup activo

Habilitar iconos

Hospital Pickup / brigada Personas Escuela Seguridad Alerta

Popup log

const enabled = new Set(["hospital", "pickup"]);
map.setAttribute(
  "markers",
  JSON.stringify(markers.filter((marker) => enabled.has(marker.icon)))
);

<dr-map show-popup
  data='{"DO-01":{"selectedFill":"#be123c","popup":"Sede administrativa"}}'
  markers='[
    {"id":"hospital","x":445,"y":329,"icon":"hospital","popup":"Unidad medica"},
    {"id":"pickup","x":238,"y":136,"icon":"pickup","popup":"Brigada en campo"}
  ]'></dr-map>

Theming, estados y color por provincia

Paleta global, excepciones por provincia, estados selected/hover y estilos por región.

<dr-map
  colors='{"defaultFill":"#e9eef3","selectedFill":"#b86b16"}'
  data='{"DO-01":{"fill":"#eef2ff","hoverFill":"#c7d2fe","selectedFill":"#be123c"}}'></dr-map>

document.querySelector("dr-map").mapProps = {
  getProvinceStyle: (province) =>
    province.region === "Cibao Norte" ? { fill: "#205a86" } : undefined
};