@mounaji_npm/geo-map 0.1.0

package/dist/mounajigeomap.es.js

@@ -0,0 +1,100 @@
+"use client";
+import { jsx as j } from "react/jsx-runtime";
+import { useRef as s, useEffect as m } from "react";
+import f from "maplibre-gl";
+const M = {
+  version: 8,
+  sources: {
+    osm: {
+      type: "raster",
+      tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"],
+      tileSize: 256,
+      attribution: "© OpenStreetMap contributors"
+    }
+  },
+  layers: [{ id: "osm", type: "raster", source: "osm" }]
+}, O = {
+  con_dueno: "#16a34a",
+  callejero: "#ea580c",
+  sin_verificar: "#6b7280"
+};
+function R(r, c) {
+  if (r) {
+    const n = (c == null ? void 0 : c[r]) ?? O[r];
+    if (n) return n;
+  }
+  return "#6b7280";
+}
+function E({
+  centro: r,
+  zoom: c = 14,
+  pins: n = [],
+  zonas: o = [],
+  onTap: i,
+  seleccionado: l = null,
+  alto: w = "70vh",
+  estilo: S = M,
+  coloresEstado: b
+}) {
+  const g = s(null), a = s(null), d = s(!1), L = s([]), y = s(null), p = s(i);
+  return p.current = i, m(() => {
+    if (!g.current || a.current) return;
+    const e = new f.Map({
+      container: g.current,
+      style: S,
+      center: r,
+      zoom: c,
+      attributionControl: { compact: !0 }
+    });
+    return e.addControl(new f.NavigationControl({ showCompass: !1 })), e.on("load", () => {
+      d.current = !0, h(e, o);
+    }), e.on("click", (t) => {
+      var u;
+      (u = p.current) == null || u.call(p, { lng: t.lngLat.lng, lat: t.lngLat.lat });
+    }), a.current = e, () => {
+      e.remove(), a.current = null, d.current = !1;
+    };
+  }, []), m(() => {
+    const e = a.current;
+    e && (L.current.forEach((t) => t.remove()), L.current = n.map((t) => {
+      const u = new f.Marker({
+        color: t.color ?? R(t.estado, b)
+      }).setLngLat([t.lng, t.lat]);
+      return t.label && u.setPopup(new f.Popup({ offset: 24 }).setText(t.label)), u.addTo(e), u;
+    }));
+  }, [n, b]), m(() => {
+    const e = a.current;
+    !e || !d.current || h(e, o);
+  }, [o]), m(() => {
+    var t;
+    const e = a.current;
+    e && ((t = y.current) == null || t.remove(), y.current = null, l && (y.current = new f.Marker({ color: "#2563eb", scale: 1.2 }).setLngLat([l.lng, l.lat]).addTo(e)));
+  }, [l]), /* @__PURE__ */ j("div", { ref: g, style: { width: "100%", height: w } });
+}
+function h(r, c) {
+  for (const n of c) {
+    const o = `mn-zona-${n.id}`, i = n.geojson.type === "Feature" ? n.geojson : { type: "Feature", geometry: n.geojson, properties: {} }, l = r.getSource(o);
+    if (l) {
+      l.setData(i);
+      continue;
+    }
+    r.addSource(o, { type: "geojson", data: i }), r.addLayer({
+      id: `${o}-fill`,
+      type: "fill",
+      source: o,
+      paint: { "fill-color": "#2563eb", "fill-opacity": 0.08 }
+    }), r.addLayer({
+      id: `${o}-line`,
+      type: "line",
+      source: o,
+      paint: { "line-color": "#2563eb", "line-width": 2, "line-dasharray": [2, 1] }
+    });
+  }
+}
+export {
+  O as COLORES_ESTADO,
+  M as ESTILO_OSM,
+  E as GeoMap,
+  R as colorPorEstado
+};
+//# sourceMappingURL=mounajigeomap.es.js.map

