npm - abn-osmvue - Versions diffs - 0.1.0 - Mend

abn-osmvue 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2026 abaniconetworks
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,426 @@
+# abn-osmvue
+Librería de componentes Vue 2/Vue 3 para integrar mapas de OpenStreetMap. Basada en [Leaflet.js](https://leafletjs.com/) y compatible con ambas versiones de Vue gracias a [vue-demi](https://github.com/vueuse/vue-demi).
+---
+## Instalación
+```bash
+npm install abn-osmvue leaflet
+```
+> Leaflet debe instalarse como dependencia directa de tu proyecto.
+---
+## Registro
+### Vue 3
+```js
+// main.js
+import { createApp } from 'vue'
+import AbnOsmVue from 'abn-osmvue'
+import 'abn-osmvue/dist/style.css'
+import 'leaflet/dist/leaflet.css'
+const app = createApp(App)
+app.use(AbnOsmVue)
+app.mount('#app')
+```
+### Vue 2
+```js
+// main.js
+import Vue from 'vue'
+import AbnOsmVue from 'abn-osmvue'
+import 'abn-osmvue/dist/style.css'
+import 'leaflet/dist/leaflet.css'
+Vue.use(AbnOsmVue)
+```
+### Registro local (ambas versiones)
+```js
+import { OsmMap, OsmMapEmbed } from 'abn-osmvue'
+```
+---
+## Componentes
+### `<OsmMap>`
+Renderiza un mapa interactivo usando Leaflet. Es el componente principal de la librería.
+#### Props
+| Prop | Tipo | Default | Requerido | Descripción |
+|---|---|---|---|---|
+| `lat` | `Number` | — | ✅ | Latitud del centro / pin |
+| `lng` | `Number` | — | ✅ | Longitud del centro / pin |
+| `zoom` | `Number` | `13` | — | Nivel de zoom inicial (1–19) |
+| `minZoom` | `Number` | `1` | — | Zoom mínimo permitido |
+| `maxZoom` | `Number` | `19` | — | Zoom máximo permitido |
+| `height` | `String` | `'400px'` | — | Alto del contenedor (cualquier unidad CSS) |
+| `width` | `String` | `'100%'` | — | Ancho del contenedor |
+| `tileLayer` | `String` | `'osm'` | — | Proveedor de capa base (ver tabla de capas) |
+| `tileUrl` | `String` | `null` | — | URL de teselas personalizada (sobreescribe `tileLayer`) |
+| `tileOptions` | `Object` | `{}` | — | Opciones adicionales para el tile layer de Leaflet |
+| `tileFilter` | `String` | `null` | — | Filtro CSS aplicado a las teselas (`'grayscale'`, `'invert'`, `'sepia'`, o valor CSS arbitrario) |
+| `showMarker` | `Boolean` | `true` | — | Mostrar u ocultar el marcador en lat/lng |
+| `markerIcon` | `String` | `null` | — | URL de imagen personalizada para el pin |
+| `markerIconSize` | `Array` | `[32, 32]` | — | Tamaño del icono en píxeles `[width, height]` |
+| `markerAnchor` | `Array` | `null` | — | Punto de anclaje del icono. Default: centro-base |
+| `markerPopup` | `String` | `null` | — | HTML que aparece en popup al hacer clic en el pin |
+| `controls` | `String\|Array` | `'all'` | — | Controles visibles (ver tabla de controles) |
+| `draggable` | `Boolean` | `true` | — | Permitir arrastrar el mapa |
+| `scrollWheelZoom` | `Boolean` | `true` | — | Zoom con scroll del ratón |
+| `doubleClickZoom` | `Boolean` | `true` | — | Zoom con doble clic |
+| `attributionControl` | `Boolean` | `true` | — | Mostrar atribución de OSM (requerida por licencia) |
+#### Eventos
+| Evento | Payload | Descripción |
+|---|---|---|
+| `map-ready` | `{ map: L.Map }` | El mapa ha sido inicializado |
+| `click` | `{ latlng, originalEvent }` | Clic en el mapa |
+| `zoom-change` | `{ zoom: Number }` | El nivel de zoom cambió |
+| `move-end` | `{ center: L.LatLng }` | El mapa dejó de moverse |
+| `marker-click` | `{ latlng }` | Clic en el marcador |
+#### Métodos (vía `ref`)
+```js
+const mapRef = ref(null)
+mapRef.value.flyTo(lat, lng, zoom)        // Animar desplazamiento al punto
+mapRef.value.setView(lat, lng, zoom)      // Centrar sin animación
+mapRef.value.getLeafletMap()              // Instancia L.Map raw para uso avanzado
+mapRef.value.addMarker({ lat, lng, icon, iconSize, iconAnchor, popup })
+mapRef.value.clearMarkers()              // Eliminar todos los marcadores extra
+```
+#### Slot `overlay`
+Permite superponer contenido personalizado sobre el mapa:
+```html
+<OsmMap :lat="40.41" :lng="-3.70">
+  <template #overlay>
+    <div class="mi-panel">Contenido encima del mapa</div>
+  </template>
+</OsmMap>
+```
+---
+### `<OsmMapEmbed>`
+Genera un `<iframe>` apuntando a un mapa de OpenStreetMap embebido. Útil cuando no se quiere cargar Leaflet en el bundle del cliente.
+#### Props
+| Prop | Tipo | Default | Requerido | Descripción |
+|---|---|---|---|---|
+| `lat` | `Number` | — | ✅ | Latitud |
+| `lng` | `Number` | — | ✅ | Longitud |
+| `zoom` | `Number` | `13` | — | Nivel de zoom |
+| `height` | `String` | `'400px'` | — | Alto del iframe |
+| `width` | `String` | `'100%'` | — | Ancho del iframe |
+| `markerLat` | `Number` | igual que `lat` | — | Latitud del marcador (si difiere del centro) |
+| `markerLng` | `Number` | igual que `lng` | — | Longitud del marcador |
+| `embedSrc` | `String` | auto-generado | — | URL iframe completa personalizada |
+| `title` | `String` | `'Mapa'` | — | Atributo `title` del iframe (accesibilidad) |
+| `sandbox` | `String` | `null` | — | Valor del atributo `sandbox` del iframe |
+---
+## Capas de mapa (`tileLayer`)
+| Valor | Proveedor | API key | Descripción |
+|---|---|---|---|
+| `'osm'` | OpenStreetMap Mapnik | No | Capa estándar OSM (default) |
+| `'osm-hot'` | OSM Humanitarian | No | Estilo humanitario, alto contraste |
+| `'carto-light'` | CartoDB Positron | No | Blanco y gris, minimalista |
+| `'carto-dark'` | CartoDB Dark Matter | No | Fondo oscuro |
+| `'carto-voyager'` | CartoDB Voyager | No | Colorida y moderna, buena alternativa gratuita |
+| `'opentopomap'` | OpenTopoMap | No | Topográfica (máx. zoom 17) |
+| `'esri-satellite'` | Esri World Imagery | Sí ⚠️ | Satélite |
+| `'stadia-alidade'` | Stadia Maps | Sí ⚠️ | Estilo limpio moderno |
+### ⚠️ Capas que requieren API key
+**Stadia Maps** (`'stadia-alidade'`)
+Requiere una API key para uso en producción. El plan gratuito cubre proyectos no comerciales con tráfico moderado.
+→ Obtén tu clave en [stadiamaps.com/auth/signup](https://stadiamaps.com/auth/signup)
+```html
+<OsmMap
+  tile-url="https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png?api_key=TU_API_KEY"
+  :tile-options="{ maxZoom: 20, attribution: '© Stadia Maps © OpenStreetMap contributors' }"
+/>
+```
+**Esri World Imagery** (`'esri-satellite'`)
+Requiere una cuenta de ArcGIS. El uso sin cuenta puede infringir sus términos de servicio en producción.
+→ Información en [developers.arcgis.com](https://developers.arcgis.com)
+```html
+<OsmMap
+  tile-url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}?token=TU_TOKEN"
+  :tile-options="{ maxZoom: 18, attribution: 'Tiles © Esri' }"
+/>
+```
+Para URL propia, usar `tile-url`:
+```html
+<OsmMap
+  :lat="40.41" :lng="-3.70"
+  tile-url="https://mi-servidor/{z}/{x}/{y}.png"
+  :tile-options="{ maxZoom: 18, attribution: '© Mi empresa' }"
+/>
+```
+### Filtros de color (`tileFilter`)
+| Valor | Efecto |
+|---|---|
+| `null` | Sin filtro (default) |
+| `'grayscale'` | Escala de grises |
+| `'invert'` | Colores invertidos (útil para dark mode) |
+| `'sepia'` | Tono sepia |
+| `String` | Valor CSS `filter` arbitrario, ej: `'hue-rotate(180deg) saturate(0.5)'` |
+---
+## Sistema de controles (`controls`)
+| Valor | Resultado |
+|---|---|
+| `'all'` | Zoom + escala + atribución |
+| `'zoom'` | Solo botones de zoom (+/−) |
+| `'none'` | Sin controles |
+| `Array` | Lista explícita: `['zoom', 'scale']` |
+Valores válidos en array: `'zoom'`, `'scale'`, `'attribution'`.
+---
+## Ejemplos
+### Vue 3 — Mapa básico
+```vue
+<template>
+  <OsmMap :lat="40.4168" :lng="-3.7038" />
+</template>
+```
+### Vue 3 — Mapa personalizado con eventos
+```vue
+<template>
+  <OsmMap
+    :lat="40.4168"
+    :lng="-3.7038"
+    :zoom="15"
+    height="500px"
+    tile-layer="carto-light"
+    tile-filter="grayscale"
+    marker-popup="<b>Madrid</b><br>Centro"
+    controls="zoom"
+    :scroll-wheel-zoom="false"
+    @map-ready="onReady"
+    @click="onClick"
+    @marker-click="onMarkerClick"
+  />
+</template>
+<script setup>
+const onReady = ({ map }) => console.log('Mapa listo', map)
+const onClick = ({ latlng }) => console.log('Clic en', latlng)
+const onMarkerClick = ({ latlng }) => console.log('Marcador clicado', latlng)
+</script>
+```
+### Vue 3 — Control programático vía ref
+```vue
+<template>
+  <OsmMap ref="mapRef" :lat="40.4168" :lng="-3.7038" />
+  <button @click="volarABarcelona">Ir a Barcelona</button>
+  <button @click="añadirPin">Añadir pin</button>
+</template>
+<script setup>
+import { ref } from 'vue'
+const mapRef = ref(null)
+function volarABarcelona() {
+  mapRef.value.flyTo(41.3874, 2.1686, 14)
+}
+function añadirPin() {
+  mapRef.value.addMarker({
+    lat: 41.3874,
+    lng: 2.1686,
+    popup: '<b>Barcelona</b>',
+  })
+}
+</script>
+```
+### Vue 3 — Slot overlay
+```vue
+<template>
+  <OsmMap :lat="40.4168" :lng="-3.7038" height="500px">
+    <template #overlay>
+      <div style="position: absolute; top: 10px; right: 10px; background: white; padding: 8px; border-radius: 4px;">
+        Panel personalizado
+      </div>
+    </template>
+  </OsmMap>
+</template>
+```
+### Vue 3 — Mapa estático sin controles
+```vue
+<template>
+  <OsmMap
+    :lat="40.4168"
+    :lng="-3.7038"
+    controls="none"
+    :draggable="false"
+    :scroll-wheel-zoom="false"
+    :double-click-zoom="false"
+  />
+</template>
+```
+### Vue 3 — Iframe embebido
+```vue
+<template>
+  <OsmMapEmbed
+    :lat="40.4168"
+    :lng="-3.7038"
+    :zoom="14"
+    height="400px"
+    title="Ubicación de nuestra oficina"
+  />
+</template>
+```
+### Vue 2 — Mapa básico
+```vue
+<template>
+  <osm-map :lat="40.4168" :lng="-3.7038" />
+</template>
+<script>
+export default {
+  name: 'MiComponente',
+}
+</script>
+```
+### Vue 2 — Mapa personalizado con eventos
+```vue
+<template>
+  <osm-map
+    :lat="40.4168"
+    :lng="-3.7038"
+    :zoom="15"
+    height="500px"
+    tile-layer="carto-light"
+    tile-filter="grayscale"
+    marker-popup="<b>Madrid</b><br>Centro"
+    controls="zoom"
+    :scroll-wheel-zoom="false"
+    @map-ready="onReady"
+    @click="onClick"
+  />
+</template>
+<script>
+export default {
+  methods: {
+    onReady({ map }) {
+      console.log('Mapa listo', map)
+    },
+    onClick({ latlng }) {
+      console.log('Clic en', latlng)
+    },
+  },
+}
+</script>
+```
+### Vue 2 — Control programático vía ref
+```vue
+<template>
+  <div>
+    <osm-map ref="mapRef" :lat="40.4168" :lng="-3.7038" />
+    <button @click="volarABarcelona">Ir a Barcelona</button>
+  </div>
+</template>
+<script>
+export default {
+  methods: {
+    volarABarcelona() {
+      this.$refs.mapRef.flyTo(41.3874, 2.1686, 14)
+    },
+  },
+}
+</script>
+```
+### Vue 2 — Iframe embebido
+```vue
+<template>
+  <osm-map-embed
+    :lat="40.4168"
+    :lng="-3.7038"
+    :zoom="14"
+    height="400px"
+    title="Nuestra ubicación"
+  />
+</template>
+<script>
+export default {
+  name: 'MiMapa',
+}
+</script>
+```
+---
+## Consideraciones de licencia
+- **OpenStreetMap** requiere atribución visible. No desactivar `attribution-control` en producción salvo que uses un tile server propio con su propia atribución.
+- Las capas de terceros (CartoDB, Stadia, Esri) tienen sus propios términos de servicio. Revisa su documentación antes de usarlas en producción.
+---
+## Hoja de ruta
+- [ ] Soporte para múltiples marcadores (`markers: Array<{lat, lng, icon?, popup?}>`)
+- [ ] Dibujar polilíneas y polígonos
+- [ ] Clustering de marcadores (via Leaflet.markercluster)
+- [ ] Plugin de geolocalización
+- [ ] Modo offline con teselas locales
+- [ ] Storybook con ejemplos interactivos

package/dist/abn-osmvue.cjs ADDED Viewed

@@ -0,0 +1 @@

+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("vue-demi"),k=require("leaflet"),m=require("vue"),T={osm:{url:"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",options:{attribution:'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',maxZoom:19}},"osm-hot":{url:"https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png",options:{attribution:'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Tiles style by <a href="https://www.hotosm.org/" target="_blank">Humanitarian OpenStreetMap Team</a>',maxZoom:19}},"carto-light":{url:"https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png",options:{attribution:'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',subdomains:"abcd",maxZoom:20}},"carto-dark":{url:"https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",options:{attribution:'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',subdomains:"abcd",maxZoom:20}},"esri-satellite":{url:"https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",options:{attribution:"Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community",maxZoom:18}},"stadia-alidade":{url:"https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png",options:{attribution:'© <a href="https://stadiamaps.com/">Stadia Maps</a>, © <a href="https://openmaptiles.org/">OpenMapTiles</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',maxZoom:20}},"carto-voyager":{url:"https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png",options:{attribution:'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',subdomains:"abcd",maxZoom:20}},opentopomap:{url:"https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png",options:{attribution:'Map data: © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="https://viewfinderpanoramas.org">SRTM</a> | Map style: © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',maxZoom:17}}},F={grayscale:"grayscale(100%)",invert:"invert(100%)",sepia:"sepia(100%)"};function Y(){function e(t,r,o,n){let a,l={};if(r)a=r,l={...o};else{const i=T[t]||T.osm;a=i.url,l={...i.options,...o}}const s=k.tileLayer(a,l);if(n){const i=F[n]||n;s.on("tileload",u=>{u.tile.style.filter=i})}return s}return{createTileLayer:e}}function H(){const e=[];function t(a,l,s){if(!a)return null;const i=l||[32,32],u=s||[i[0]/2,i[1]];return k.icon({iconUrl:a,iconSize:i,iconAnchor:u,popupAnchor:[0,-u[1]]})}function r(a,l,s,i,u,M,p,y){const d=t(i,u,M),f=d?{icon:d}:{},w=k.marker([l,s],f).addTo(a);return p&&w.bindPopup(p),w.on("click",S=>{y({latlng:S.latlng})}),w}function o(a,{lat:l,lng:s,icon:i,iconSize:u,iconAnchor:M,popup:p}={}){const y=t(i,u,M),d=y?{icon:y}:{},f=k.marker([l,s],d).addTo(a);return p&&f.bindPopup(p),e.push(f),f}function n(a){e.forEach(l=>a.removeLayer(l)),e.length=0}return{createMainMarker:r,addMarker:o,clearMarkers:n}}const z={zoom:e=>{e.zoomControl||k.control.zoom().addTo(e)},scale:e=>{k.control.scale().addTo(e)},attribution:e=>{e.attributionControl||k.control.attribution().addTo(e)}};function X(){function e(t,r){if(t.zoomControl.remove(),r!=="none"){if(r==="all"){Object.values(z).forEach(o=>o(t));return}if(r==="zoom"){z.zoom(t);return}Array.isArray(r)&&r.forEach(o=>{z[o]&&z[o](t)})}}return{applyControls:e}}function J(e){let t=null,r=null;const{createTileLayer:o}=Y(),{createMainMarker:n,addMarker:a,clearMarkers:l}=H(),{applyControls:s}=X();function i(c,h){const{lat:g,lng:O,zoom:C,minZoom:_,maxZoom:A,tileLayer:$,tileUrl:Z,tileOptions:B,tileFilter:N,showMarker:I,markerIcon:P,markerIconSize:R,markerAnchor:V,markerPopup:G,controls:q,draggable:U,scrollWheelZoom:j,doubleClickZoom:W,attributionControl:D}=h;t=k.map(c,{center:[g,O],zoom:C,minZoom:_,maxZoom:A,dragging:U,scrollWheelZoom:j,doubleClickZoom:W,attributionControl:D,zoomControl:!0}),o($,Z,B,N).addTo(t),s(t,q),I&&(r=n(t,g,O,P,R,V,G,v=>e("marker-click",v))),t.on("click",v=>{e("click",{latlng:v.latlng,originalEvent:v.originalEvent})}),t.on("zoomend",()=>{e("zoom-change",{zoom:t.getZoom()})}),t.on("moveend",()=>{e("move-end",{center:t.getCenter()})}),e("map-ready",{map:t})}function u(){t&&(t.remove(),t=null,r=null)}function M(c,h,g){t==null||t.flyTo([c,h],g)}function p(c,h,g){t==null||t.setView([c,h],g)}function y(){return t}function d(c){return t?a(t,c):null}function f(){t&&l(t)}function w(c){t&&(r&&(t.removeLayer(r),r=null),c.showMarker&&(r=n(t,c.lat,c.lng,c.markerIcon,c.markerIconSize,c.markerAnchor,c.markerPopup,h=>e("marker-click",h))))}function S(c,h,g){t==null||t.setView([c,h],g,{animate:!1})}return{initMap:i,destroyMap:u,flyTo:M,setView:p,getLeafletMap:y,addMarker:d,clearMarkers:f,updateMarker:w,updateView:S}}const x=(e,t)=>{const r=e.__vccOpts||e;for(const[o,n]of t)r[o]=n;return r},K=b.defineComponent({name:"OsmMap",props:{lat:{type:Number,required:!0},lng:{type:Number,required:!0},zoom:{type:Number,default:13},minZoom:{type:Number,default:1},maxZoom:{type:Number,default:19},height:{type:String,default:"400px"},width:{type:String,default:"100%"},tileLayer:{type:String,default:"osm"},tileUrl:{type:String,default:null},tileOptions:{type:Object,default:()=>({})},tileFilter:{type:String,default:null},showMarker:{type:Boolean,default:!0},markerIcon:{type:String,default:null},markerIconSize:{type:Array,default:()=>[32,32]},markerAnchor:{type:Array,default:null},markerPopup:{type:String,default:null},controls:{type:[String,Array],default:"all"},draggable:{type:Boolean,default:!0},scrollWheelZoom:{type:Boolean,default:!0},doubleClickZoom:{type:Boolean,default:!0},attributionControl:{type:Boolean,default:!0}},emits:["map-ready","click","zoom-change","move-end","marker-click"],setup(e,{emit:t,expose:r}){const o=b.ref(null),{initMap:n,destroyMap:a,flyTo:l,setView:s,getLeafletMap:i,addMarker:u,clearMarkers:M,updateMarker:p,updateView:y}=J(t);b.onMounted(()=>{n(o.value,e)}),b.onBeforeUnmount(()=>{a()}),b.watch(()=>[e.lat,e.lng,e.zoom],([f,w,S])=>{y(f,w,S)}),b.watch(()=>[e.showMarker,e.markerIcon,e.markerIconSize,e.markerAnchor,e.markerPopup],()=>{p(e)});const d={flyTo:l,setView:s,getLeafletMap:i,addMarker:u,clearMarkers:M};return r&&r(d),{mapEl:o,...d}}}),Q={ref:"mapEl",class:"abn-osmvue-map"},ee={key:0,class:"abn-osmvue-overlay"};function te(e,t,r,o,n,a){return m.openBlock(),m.createElementBlock("div",{class:"abn-osmvue-wrapper",style:m.normalizeStyle({height:e.height,width:e.width})},[m.createElementVNode("div",Q,null,512),e.$slots.overlay?(m.openBlock(),m.createElementBlock("div",ee,[m.renderSlot(e.$slots,"overlay")])):m.createCommentVNode("",!0)],4)}const E=x(K,[["render",te]]),re=b.defineComponent({name:"OsmMapEmbed",props:{lat:{type:Number,required:!0},lng:{type:Number,required:!0},zoom:{type:Number,default:13},height:{type:String,default:"400px"},width:{type:String,default:"100%"},markerLat:{type:Number,default:null},markerLng:{type:Number,default:null},embedSrc:{type:String,default:null},title:{type:String,default:"Mapa"},sandbox:{type:String,default:null}},setup(e){return{iframeSrc:b.computed(()=>{if(e.embedSrc)return e.embedSrc;const r=e.markerLat??e.lat,o=e.markerLng??e.lng,n=.01*Math.pow(2,13-e.zoom),a=e.lng-n,l=e.lat-n*.6,s=e.lng+n,i=e.lat+n*.6;return`https://www.openstreetmap.org/export/embed.html?bbox=${`${a},${l},${s},${i}`}&layer=mapnik&marker=${r},${o}`})}}}),oe=["src","width","height","title","sandbox"];function ae(e,t,r,o,n,a){return m.openBlock(),m.createElementBlock("iframe",{src:e.iframeSrc,width:e.width,height:e.height,title:e.title,sandbox:e.sandbox||void 0,class:"abn-osmvue-embed",frameborder:"0",scrolling:"no",marginheight:"0",marginwidth:"0",allowfullscreen:""},null,8,oe)}const L=x(re,[["render",ae]]),ne={install(e){e.component("OsmMap",E),e.component("OsmMapEmbed",L)}};exports.OsmMap=E;exports.OsmMapEmbed=L;exports.default=ne;

package/dist/abn-osmvue.js ADDED Viewed

@@ -0,0 +1,367 @@
+import { defineComponent as L, ref as Y, onMounted as D, onBeforeUnmount as H, watch as O, computed as X } from "vue-demi";
+import g from "leaflet";
+import { openBlock as v, createElementBlock as z, normalizeStyle as J, createElementVNode as K, renderSlot as Q, createCommentVNode as ee } from "vue";
+const T = {
+  osm: {
+    url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+    options: {
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+      maxZoom: 19
+    }
+  },
+  "osm-hot": {
+    url: "https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png",
+    options: {
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Tiles style by <a href="https://www.hotosm.org/" target="_blank">Humanitarian OpenStreetMap Team</a>',
+      maxZoom: 19
+    }
+  },
+  "carto-light": {
+    url: "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png",
+    options: {
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
+      subdomains: "abcd",
+      maxZoom: 20
+    }
+  },
+  "carto-dark": {
+    url: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
+    options: {
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
+      subdomains: "abcd",
+      maxZoom: 20
+    }
+  },
+  "esri-satellite": {
+    url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
+    options: {
+      attribution: "Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community",
+      maxZoom: 18
+    }
+  },
+  "stadia-alidade": {
+    url: "https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png",
+    options: {
+      attribution: '&copy; <a href="https://stadiamaps.com/">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+      maxZoom: 20
+    }
+  },
+  "carto-voyager": {
+    url: "https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png",
+    options: {
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
+      subdomains: "abcd",
+      maxZoom: 20
+    }
+  },
+  opentopomap: {
+    url: "https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png",
+    options: {
+      attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="https://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
+      maxZoom: 17
+    }
+  }
+}, te = {
+  grayscale: "grayscale(100%)",
+  invert: "invert(100%)",
+  sepia: "sepia(100%)"
+};
+function re() {
+  function e(t, r, o, n) {
+    let a, l = {};
+    if (r)
+      a = r, l = { ...o };
+    else {
+      const i = T[t] || T.osm;
+      a = i.url, l = { ...i.options, ...o };
+    }
+    const c = g.tileLayer(a, l);
+    if (n) {
+      const i = te[n] || n;
+      c.on("tileload", (u) => {
+        u.tile.style.filter = i;
+      });
+    }
+    return c;
+  }
+  return { createTileLayer: e };
+}
+function oe() {
+  const e = [];
+  function t(a, l, c) {
+    if (!a) return null;
+    const i = l || [32, 32], u = c || [i[0] / 2, i[1]];
+    return g.icon({
+      iconUrl: a,
+      iconSize: i,
+      iconAnchor: u,
+      popupAnchor: [0, -u[1]]
+    });
+  }
+  function r(a, l, c, i, u, b, m, h) {
+    const p = t(i, u, b), d = p ? { icon: p } : {}, k = g.marker([l, c], d).addTo(a);
+    return m && k.bindPopup(m), k.on("click", (M) => {
+      h({ latlng: M.latlng });
+    }), k;
+  }
+  function o(a, { lat: l, lng: c, icon: i, iconSize: u, iconAnchor: b, popup: m } = {}) {
+    const h = t(i, u, b), p = h ? { icon: h } : {}, d = g.marker([l, c], p).addTo(a);
+    return m && d.bindPopup(m), e.push(d), d;
+  }
+  function n(a) {
+    e.forEach((l) => a.removeLayer(l)), e.length = 0;
+  }
+  return { createMainMarker: r, addMarker: o, clearMarkers: n };
+}
+const S = {
+  zoom: (e) => {
+    e.zoomControl || g.control.zoom().addTo(e);
+  },
+  scale: (e) => {
+    g.control.scale().addTo(e);
+  },
+  attribution: (e) => {
+    e.attributionControl || g.control.attribution().addTo(e);
+  }
+};
+function ae() {
+  function e(t, r) {
+    if (t.zoomControl.remove(), r !== "none") {
+      if (r === "all") {
+        Object.values(S).forEach((o) => o(t));
+        return;
+      }
+      if (r === "zoom") {
+        S.zoom(t);
+        return;
+      }
+      Array.isArray(r) && r.forEach((o) => {
+        S[o] && S[o](t);
+      });
+    }
+  }
+  return { applyControls: e };
+}
+function ne(e) {
+  let t = null, r = null;
+  const { createTileLayer: o } = re(), { createMainMarker: n, addMarker: a, clearMarkers: l } = oe(), { applyControls: c } = ae();
+  function i(s, f) {
+    const {
+      lat: y,
+      lng: x,
+      zoom: C,
+      minZoom: E,
+      maxZoom: _,
+      tileLayer: $,
+      tileUrl: Z,
+      tileOptions: N,
+      tileFilter: I,
+      showMarker: B,
+      markerIcon: P,
+      markerIconSize: R,
+      markerAnchor: V,
+      markerPopup: G,
+      controls: U,
+      draggable: q,
+      scrollWheelZoom: W,
+      doubleClickZoom: j,
+      attributionControl: F
+    } = f;
+    t = g.map(s, {
+      center: [y, x],
+      zoom: C,
+      minZoom: E,
+      maxZoom: _,
+      dragging: q,
+      scrollWheelZoom: W,
+      doubleClickZoom: j,
+      attributionControl: F,
+      zoomControl: !0
+    }), o($, Z, N, I).addTo(t), c(t, U), B && (r = n(
+      t,
+      y,
+      x,
+      P,
+      R,
+      V,
+      G,
+      (w) => e("marker-click", w)
+    )), t.on("click", (w) => {
+      e("click", { latlng: w.latlng, originalEvent: w.originalEvent });
+    }), t.on("zoomend", () => {
+      e("zoom-change", { zoom: t.getZoom() });
+    }), t.on("moveend", () => {
+      e("move-end", { center: t.getCenter() });
+    }), e("map-ready", { map: t });
+  }
+  function u() {
+    t && (t.remove(), t = null, r = null);
+  }
+  function b(s, f, y) {
+    t == null || t.flyTo([s, f], y);
+  }
+  function m(s, f, y) {
+    t == null || t.setView([s, f], y);
+  }
+  function h() {
+    return t;
+  }
+  function p(s) {
+    return t ? a(t, s) : null;
+  }
+  function d() {
+    t && l(t);
+  }
+  function k(s) {
+    t && (r && (t.removeLayer(r), r = null), s.showMarker && (r = n(
+      t,
+      s.lat,
+      s.lng,
+      s.markerIcon,
+      s.markerIconSize,
+      s.markerAnchor,
+      s.markerPopup,
+      (f) => e("marker-click", f)
+    )));
+  }
+  function M(s, f, y) {
+    t == null || t.setView([s, f], y, { animate: !1 });
+  }
+  return {
+    initMap: i,
+    destroyMap: u,
+    flyTo: b,
+    setView: m,
+    getLeafletMap: h,
+    addMarker: p,
+    clearMarkers: d,
+    updateMarker: k,
+    updateView: M
+  };
+}
+const A = (e, t) => {
+  const r = e.__vccOpts || e;
+  for (const [o, n] of t)
+    r[o] = n;
+  return r;
+}, ie = L({
+  name: "OsmMap",
+  props: {
+    lat: { type: Number, required: !0 },
+    lng: { type: Number, required: !0 },
+    zoom: { type: Number, default: 13 },
+    minZoom: { type: Number, default: 1 },
+    maxZoom: { type: Number, default: 19 },
+    height: { type: String, default: "400px" },
+    width: { type: String, default: "100%" },
+    tileLayer: { type: String, default: "osm" },
+    tileUrl: { type: String, default: null },
+    tileOptions: { type: Object, default: () => ({}) },
+    tileFilter: { type: String, default: null },
+    showMarker: { type: Boolean, default: !0 },
+    markerIcon: { type: String, default: null },
+    markerIconSize: { type: Array, default: () => [32, 32] },
+    markerAnchor: { type: Array, default: null },
+    markerPopup: { type: String, default: null },
+    controls: { type: [String, Array], default: "all" },
+    draggable: { type: Boolean, default: !0 },
+    scrollWheelZoom: { type: Boolean, default: !0 },
+    doubleClickZoom: { type: Boolean, default: !0 },
+    attributionControl: { type: Boolean, default: !0 }
+  },
+  emits: ["map-ready", "click", "zoom-change", "move-end", "marker-click"],
+  setup(e, { emit: t, expose: r }) {
+    const o = Y(null), {
+      initMap: n,
+      destroyMap: a,
+      flyTo: l,
+      setView: c,
+      getLeafletMap: i,
+      addMarker: u,
+      clearMarkers: b,
+      updateMarker: m,
+      updateView: h
+    } = ne(t);
+    D(() => {
+      n(o.value, e);
+    }), H(() => {
+      a();
+    }), O(
+      () => [e.lat, e.lng, e.zoom],
+      ([d, k, M]) => {
+        h(d, k, M);
+      }
+    ), O(
+      () => [e.showMarker, e.markerIcon, e.markerIconSize, e.markerAnchor, e.markerPopup],
+      () => {
+        m(e);
+      }
+    );
+    const p = { flyTo: l, setView: c, getLeafletMap: i, addMarker: u, clearMarkers: b };
+    return r && r(p), { mapEl: o, ...p };
+  }
+}), le = {
+  ref: "mapEl",
+  class: "abn-osmvue-map"
+}, se = {
+  key: 0,
+  class: "abn-osmvue-overlay"
+};
+function ce(e, t, r, o, n, a) {
+  return v(), z("div", {
+    class: "abn-osmvue-wrapper",
+    style: J({ height: e.height, width: e.width })
+  }, [
+    K("div", le, null, 512),
+    e.$slots.overlay ? (v(), z("div", se, [
+      Q(e.$slots, "overlay")
+    ])) : ee("", !0)
+  ], 4);
+}
+const ue = /* @__PURE__ */ A(ie, [["render", ce]]), me = L({
+  name: "OsmMapEmbed",
+  props: {
+    lat: { type: Number, required: !0 },
+    lng: { type: Number, required: !0 },
+    zoom: { type: Number, default: 13 },
+    height: { type: String, default: "400px" },
+    width: { type: String, default: "100%" },
+    markerLat: { type: Number, default: null },
+    markerLng: { type: Number, default: null },
+    embedSrc: { type: String, default: null },
+    title: { type: String, default: "Mapa" },
+    sandbox: { type: String, default: null }
+  },
+  setup(e) {
+    return { iframeSrc: X(() => {
+      if (e.embedSrc) return e.embedSrc;
+      const r = e.markerLat ?? e.lat, o = e.markerLng ?? e.lng, n = 0.01 * Math.pow(2, 13 - e.zoom), a = e.lng - n, l = e.lat - n * 0.6, c = e.lng + n, i = e.lat + n * 0.6;
+      return `https://www.openstreetmap.org/export/embed.html?bbox=${`${a},${l},${c},${i}`}&layer=mapnik&marker=${r},${o}`;
+    }) };
+  }
+}), pe = ["src", "width", "height", "title", "sandbox"];
+function de(e, t, r, o, n, a) {
+  return v(), z("iframe", {
+    src: e.iframeSrc,
+    width: e.width,
+    height: e.height,
+    title: e.title,
+    sandbox: e.sandbox || void 0,
+    class: "abn-osmvue-embed",
+    frameborder: "0",
+    scrolling: "no",
+    marginheight: "0",
+    marginwidth: "0",
+    allowfullscreen: ""
+  }, null, 8, pe);
+}
+const fe = /* @__PURE__ */ A(me, [["render", de]]), be = {
+  install(e) {
+    e.component("OsmMap", ue), e.component("OsmMapEmbed", fe);
+  }
+};
+export {
+  ue as OsmMap,
+  fe as OsmMapEmbed,
+  be as default
+};

package/dist/abn-osmvue.umd.js ADDED Viewed

@@ -0,0 +1 @@

package/dist/style.css ADDED Viewed

	@@ -0,0 +1 @@
1	+ .abn-osmvue-wrapper{position:relative;display:block}.abn-osmvue-map{width:100%;height:100%}.abn-osmvue-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000}.abn-osmvue-overlay>*{pointer-events:auto}.abn-osmvue-embed{display:block;border:none}

package/dist/types.d.ts ADDED Viewed

@@ -0,0 +1,71 @@
+import { DefineComponent } from 'vue-demi'
+import * as L from 'leaflet'
+export interface OsmMapProps {
+  lat: number
+  lng: number
+  zoom?: number
+  minZoom?: number
+  maxZoom?: number
+  height?: string
+  width?: string
+  tileLayer?: 'osm' | 'osm-hot' | 'carto-light' | 'carto-dark' | 'carto-voyager' | 'opentopomap' | 'esri-satellite' | 'stadia-alidade'
+  tileUrl?: string | null
+  tileOptions?: Record<string, unknown>
+  tileFilter?: 'grayscale' | 'invert' | 'sepia' | string | null
+  showMarker?: boolean
+  markerIcon?: string | null
+  markerIconSize?: [number, number]
+  markerAnchor?: [number, number] | null
+  markerPopup?: string | null
+  controls?: 'all' | 'zoom' | 'none' | Array<'zoom' | 'scale' | 'attribution'>
+  draggable?: boolean
+  scrollWheelZoom?: boolean
+  doubleClickZoom?: boolean
+  attributionControl?: boolean
+}
+export interface OsmMapEmits {
+  (e: 'map-ready', payload: { map: L.Map }): void
+  (e: 'click', payload: { latlng: L.LatLng; originalEvent: MouseEvent }): void
+  (e: 'zoom-change', payload: { zoom: number }): void
+  (e: 'move-end', payload: { center: L.LatLng }): void
+  (e: 'marker-click', payload: { latlng: L.LatLng }): void
+}
+export interface OsmMapExpose {
+  flyTo(lat: number, lng: number, zoom?: number): void
+  setView(lat: number, lng: number, zoom?: number): void
+  getLeafletMap(): L.Map | null
+  addMarker(options: {
+    lat: number
+    lng: number
+    icon?: string
+    iconSize?: [number, number]
+    iconAnchor?: [number, number]
+    popup?: string
+  }): L.Marker | null
+  clearMarkers(): void
+}
+export interface OsmMapEmbedProps {
+  lat: number
+  lng: number
+  zoom?: number
+  height?: string
+  width?: string
+  markerLat?: number | null
+  markerLng?: number | null
+  embedSrc?: string | null
+  title?: string
+  sandbox?: string | null
+}
+export declare const OsmMap: DefineComponent<OsmMapProps>
+export declare const OsmMapEmbed: DefineComponent<OsmMapEmbedProps>
+declare const plugin: {
+  install(app: unknown): void
+}
+export default plugin

package/package.json ADDED Viewed

@@ -0,0 +1,37 @@
+{
+  "name": "abn-osmvue",
+  "version": "0.1.0",
+  "description": "Vue 2/Vue 3 component library for OpenStreetMap powered by Leaflet",
+  "author": "ABN",
+  "license": "MIT",
+  "files": ["dist"],
+  "main": "./dist/abn-osmvue.cjs",
+  "module": "./dist/abn-osmvue.js",
+  "types": "./dist/types.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/abn-osmvue.js",
+      "require": "./dist/abn-osmvue.cjs"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && vue-demi-switch 3 && cp src/types.d.ts dist/types.d.ts",
+    "build:vue2": "vue-demi-switch 2 && vite build",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "vue": "^2.7.0 || ^3.0.0"
+  },
+  "dependencies": {
+    "leaflet": "^1.9.0",
+    "vue-demi": "^0.14.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.0.0",
+    "vue": "^3.4.0"
+  }
+}