{"_rev":"3-e180de94a53ab920cb87e2dc59011c08","time":{"created":"2023-10-12T17:46:23.538Z","1.2.5":"2023-10-12T17:40:57.245Z","modified":"2023-10-12T17:46:24.320Z","1.2.6":"2023-10-12T17:46:24.008Z"},"_id":"@donlluque/mapainteractivo","name":"@donlluque/mapainteractivo","dist-tags":{"latest":"1.2.6"},"versions":{"1.2.6":{"name":"@donlluque/mapainteractivo","version":"1.2.6","description":"Mapa interactivo ","main":"lib/MapaInteractivo.min.js","scripts":{"build":"webpack --env build","dev":"webpack --progress --colors --watch --env dev","test":"mocha --compilers js:babel-core/register --colors ./test/*.spec.js","test:watch":"mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js"},"repository":{"type":"git","url":"git+https://github.com/donlluque/mapainteractivo.git"},"bugs":{"url":"https://github.com/donlluque/mapainteractivo/issues"},"devDependencies":{"babel-cli":"6.26.0","babel-core":"6.26.3","babel-eslint":"7.2.3","babel-loader":"9.1.3","babel-plugin-add-module-exports":"1.0.4","babel-preset-es2015":"6.24.1","chai":"4.3.10","css-loader":"^6.8.1","mocha":"10.2.0","style-loader":"^3.3.3","url-loader":"^4.1.1","webpack":"5.88.2","yargs":"17.7.2"},"keywords":["webpack","es6","leaflet"],"dependencies":{"d3-queue":"^3.0.7","es6-promise":"^4.2.8","exports-loader":"^4.0.0","imports-loader":"^4.0.1","isomorphic-fetch":"^3.0.0","leaflet":"^1.9.4","leaflet-heatmap":"^1.0.0","leaflet.heat":"^0.2.0","leaflet.markercluster":"^1.5.3","lodash":"^4.17.21","proj4":"^2.9.0"},"author":{"name":"donlluque"},"license":"public","_id":"@donlluque/mapainteractivo@1.2.6","homepage":"https://github.com/donlluque/mapainteractivo#readme","_nodeVersion":"18.18.0","_npmVersion":"10.2.0","dist":{"integrity":"sha512-aP6XOs876oGMG5CCBeulwcqgC20LX3feokKNHfY6nx7M/YQ2C/jJBDeIaz8W2bwFwz90zeU10S2IhlJGgeQNBQ==","shasum":"4d61fb6ce8a1b9e853c9e6072107aac5fb56df83","tarball":"https://registry.npmjs.org/@donlluque/mapainteractivo/-/mapainteractivo-1.2.6.tgz","fileCount":160,"unpackedSize":5503657,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGbEIyRgBlII6EjPniU9xVmew9TMIcdpLWiCQz7SEg1dAiEAkkz7fYQaL1JmENzRlD6AhYYcPL18a5FiLrc5xQnJNho="}]},"_npmUser":{"name":"donlluque","email":"donlluque@gmail.com"},"directories":{},"maintainers":[{"name":"donlluque","email":"donlluque@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mapainteractivo_1.2.6_1697132783667_0.3303436716824766"},"_hasShrinkwrap":false}},"maintainers":[{"name":"donlluque","email":"donlluque@gmail.com"}],"description":"Mapa interactivo ","homepage":"https://github.com/donlluque/mapainteractivo#readme","keywords":["webpack","es6","leaflet"],"repository":{"type":"git","url":"git+https://github.com/donlluque/mapainteractivo.git"},"author":{"name":"donlluque"},"bugs":{"url":"https://github.com/donlluque/mapainteractivo/issues"},"license":"public","readme":"# Mapa Interactivo\nUna manera simple de crear un mapa de la Ciudad de Buenos Aires y alrededores utilizando la libreria [leaflet](http://leafletjs.com/).\n\n# Instalación\n```\nnpm install @usig-gcba/mapa-interactivo\n```\n\n# Cómo usarlo\n\n### ES6\n\n```javascript\nimport MapaInteractivo from '@usig-gcba/mapa-interactivo'\n\n\nconst mapaInteractivo = new MapaInteractivo(\"mapa-id\", {center: [-34.62, -58.44]});\n```\nEs importante que el div contenedor contenga las dimensiones deseadas previamente a inicializar el mapa.\n\n# API\n\n#### new MapaInteractivo(id: String, opciones?: Object) => MapaInteractivo\n* **id**: id del elemento html donde se debe insertar el mapa\n* **opciones**: objecto de configuracion con cualquiera de las siguientes propiedades:\n\n| Opcion | Tipo | Default | Descripcion |\n| ------------- |:-------------: | :---------:| :---------- |\n| **onClick** | *function* | null |Callback llamado al hacer click en el mapa |\n| **onContextMenu** | *function* | null |Callback llamado al hacer click derecho sobre el mapa |\n| **onMoveStart** | *function* | null |Callback llamado al comienzo de un movimiento generado en el mapa (tanto por zoom como por desplazamiento) |\n| **onMoveEnd** | *function* | null |Callback llamado al final de un movimiento generado en el mapa|\n| **onMarkerDragEnd** | *function* | null |Callback llamado luego de arrastrar un marcador|\n| **onFeatureClick** | *function* | null |Callback llamado al seleccionar un feature|\n| **onInactivateMarker** | *function* | null |Callback llamado al desactivar un marcador|\n| **center** | *[Number, Number]* | `[-34.62, -58.44]` |Centro del mapa al iniciar|\n| **zoomControl** | *boolean* | `false` |Mostrar el control de zoom cuando es `true`|\n| **zoom** | *Number* | `13` |Nivel de zoom del mapa al iniciar|\n| **touchZoom** | *boolean* | `true` | Habilita zoom mediante eventos touch cuando es `true` |\n| **tap** | *boolean* | `true` | Habilita eventos touch cuando es `true` |\n| **attributionControl** | *boolean* | `false` | Se muestra la informacion de atribucion\n| **markerZoomInLevel** | *Number* | `15` |Nivel en el que se debe hacer zoom sobre un marcador |\n| **featureZoomInLevel** | *Number* | `17` |Nivel en el que se debe hacer zoom sobre un feature|\n| **language** | *String* | `es` |Idioma de los mensajes del mapa |\n| **fromMarker** | [*Icon*](http://leafletjs.com/reference-1.3.0.html#icon) | ![alt text](https://mapa.buenosaires.gob.ar/imgs/marker-source.png \"Marcador\") |Icono del marcador de inicio al mostrar un recorrido|\n| **toMarker** | [*Icon*](http://leafletjs.com/reference-1.3.0.html#icon) | ![alt text](https://mapa.buenosaires.gob.ar/imgs/marker-target.png \"Marcador\") |Icono del marcador de fin al mostrar un recorrido |\n| **activeMarker** | [*Icon*](http://leafletjs.com/reference-1.3.0.html#icon) | ![alt text](https://mapa.buenosaires.gob.ar/imgs/marker-icon.png \"Marcador\") |Icono del marcador activo|\n| **marker** | [*Icon*](http://leafletjs.com/reference-1.3.0.html#icon) | ![alt text](http://mapa.buenosaires.gob.ar/imgs/marker-target.png \"Marcador\") |Icono del marcador default |\n\n##### *opciones.baseLayer?: Object*\n\n| Opcion | Tipo | Default | Descripcion |\n| ------------- |:-------------: | :---------:| :----------: |\n| **params.maxZoom** | *Number* | `18` |Zoom máximo sobre el mapa|\n| **params.minZoom** | *Number* | `9` |Zoom minimo sobre el mapa|\n\n##### *opciones.texts?: Object*\n\nObjeto conteniendo los textos definidos para cada idioma. Por default se encuentran los siguientes textos:\n```javascript\n texts: {\n es: {\n loadingLayers: 'Cargando capas...',\n loadingMaps: 'Cargando mapas...',\n loadingInformation: 'Cargando información...',\n errorLoadingInformation: 'Se produjo un error al acceder a la información. Reintente más tarde.'\n },\n en : {\n loadingLayers: 'Loading layers...',\n loadingMaps: 'Loading maps...',\n loadingInformation: 'Loading information...',\n errorLoadingInformation: 'An error ocurred. Please try again later.'\n }\n }\n```\n#### getMapa() => LeafletMap\n\n*Retorna la instancia interna del mapa*\n\n#### addPublicLayer(layerName: String, options?: Object)\n\n*Agrega una capa en base a su nombre*\n * **layerName**: `String` indicando el nombre de la capa perteneciente a una de las [capas disponibles](http://epok.buenosaires.gob.ar/mapainteractivoba/layers).\n * **options**: `Object` conteniendo atributos opcionales de la capa\n * **clustering**: `boolean` si la capa debe ser clusterizada\n * **callAPIOnClick**: `boolean` en caso de `true`, se hace un llamado a la API especificada al hacer click sobre el mapa\n * **onClickAPI**: `String` API a la que se debe llamar al hacer click sobre el mapa\n * **layerId**: `String` identificador de la capa\n * **baseLayer**: en caso de que se incluya este parametro, la capa sera agregada como una capa base.\n * **Posibles tipos**\n * `Object`\n * **uri**: `String` uri utilizado para descargar la capa\n * **options**: `Object` opciones de [L.tileLayer](http://leafletjs.com/reference-1.3.0.html#tilelayer-option)\n * [`L.tileLayer`](http://leafletjs.com/reference-1.3.0.html#tilelayer)\n\n#### removePublicLayer(layerName: String)\n\n*Remueve una capa en base a su nombre*\n * **layerName**: `String` nombre de la capa\n\n#### addVectorTileLayer(layerId: String, options?: Object)\n\n*Agrega una capa de [mosaicos vectoriales](http://leaflet.github.io/Leaflet.VectorGrid/vectorgrid-api-docs.html). Se usa para poder cargar datos vectoriales de gran volumen*\n * **layerId**: `String` Nombre de la capa, se usa de identificador.\n * **options**: `Object` conteniendo atributos opcionales de la capa.\n\n * **Posibles opciones**\n * **url**: `String` (requerido) Dirección del origen de los datos con los parámetros de ZXY en forma de plantilla.\n * **style**: `Object` Estilo para mostrar los datos en formato [L.Path](https://leafletjs.com/reference-1.5.0.html#path). [Documentación](http://leaflet.github.io/Leaflet.VectorGrid/vectorgrid-api-docs.html#styling-vectorgrids)\n * **displayPopup**: `Object` En caso de querer mostrar la información de la capa en un popup.\n\n### Opciones de displayPopup\n\n| Opcion | Tipo | Default | Descripcion |\n| ------------- |:-------------: | :---------:| :---------:|\n| **content** | *String* | ` ` |Contenido del popup, se acepta HTML y los atributos se usan con placeholders entre llaves. Ejemplo {atributo}. [Referencia](https://leafletjs.com/reference-1.5.0.html#util-template) |\n| **onEvent** | *String* | `click` |click o mouseover|\n\n## Ejemplo\n```javascript\nmap.addVectorTileLayer('parcelas',{\n url: 'http://example.com/tileserver/parcelas/{z}/{x}/{y}.pbf',\n displayPopup:{ content:'Comuna: {parcela}
Barrio: {barrios}', onEvent:'click'},\n style:{\n parcelas:function(properties, zoom, geometryDimension){\n return {\n weight: (zoom > 12)? 2 : 0.5,\n fillColor: getColor(properties.comuna),\n fillOpacity: 0.8,\n stroke: true,\n color:'#FF00FF',\n dashArray: '2',\n fill: true\n }\n }\n }\n});\n```\n\n\n#### removeVectorTileLayer(layerId: String)\n\n*Remueve una capa de tiles vectoriales en base a su nombre*\n * **layerId**: `String` nombre de la capa\n\n#### setBaseLayer()\n\n*Agrega la capa base default del mapa*\n\n#### setBaseLayer(baselayer: [L.tileLayer](http://leafletjs.com/reference-1.3.0.html#tilelayer))\n\n*Cambia la capa base del mapa*\n##### Parámetros\n\n * **baseLayer**: `L.tileLayer` la nueva base a agregar\n\n#### setBaseLayer(baselayer: Object)\n\n*Cambia la capa base del mapa*\n##### Parámetros\n\n * **baseLayer**: `Object` la nueva base a agregar conteniendo:\n * **uri**: `String` uri utilizado para descargar la capa\n * **options**: `Object` opciones de [L.tileLayer](http://leafletjs.com/reference-1.3.0.html#tilelayer-option)\n\n#### addMarker(latlng: Object, visible: boolean, draggable: boolean, goTo: boolean, activate: boolean, clickable: boolean, options: Object) => markerId: Number\n\n*Agrega un marcador en la posicion especificada, retornando su id*\n##### Parámetros\n\n * **latlng**: `Object` posicion del marcador\n * **lat**: `Number` latitud\n * **lng**: `Number` longitud\n * **visible**: `boolean` indicando si el marcador debe estar visible\n * **draggable**: `boolean` indicando si el marcador puede ser arrastrado\n * **goTo**: `boolean` indicando si el mapa debe recentrarse en el marcador\n * **activate**: `boolean` indicando si se debe activar el marcador\n * **clickable**: `boolean` indicando si el marcador puede ser clickeado\n * **options**: `Object` datos a guardar dentro del marcador\n##### Return\n\n * `Number` id del marcador generado\n\n#### selectMarker(markerId: Number)\n\n*Selecciona el marcador indicado*\n##### Parámetros\n\n * **markerId**: `Number` id del marcador a seleccionar\n\n#### isMarkerActive(markerId: Number) => boolean\n*Pregunta si el marcador esta activo*\n##### Parámetros\n * **markerId**: `Number` id del marcador a analizar\n\n#### removeMarker(markerId: String)\n*Remueve el marcador indicado*\n##### Parámetros\n * **markerId**: `Number` id del marcador a remover\n##### Return\n * **seleccionado**: `boolean` indicando si el marcador esta seleccionado\n\n#### addLocationMarker(position: Object, recenter: boolean, zoomIn: boolean) => [L.Marker](http://leafletjs.com/reference-1.3.0.html#marker)\n*Agrega al mapa un marcador de ubicación actual en la posicion especificada*\n##### Parámetros\n * **position**: `Object` posicion del marcador\n * **coords**: `Object`\n * **latitude**: `Number` latitud\n * **longitude**: `Number` longitud\n * **recenter**: `boolean` indicando si el mapa debe recentrarse en la posicion del marcador\n * **zoomIn**: `boolean` indicando si se debe ajustar el nivel de zoom\n##### Return\n * **marker**: `L.marker` marcador agregado\n\n#### mostrarRecorrido(recorrido: Object)\n*Agrega un recorrido al mapa*\n##### Parámetros\n * **recorrido**: `Object` recorrido a ser agregado. El mismo debe seguir cierta [estructura](https://www.npmjs.com/package/@usig-gcba/recorridos)\n\n#### ocultarRecorrido(recorrido: Object)\n*Remueve el recorrido del mapa*\n##### Parámetros\n * **recorrido**: `Object` recorrido a ser removido.\n\n#### getStaticImage()\n*Retorna un elemento canvas con la imágen del mapa*\n##### Return\n * **canvas**: `Promise