package/dist/mounajigeomap.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mounajigeomap.es.js","sources":["../src/estilo.ts","../src/GeoMap.tsx"],"sourcesContent":["import type { StyleSpecification } from 'maplibre-gl';\n\n/**\n * Estilo raster OSM sin API key. Para un pueblo alcanza y sobra; si un día\n * hace falta otro proveedor (Google, vector tiles), se cambia ACÁ y ninguna\n * app se entera — ese aislamiento es la razón de ser del paquete.\n * Tile usage policy de OSM: https://operations.osmfoundation.org/policies/tiles/\n */\nexport const ESTILO_OSM: StyleSpecification = {\n  version: 8,\n  sources: {\n    osm: {\n      type: 'raster',\n      tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],\n      tileSize: 256,\n      attribution: '© OpenStreetMap contributors',\n    },\n  },\n  layers: [{ id: 'osm', type: 'raster', source: 'osm' }],\n};\n\n/** Colores default por estado de pin; la app puede pasar `color` por pin. */\nexport const COLORES_ESTADO: Record<string, string> = {\n  con_dueno: '#16a34a',\n  callejero: '#ea580c',\n  sin_verificar: '#6b7280',\n};\n\nexport function colorPorEstado(estado: string | undefined, overrides?: Record<string, string>): string {\n  if (estado) {\n    const color = overrides?.[estado] ?? COLORES_ESTADO[estado];\n    if (color) return color;\n  }\n  return '#6b7280';\n}\n","import { useEffect, useRef } from 'react';\nimport maplibregl from 'maplibre-gl';\nimport type { Map as MlMap, StyleSpecification } from 'maplibre-gl';\nimport { ESTILO_OSM, colorPorEstado } from './estilo';\n\nexport interface GeoPin {\n  id: string;\n  lng: number;\n  lat: number;\n  /** Clave de estado (colorea vía colorPorEstado) o ignorada si viene `color`. */\n  estado?: string;\n  color?: string;\n  /** Texto del popup al tocar el pin. */\n  label?: string;\n}\n\nexport interface GeoZona {\n  id: string;\n  nombre?: string;\n  /** Geometría o Feature GeoJSON del polígono. */\n  geojson: GeoJSON.Geometry | GeoJSON.Feature;\n}\n\nexport interface GeoMapProps {\n  centro: [lng: number, lat: number];\n  zoom?: number;\n  pins?: GeoPin[];\n  zonas?: GeoZona[];\n  /** Tap/click en el mapa (fuera de un pin). */\n  onTap?: (punto: { lng: number; lat: number }) => void;\n  /** Punto seleccionado — se muestra como marker destacado. */\n  seleccionado?: { lng: number; lat: number } | null;\n  alto?: string;\n  estilo?: StyleSpecification | string;\n  coloresEstado?: Record<string, string>;\n}\n\nexport function GeoMap({\n  centro,\n  zoom = 14,\n  pins = [],\n  zonas = [],\n  onTap,\n  seleccionado = null,\n  alto = '70vh',\n  estilo = ESTILO_OSM,\n  coloresEstado,\n}: GeoMapProps) {\n  const contenedorRef = useRef<HTMLDivElement | null>(null);\n  const mapRef = useRef<MlMap | null>(null);\n  const cargadoRef = useRef(false);\n  const markersRef = useRef<maplibregl.Marker[]>([]);\n  const seleccionadoRef = useRef<maplibregl.Marker | null>(null);\n  const onTapRef = useRef(onTap);\n  onTapRef.current = onTap;\n\n  // Crear el mapa una sola vez.\n  useEffect(() => {\n    if (!contenedorRef.current || mapRef.current) return;\n    const map = new maplibregl.Map({\n      container: contenedorRef.current,\n      style: estilo,\n      center: centro,\n      zoom,\n      attributionControl: { compact: true },\n    });\n    map.addControl(new maplibregl.NavigationControl({ showCompass: false }));\n    map.on('load', () => {\n      cargadoRef.current = true;\n      pintarZonas(map, zonas);\n    });\n    map.on('click', (e) => {\n      onTapRef.current?.({ lng: e.lngLat.lng, lat: e.lngLat.lat });\n    });\n    mapRef.current = map;\n    return () => {\n      map.remove();\n      mapRef.current = null;\n      cargadoRef.current = false;\n    };\n    // El mapa no se recrea por cambios de centro/zoom: son solo el encuadre inicial.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // Pins: pocos cientos en un censo de pueblo — rehacer markers es más simple\n  // y suficiente que diffear.\n  useEffect(() => {\n    const map = mapRef.current;\n    if (!map) return;\n    markersRef.current.forEach((m) => m.remove());\n    markersRef.current = pins.map((pin) => {\n      const marker = new maplibregl.Marker({\n        color: pin.color ?? colorPorEstado(pin.estado, coloresEstado),\n      }).setLngLat([pin.lng, pin.lat]);\n      if (pin.label) marker.setPopup(new maplibregl.Popup({ offset: 24 }).setText(pin.label));\n      marker.addTo(map);\n      return marker;\n    });\n  }, [pins, coloresEstado]);\n\n  // Zonas (si cambian después del load).\n  useEffect(() => {\n    const map = mapRef.current;\n    if (!map || !cargadoRef.current) return;\n    pintarZonas(map, zonas);\n  }, [zonas]);\n\n  // Marker de selección.\n  useEffect(() => {\n    const map = mapRef.current;\n    if (!map) return;\n    seleccionadoRef.current?.remove();\n    seleccionadoRef.current = null;\n    if (seleccionado) {\n      seleccionadoRef.current = new maplibregl.Marker({ color: '#2563eb', scale: 1.2 })\n        .setLngLat([seleccionado.lng, seleccionado.lat])\n        .addTo(map);\n    }\n  }, [seleccionado]);\n\n  return <div ref={contenedorRef} style={{ width: '100%', height: alto }} />;\n}\n\nfunction pintarZonas(map: MlMap, zonas: GeoZona[]) {\n  for (const zona of zonas) {\n    const sourceId = `mn-zona-${zona.id}`;\n    const data: GeoJSON.Feature =\n      zona.geojson.type === 'Feature'\n        ? zona.geojson\n        : { type: 'Feature', geometry: zona.geojson as GeoJSON.Geometry, properties: {} };\n\n    const existente = map.getSource(sourceId) as maplibregl.GeoJSONSource | undefined;\n    if (existente) {\n      existente.setData(data);\n      continue;\n    }\n    map.addSource(sourceId, { type: 'geojson', data });\n    map.addLayer({\n      id: `${sourceId}-fill`,\n      type: 'fill',\n      source: sourceId,\n      paint: { 'fill-color': '#2563eb', 'fill-opacity': 0.08 },\n    });\n    map.addLayer({\n      id: `${sourceId}-line`,\n      type: 'line',\n      source: sourceId,\n      paint: { 'line-color': '#2563eb', 'line-width': 2, 'line-dasharray': [2, 1] },\n    });\n  }\n}\n"],"names":["ESTILO_OSM","COLORES_ESTADO","colorPorEstado","estado","overrides","color","GeoMap","centro","zoom","pins","zonas","onTap","seleccionado","alto","estilo","coloresEstado","contenedorRef","useRef","mapRef","cargadoRef","markersRef","seleccionadoRef","onTapRef","useEffect","map","maplibregl","pintarZonas","e","_a","m","pin","marker","jsx","zona","sourceId","data","existente"],"mappings":"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"}

package/dist/mounajigeomap.umd.cjs

@@ -0,0 +1,2 @@
+(function(n,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("react/jsx-runtime"),require("react"),require("maplibre-gl")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","maplibre-gl"],f):(n=typeof globalThis<"u"?globalThis:n||self,f(n.MounajiGeoMap={},n.jsxRuntime,n.React,n.maplibregl))})(this,(function(n,f,r,d){"use strict";const S={version:8,sources:{osm:{type:"raster",tiles:["https://tile.openstreetmap.org/{z}/{x}/{y}.png"],tileSize:256,attribution:"© OpenStreetMap contributors"}},layers:[{id:"osm",type:"raster",source:"osm"}]},h={con_dueno:"#16a34a",callejero:"#ea580c",sin_verificar:"#6b7280"};function j(o,s){if(o){const u=(s==null?void 0:s[o])??h[o];if(u)return u}return"#6b7280"}function M({centro:o,zoom:s=14,pins:u=[],zonas:c=[],onTap:p,seleccionado:i=null,alto:b="70vh",estilo:w=S,coloresEstado:L}){const y=r.useRef(null),a=r.useRef(null),g=r.useRef(!1),O=r.useRef([]),R=r.useRef(null),m=r.useRef(p);return m.current=p,r.useEffect(()=>{if(!y.current||a.current)return;const e=new d.Map({container:y.current,style:w,center:o,zoom:s,attributionControl:{compact:!0}});return e.addControl(new d.NavigationControl({showCompass:!1})),e.on("load",()=>{g.current=!0,E(e,c)}),e.on("click",t=>{var l;(l=m.current)==null||l.call(m,{lng:t.lngLat.lng,lat:t.lngLat.lat})}),a.current=e,()=>{e.remove(),a.current=null,g.current=!1}},[]),r.useEffect(()=>{const e=a.current;e&&(O.current.forEach(t=>t.remove()),O.current=u.map(t=>{const l=new d.Marker({color:t.color??j(t.estado,L)}).setLngLat([t.lng,t.lat]);return t.label&&l.setPopup(new d.Popup({offset:24}).setText(t.label)),l.addTo(e),l}))},[u,L]),r.useEffect(()=>{const e=a.current;!e||!g.current||E(e,c)},[c]),r.useEffect(()=>{var t;const e=a.current;e&&((t=R.current)==null||t.remove(),R.current=null,i&&(R.current=new d.Marker({color:"#2563eb",scale:1.2}).setLngLat([i.lng,i.lat]).addTo(e)))},[i]),f.jsx("div",{ref:y,style:{width:"100%",height:b}})}function E(o,s){for(const u of s){const c=`mn-zona-${u.id}`,p=u.geojson.type==="Feature"?u.geojson:{type:"Feature",geometry:u.geojson,properties:{}},i=o.getSource(c);if(i){i.setData(p);continue}o.addSource(c,{type:"geojson",data:p}),o.addLayer({id:`${c}-fill`,type:"fill",source:c,paint:{"fill-color":"#2563eb","fill-opacity":.08}}),o.addLayer({id:`${c}-line`,type:"line",source:c,paint:{"line-color":"#2563eb","line-width":2,"line-dasharray":[2,1]}})}}n.COLORES_ESTADO=h,n.ESTILO_OSM=S,n.GeoMap=M,n.colorPorEstado=j,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));
+//# sourceMappingURL=mounajigeomap.umd.cjs.map

package/dist/mounajigeomap.umd.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mounajigeomap.umd.cjs","sources":["../src/estilo.ts","../src/GeoMap.tsx"],"sourcesContent":["import type { StyleSpecification } from 'maplibre-gl';\n\n/**\n * Estilo raster OSM sin API key. Para un pueblo alcanza y sobra; si un día\n * hace falta otro proveedor (Google, vector tiles), se cambia ACÁ y ninguna\n * app se entera — ese aislamiento es la razón de ser del paquete.\n * Tile usage policy de OSM: https://operations.osmfoundation.org/policies/tiles/\n */\nexport const ESTILO_OSM: StyleSpecification = {\n  version: 8,\n  sources: {\n    osm: {\n      type: 'raster',\n      tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],\n      tileSize: 256,\n      attribution: '© OpenStreetMap contributors',\n    },\n  },\n  layers: [{ id: 'osm', type: 'raster', source: 'osm' }],\n};\n\n/** Colores default por estado de pin; la app puede pasar `color` por pin. */\nexport const COLORES_ESTADO: Record<string, string> = {\n  con_dueno: '#16a34a',\n  callejero: '#ea580c',\n  sin_verificar: '#6b7280',\n};\n\nexport function colorPorEstado(estado: string | undefined, overrides?: Record<string, string>): string {\n  if (estado) {\n    const color = overrides?.[estado] ?? COLORES_ESTADO[estado];\n    if (color) return color;\n  }\n  return '#6b7280';\n}\n","import { useEffect, useRef } from 'react';\nimport maplibregl from 'maplibre-gl';\nimport type { Map as MlMap, StyleSpecification } from 'maplibre-gl';\nimport { ESTILO_OSM, colorPorEstado } from './estilo';\n\nexport interface GeoPin {\n  id: string;\n  lng: number;\n  lat: number;\n  /** Clave de estado (colorea vía colorPorEstado) o ignorada si viene `color`. */\n  estado?: string;\n  color?: string;\n  /** Texto del popup al tocar el pin. */\n  label?: string;\n}\n\nexport interface GeoZona {\n  id: string;\n  nombre?: string;\n  /** Geometría o Feature GeoJSON del polígono. */\n  geojson: GeoJSON.Geometry | GeoJSON.Feature;\n}\n\nexport interface GeoMapProps {\n  centro: [lng: number, lat: number];\n  zoom?: number;\n  pins?: GeoPin[];\n  zonas?: GeoZona[];\n  /** Tap/click en el mapa (fuera de un pin). */\n  onTap?: (punto: { lng: number; lat: number }) => void;\n  /** Punto seleccionado — se muestra como marker destacado. */\n  seleccionado?: { lng: number; lat: number } | null;\n  alto?: string;\n  estilo?: StyleSpecification | string;\n  coloresEstado?: Record<string, string>;\n}\n\nexport function GeoMap({\n  centro,\n  zoom = 14,\n  pins = [],\n  zonas = [],\n  onTap,\n  seleccionado = null,\n  alto = '70vh',\n  estilo = ESTILO_OSM,\n  coloresEstado,\n}: GeoMapProps) {\n  const contenedorRef = useRef<HTMLDivElement | null>(null);\n  const mapRef = useRef<MlMap | null>(null);\n  const cargadoRef = useRef(false);\n  const markersRef = useRef<maplibregl.Marker[]>([]);\n  const seleccionadoRef = useRef<maplibregl.Marker | null>(null);\n  const onTapRef = useRef(onTap);\n  onTapRef.current = onTap;\n\n  // Crear el mapa una sola vez.\n  useEffect(() => {\n    if (!contenedorRef.current || mapRef.current) return;\n    const map = new maplibregl.Map({\n      container: contenedorRef.current,\n      style: estilo,\n      center: centro,\n      zoom,\n      attributionControl: { compact: true },\n    });\n    map.addControl(new maplibregl.NavigationControl({ showCompass: false }));\n    map.on('load', () => {\n      cargadoRef.current = true;\n      pintarZonas(map, zonas);\n    });\n    map.on('click', (e) => {\n      onTapRef.current?.({ lng: e.lngLat.lng, lat: e.lngLat.lat });\n    });\n    mapRef.current = map;\n    return () => {\n      map.remove();\n      mapRef.current = null;\n      cargadoRef.current = false;\n    };\n    // El mapa no se recrea por cambios de centro/zoom: son solo el encuadre inicial.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // Pins: pocos cientos en un censo de pueblo — rehacer markers es más simple\n  // y suficiente que diffear.\n  useEffect(() => {\n    const map = mapRef.current;\n    if (!map) return;\n    markersRef.current.forEach((m) => m.remove());\n    markersRef.current = pins.map((pin) => {\n      const marker = new maplibregl.Marker({\n        color: pin.color ?? colorPorEstado(pin.estado, coloresEstado),\n      }).setLngLat([pin.lng, pin.lat]);\n      if (pin.label) marker.setPopup(new maplibregl.Popup({ offset: 24 }).setText(pin.label));\n      marker.addTo(map);\n      return marker;\n    });\n  }, [pins, coloresEstado]);\n\n  // Zonas (si cambian después del load).\n  useEffect(() => {\n    const map = mapRef.current;\n    if (!map || !cargadoRef.current) return;\n    pintarZonas(map, zonas);\n  }, [zonas]);\n\n  // Marker de selección.\n  useEffect(() => {\n    const map = mapRef.current;\n    if (!map) return;\n    seleccionadoRef.current?.remove();\n    seleccionadoRef.current = null;\n    if (seleccionado) {\n      seleccionadoRef.current = new maplibregl.Marker({ color: '#2563eb', scale: 1.2 })\n        .setLngLat([seleccionado.lng, seleccionado.lat])\n        .addTo(map);\n    }\n  }, [seleccionado]);\n\n  return <div ref={contenedorRef} style={{ width: '100%', height: alto }} />;\n}\n\nfunction pintarZonas(map: MlMap, zonas: GeoZona[]) {\n  for (const zona of zonas) {\n    const sourceId = `mn-zona-${zona.id}`;\n    const data: GeoJSON.Feature =\n      zona.geojson.type === 'Feature'\n        ? zona.geojson\n        : { type: 'Feature', geometry: zona.geojson as GeoJSON.Geometry, properties: {} };\n\n    const existente = map.getSource(sourceId) as maplibregl.GeoJSONSource | undefined;\n    if (existente) {\n      existente.setData(data);\n      continue;\n    }\n    map.addSource(sourceId, { type: 'geojson', data });\n    map.addLayer({\n      id: `${sourceId}-fill`,\n      type: 'fill',\n      source: sourceId,\n      paint: { 'fill-color': '#2563eb', 'fill-opacity': 0.08 },\n    });\n    map.addLayer({\n      id: `${sourceId}-line`,\n      type: 'line',\n      source: sourceId,\n      paint: { 'line-color': '#2563eb', 'line-width': 2, 'line-dasharray': [2, 1] },\n    });\n  }\n}\n"],"names":["ESTILO_OSM","COLORES_ESTADO","colorPorEstado","estado","overrides","color","GeoMap","centro","zoom","pins","zonas","onTap","seleccionado","alto","estilo","coloresEstado","contenedorRef","useRef","mapRef","cargadoRef","markersRef","seleccionadoRef","onTapRef","useEffect","map","maplibregl","pintarZonas","e","_a","m","pin","marker","jsx","zona","sourceId","data","existente"],"mappings":"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"}

package/dist/types/GeoMap.d.ts

@@ -0,0 +1,38 @@
+import type { StyleSpecification } from 'maplibre-gl';
+export interface GeoPin {
+    id: string;
+    lng: number;
+    lat: number;
+    /** Clave de estado (colorea vía colorPorEstado) o ignorada si viene `color`. */
+    estado?: string;
+    color?: string;
+    /** Texto del popup al tocar el pin. */
+    label?: string;
+}
+export interface GeoZona {
+    id: string;
+    nombre?: string;
+    /** Geometría o Feature GeoJSON del polígono. */
+    geojson: GeoJSON.Geometry | GeoJSON.Feature;
+}
+export interface GeoMapProps {
+    centro: [lng: number, lat: number];
+    zoom?: number;
+    pins?: GeoPin[];
+    zonas?: GeoZona[];
+    /** Tap/click en el mapa (fuera de un pin). */
+    onTap?: (punto: {
+        lng: number;
+        lat: number;
+    }) => void;
+    /** Punto seleccionado — se muestra como marker destacado. */
+    seleccionado?: {
+        lng: number;
+        lat: number;
+    } | null;
+    alto?: string;
+    estilo?: StyleSpecification | string;
+    coloresEstado?: Record<string, string>;
+}
+export declare function GeoMap({ centro, zoom, pins, zonas, onTap, seleccionado, alto, estilo, coloresEstado, }: GeoMapProps): import("react").JSX.Element;
+//# sourceMappingURL=GeoMap.d.ts.map

package/dist/types/GeoMap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GeoMap.d.ts","sourceRoot":"","sources":["../../src/GeoMap.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAgB,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGpE,MAAM,WAAW,MAAM;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,gFAAgF;IAChF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,OAAO,EAAE,OAAO,CAAC,QAAQ,GAAG,OAAO,CAAC,OAAO,CAAC;CAC7C;AAED,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,CAAC,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;IAClB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACtD,6DAA6D;IAC7D,YAAY,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,kBAAkB,GAAG,MAAM,CAAC;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACxC;AAED,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,IAAS,EACT,IAAS,EACT,KAAU,EACV,KAAK,EACL,YAAmB,EACnB,IAAa,EACb,MAAmB,EACnB,aAAa,GACd,EAAE,WAAW,+BA0Eb"}

package/dist/types/estilo.d.ts

@@ -0,0 +1,12 @@
+import type { StyleSpecification } from 'maplibre-gl';
+/**
+ * Estilo raster OSM sin API key. Para un pueblo alcanza y sobra; si un día
+ * hace falta otro proveedor (Google, vector tiles), se cambia ACÁ y ninguna
+ * app se entera — ese aislamiento es la razón de ser del paquete.
+ * Tile usage policy de OSM: https://operations.osmfoundation.org/policies/tiles/
+ */
+export declare const ESTILO_OSM: StyleSpecification;
+/** Colores default por estado de pin; la app puede pasar `color` por pin. */
+export declare const COLORES_ESTADO: Record<string, string>;
+export declare function colorPorEstado(estado: string | undefined, overrides?: Record<string, string>): string;
+//# sourceMappingURL=estilo.d.ts.map

package/dist/types/estilo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"estilo.d.ts","sourceRoot":"","sources":["../../src/estilo.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEtD;;;;;GAKG;AACH,eAAO,MAAM,UAAU,EAAE,kBAWxB,CAAC;AAEF,6EAA6E;AAC7E,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAIjD,CAAC;AAEF,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,EAAE,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAMrG"}

package/dist/types/index.d.ts

@@ -0,0 +1,4 @@
+export { GeoMap } from './GeoMap';
+export type { GeoMapProps, GeoPin, GeoZona } from './GeoMap';
+export { ESTILO_OSM, COLORES_ESTADO, colorPorEstado } from './estilo';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC"}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@mounaji_npm/geo-map",
+  "version": "0.1.0",
+  "description": "Thin React map wrapper (MapLibre GL + OSM raster tiles by default): status-colored pins, GeoJSON zone layers, tap-to-mark and selected marker. Isolates the map provider so swapping it touches one package. Consumer must import maplibre-gl/dist/maplibre-gl.css.",
+  "type": "module",
+  "main": "./dist/mounajigeomap.umd.cjs",
+  "module": "./dist/mounajigeomap.es.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/mounajigeomap.es.js",
+      "require": "./dist/mounajigeomap.umd.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.build.json",
+    "dev": "vite build --watch",
+    "typecheck": "tsc -p tsconfig.json",
+    "test": "npm run build && node --test \"tests/*.test.mjs\""
+  },
+  "keywords": [
+    "mounaji",
+    "map",
+    "maplibre",
+    "osm",
+    "geojson",
+    "pins"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "maplibre-gl": "^4.7.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  }
+}

package/src/GeoMap.tsx

@@ -0,0 +1,151 @@
+import { useEffect, useRef } from 'react';
+import maplibregl from 'maplibre-gl';
+import type { Map as MlMap, StyleSpecification } from 'maplibre-gl';
+import { ESTILO_OSM, colorPorEstado } from './estilo';
+
+export interface GeoPin {
+  id: string;
+  lng: number;
+  lat: number;
+  /** Clave de estado (colorea vía colorPorEstado) o ignorada si viene `color`. */
+  estado?: string;
+  color?: string;
+  /** Texto del popup al tocar el pin. */
+  label?: string;
+}
+
+export interface GeoZona {
+  id: string;
+  nombre?: string;
+  /** Geometría o Feature GeoJSON del polígono. */
+  geojson: GeoJSON.Geometry | GeoJSON.Feature;
+}
+
+export interface GeoMapProps {
+  centro: [lng: number, lat: number];
+  zoom?: number;
+  pins?: GeoPin[];
+  zonas?: GeoZona[];
+  /** Tap/click en el mapa (fuera de un pin). */
+  onTap?: (punto: { lng: number; lat: number }) => void;
+  /** Punto seleccionado — se muestra como marker destacado. */
+  seleccionado?: { lng: number; lat: number } | null;
+  alto?: string;
+  estilo?: StyleSpecification | string;
+  coloresEstado?: Record<string, string>;
+}
+
+export function GeoMap({
+  centro,
+  zoom = 14,
+  pins = [],
+  zonas = [],
+  onTap,
+  seleccionado = null,
+  alto = '70vh',
+  estilo = ESTILO_OSM,
+  coloresEstado,
+}: GeoMapProps) {
+  const contenedorRef = useRef<HTMLDivElement | null>(null);
+  const mapRef = useRef<MlMap | null>(null);
+  const cargadoRef = useRef(false);
+  const markersRef = useRef<maplibregl.Marker[]>([]);
+  const seleccionadoRef = useRef<maplibregl.Marker | null>(null);
+  const onTapRef = useRef(onTap);
+  onTapRef.current = onTap;
+
+  // Crear el mapa una sola vez.
+  useEffect(() => {
+    if (!contenedorRef.current || mapRef.current) return;
+    const map = new maplibregl.Map({
+      container: contenedorRef.current,
+      style: estilo,
+      center: centro,
+      zoom,
+      attributionControl: { compact: true },
+    });
+    map.addControl(new maplibregl.NavigationControl({ showCompass: false }));
+    map.on('load', () => {
+      cargadoRef.current = true;
+      pintarZonas(map, zonas);
+    });
+    map.on('click', (e) => {
+      onTapRef.current?.({ lng: e.lngLat.lng, lat: e.lngLat.lat });
+    });
+    mapRef.current = map;
+    return () => {
+      map.remove();
+      mapRef.current = null;
+      cargadoRef.current = false;
+    };
+    // El mapa no se recrea por cambios de centro/zoom: son solo el encuadre inicial.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Pins: pocos cientos en un censo de pueblo — rehacer markers es más simple
+  // y suficiente que diffear.
+  useEffect(() => {
+    const map = mapRef.current;
+    if (!map) return;
+    markersRef.current.forEach((m) => m.remove());
+    markersRef.current = pins.map((pin) => {
+      const marker = new maplibregl.Marker({
+        color: pin.color ?? colorPorEstado(pin.estado, coloresEstado),
+      }).setLngLat([pin.lng, pin.lat]);
+      if (pin.label) marker.setPopup(new maplibregl.Popup({ offset: 24 }).setText(pin.label));
+      marker.addTo(map);
+      return marker;
+    });
+  }, [pins, coloresEstado]);
+
+  // Zonas (si cambian después del load).
+  useEffect(() => {
+    const map = mapRef.current;
+    if (!map || !cargadoRef.current) return;
+    pintarZonas(map, zonas);
+  }, [zonas]);
+
+  // Marker de selección.
+  useEffect(() => {
+    const map = mapRef.current;
+    if (!map) return;
+    seleccionadoRef.current?.remove();
+    seleccionadoRef.current = null;
+    if (seleccionado) {
+      seleccionadoRef.current = new maplibregl.Marker({ color: '#2563eb', scale: 1.2 })
+        .setLngLat([seleccionado.lng, seleccionado.lat])
+        .addTo(map);
+    }
+  }, [seleccionado]);
+
+  return <div ref={contenedorRef} style={{ width: '100%', height: alto }} />;
+}
+
+function pintarZonas(map: MlMap, zonas: GeoZona[]) {
+  for (const zona of zonas) {
+    const sourceId = `mn-zona-${zona.id}`;
+    const data: GeoJSON.Feature =
+      zona.geojson.type === 'Feature'
+        ? zona.geojson
+        : { type: 'Feature', geometry: zona.geojson as GeoJSON.Geometry, properties: {} };
+
+    const existente = map.getSource(sourceId) as maplibregl.GeoJSONSource | undefined;
+    if (existente) {
+      existente.setData(data);
+      continue;
+    }
+    map.addSource(sourceId, { type: 'geojson', data });
+    map.addLayer({
+      id: `${sourceId}-fill`,
+      type: 'fill',
+      source: sourceId,
+      paint: { 'fill-color': '#2563eb', 'fill-opacity': 0.08 },
+    });
+    map.addLayer({
+      id: `${sourceId}-line`,
+      type: 'line',
+      source: sourceId,
+      paint: { 'line-color': '#2563eb', 'line-width': 2, 'line-dasharray': [2, 1] },
+    });
+  }
+}

package/src/estilo.ts

@@ -0,0 +1,35 @@
+import type { StyleSpecification } from 'maplibre-gl';
+
+/**
+ * Estilo raster OSM sin API key. Para un pueblo alcanza y sobra; si un día
+ * hace falta otro proveedor (Google, vector tiles), se cambia ACÁ y ninguna
+ * app se entera — ese aislamiento es la razón de ser del paquete.
+ * Tile usage policy de OSM: https://operations.osmfoundation.org/policies/tiles/
+ */
+export const ESTILO_OSM: StyleSpecification = {
+  version: 8,
+  sources: {
+    osm: {
+      type: 'raster',
+      tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
+      tileSize: 256,
+      attribution: '© OpenStreetMap contributors',
+    },
+  },
+  layers: [{ id: 'osm', type: 'raster', source: 'osm' }],
+};
+
+/** Colores default por estado de pin; la app puede pasar `color` por pin. */
+export const COLORES_ESTADO: Record<string, string> = {
+  con_dueno: '#16a34a',
+  callejero: '#ea580c',
+  sin_verificar: '#6b7280',
+};
+
+export function colorPorEstado(estado: string | undefined, overrides?: Record<string, string>): string {
+  if (estado) {
+    const color = overrides?.[estado] ?? COLORES_ESTADO[estado];
+    if (color) return color;
+  }
+  return '#6b7280';
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export { GeoMap } from './GeoMap';
+export type { GeoMapProps, GeoPin, GeoZona } from './GeoMap';
+export { ESTILO_OSM, COLORES_ESTADO, colorPorEstado } from './estilo';