@usig-gcba/mapa-interactivo

1.2.5 • Public • Published

Mapa Interactivo

Una manera simple de crear un mapa de la Ciudad de Buenos Aires y alrededores utilizando la libreria leaflet.

Instalación

npm install @usig-gcba/mapa-interactivo

Cómo usarlo

ES6

import MapaInteractivo from '@usig-gcba/mapa-interactivo'


const mapaInteractivo = new MapaInteractivo("mapa-id", {center: [-34.62, -58.44]});

Es importante que el div contenedor contenga las dimensiones deseadas previamente a inicializar el mapa.

API

new MapaInteractivo(id: String, opciones?: Object) => MapaInteractivo

  • id: id del elemento html donde se debe insertar el mapa
  • opciones: objecto de configuracion con cualquiera de las siguientes propiedades:
Opcion Tipo Default Descripcion
onClick function null Callback llamado al hacer click en el mapa
onContextMenu function null Callback llamado al hacer click derecho sobre el mapa
onMoveStart function null Callback llamado al comienzo de un movimiento generado en el mapa (tanto por zoom como por desplazamiento)
onMoveEnd function null Callback llamado al final de un movimiento generado en el mapa
onMarkerDragEnd function null Callback llamado luego de arrastrar un marcador
onFeatureClick function null Callback llamado al seleccionar un feature
onInactivateMarker function null Callback llamado al desactivar un marcador
center [Number, Number] [-34.62, -58.44] Centro del mapa al iniciar
zoomControl boolean false Mostrar el control de zoom cuando es true
zoom Number 13 Nivel de zoom del mapa al iniciar
touchZoom boolean true Habilita zoom mediante eventos touch cuando es true
tap boolean true Habilita eventos touch cuando es true
attributionControl boolean false Se muestra la informacion de atribucion
markerZoomInLevel Number 15 Nivel en el que se debe hacer zoom sobre un marcador
featureZoomInLevel Number 17 Nivel en el que se debe hacer zoom sobre un feature
language String es Idioma de los mensajes del mapa
fromMarker Icon alt text Icono del marcador de inicio al mostrar un recorrido
toMarker Icon alt text Icono del marcador de fin al mostrar un recorrido
activeMarker Icon alt text Icono del marcador activo
marker Icon alt text Icono del marcador default
opciones.baseLayer?: Object
Opcion Tipo Default Descripcion
params.maxZoom Number 18 Zoom máximo sobre el mapa
params.minZoom Number 9 Zoom minimo sobre el mapa
opciones.texts?: Object

Objeto conteniendo los textos definidos para cada idioma. Por default se encuentran los siguientes textos:

   texts: {
     es: {
       loadingLayers: 'Cargando capas...',
       loadingMaps: 'Cargando mapas...',
       loadingInformation: 'Cargando información...',
       errorLoadingInformation: 'Se produjo un error al acceder a la información. Reintente más tarde.'
     },
     en : {
       loadingLayers: 'Loading layers...',
       loadingMaps: 'Loading maps...',
       loadingInformation: 'Loading information...',
       errorLoadingInformation: 'An error ocurred. Please try again later.'
     }
   }

getMapa() => LeafletMap

Retorna la instancia interna del mapa

addPublicLayer(layerName: String, options?: Object)

Agrega una capa en base a su nombre

  • layerName: String indicando el nombre de la capa perteneciente a una de las capas disponibles.
  • options: Object conteniendo atributos opcionales de la capa
    • clustering: boolean si la capa debe ser clusterizada
    • callAPIOnClick: boolean en caso de true, se hace un llamado a la API especificada al hacer click sobre el mapa
    • onClickAPI: String API a la que se debe llamar al hacer click sobre el mapa
    • layerId: String identificador de la capa
    • baseLayer: en caso de que se incluya este parametro, la capa sera agregada como una capa base.
      • Posibles tipos

removePublicLayer(layerName: String)

Remueve una capa en base a su nombre

  • layerName: String nombre de la capa

addVectorTileLayer(layerId: String, options?: Object)

Agrega una capa de mosaicos vectoriales. Se usa para poder cargar datos vectoriales de gran volumen

  • layerId: String Nombre de la capa, se usa de identificador.

  • options: Object conteniendo atributos opcionales de la capa.

  • Posibles opciones

    • url: String (requerido) Dirección del origen de los datos con los parámetros de ZXY en forma de plantilla.
    • style: Object Estilo para mostrar los datos en formato L.Path. Documentación
    • displayPopup: Object En caso de querer mostrar la información de la capa en un popup.

Opciones de displayPopup

Opcion Tipo Default Descripcion
content String Contenido del popup, se acepta HTML y los atributos se usan con placeholders entre llaves. Ejemplo {atributo}. Referencia
onEvent String click click o mouseover

Ejemplo

map.addVectorTileLayer('parcelas',{
  url: 'http://example.com/tileserver/parcelas/{z}/{x}/{y}.pbf',
  displayPopup:{ content:'<b>Comuna: </b>{parcela} <br> <b>Barrio: </b>{barrios}', onEvent:'click'},
  style:{
    parcelas:function(properties, zoom, geometryDimension){
      return {
             weight: (zoom > 12)? 2 : 0.5,
             fillColor: getColor(properties.comuna),
             fillOpacity: 0.8,
             stroke: true,
             color:'#FF00FF',
             dashArray: '2',
             fill: true
        }
    }
  }
});

removeVectorTileLayer(layerId: String)

Remueve una capa de tiles vectoriales en base a su nombre

  • layerId: String nombre de la capa

setBaseLayer()

Agrega la capa base default del mapa

setBaseLayer(baselayer: L.tileLayer)

Cambia la capa base del mapa

Parámetros
  • baseLayer: L.tileLayer la nueva base a agregar

setBaseLayer(baselayer: Object)

Cambia la capa base del mapa

Parámetros
  • baseLayer: Object la nueva base a agregar conteniendo:
    • uri: String uri utilizado para descargar la capa
    • options: Object opciones de L.tileLayer

addMarker(latlng: Object, visible: boolean, draggable: boolean, goTo: boolean, activate: boolean, clickable: boolean, options: Object) => markerId: Number

Agrega un marcador en la posicion especificada, retornando su id

Parámetros
  • latlng: Object posicion del marcador
    • lat: Number latitud
    • lng: Number longitud
  • visible: boolean indicando si el marcador debe estar visible
  • draggable: boolean indicando si el marcador puede ser arrastrado
  • goTo: boolean indicando si el mapa debe recentrarse en el marcador
  • activate: boolean indicando si se debe activar el marcador
  • clickable: boolean indicando si el marcador puede ser clickeado
  • options: Object datos a guardar dentro del marcador
Return
  • Number id del marcador generado

addPopup(latlng: Object, content: String|HtmlContent|Funtion, options: Object)

Agrega un popup en la posicion especificada

Parámetros
  • latlng: Object posicion del popup
    • lat: Number latitud
    • lng: Number longitud
  • content: String Contenido Html del popup
  • options: Object Opciones heredadas de L.popup

selectMarker(markerId: Number)

Selecciona el marcador indicado

Parámetros
  • markerId: Number id del marcador a seleccionar

isMarkerActive(markerId: Number) => boolean

Pregunta si el marcador esta activo

Parámetros
  • markerId: Number id del marcador a analizar

removeMarker(markerId: String)

Remueve el marcador indicado

Parámetros
  • markerId: Number id del marcador a remover
Return
  • seleccionado: boolean indicando si el marcador esta seleccionado

addLocationMarker(position: Object, recenter: boolean, zoomIn: boolean) => L.Marker

Agrega al mapa un marcador de ubicación actual en la posicion especificada

Parámetros
  • position: Object posicion del marcador
    • coords: Object
      • latitude: Number latitud
      • longitude: Number longitud
  • recenter: boolean indicando si el mapa debe recentrarse en la posicion del marcador
  • zoomIn: boolean indicando si se debe ajustar el nivel de zoom
Return
  • marker: L.marker marcador agregado

mostrarRecorrido(recorrido: Object)

Agrega un recorrido al mapa

Parámetros
  • recorrido: Object recorrido a ser agregado. El mismo debe seguir cierta estructura

ocultarRecorrido(recorrido: Object)

Remueve el recorrido del mapa

Parámetros
  • recorrido: Object recorrido a ser removido.

getStaticImage()

Retorna un elemento canvas con la imágen del mapa

Return
  • canvas: Promise<canvas> Promesa que resuelve con el canvas conteniendo la imágen.

Readme

Keywords

Package Sidebar

Install

npm i @usig-gcba/mapa-interactivo

Weekly Downloads

1

Version

1.2.5

License

USIG

Unpacked Size

4.99 MB

Total Files

160

Last publish

Collaborators

  • dgcinfo_npm
  • aanthieni
  • danieldcm