Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @usig-gcba/mapa-interactivo with all npm packages installed. Try it out:

var mapaInteractivo = require("@usig-gcba/mapa-interactivo")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@usig-gcba/mapa-interactivo v1.2.5

Mapa interactivo

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:
OpcionTipoDefaultDescripcion
onClickfunctionnullCallback llamado al hacer click en el mapa
onContextMenufunctionnullCallback llamado al hacer click derecho sobre el mapa
onMoveStartfunctionnullCallback llamado al comienzo de un movimiento generado en el mapa (tanto por zoom como por desplazamiento)
onMoveEndfunctionnullCallback llamado al final de un movimiento generado en el mapa
onMarkerDragEndfunctionnullCallback llamado luego de arrastrar un marcador
onFeatureClickfunctionnullCallback llamado al seleccionar un feature
onInactivateMarkerfunctionnullCallback llamado al desactivar un marcador
center[Number, Number][-34.62, -58.44]Centro del mapa al iniciar
zoomControlbooleanfalseMostrar el control de zoom cuando es true
zoomNumber13Nivel de zoom del mapa al iniciar
touchZoombooleantrueHabilita zoom mediante eventos touch cuando es true
tapbooleantrueHabilita eventos touch cuando es true
attributionControlbooleanfalseSe muestra la informacion de atribucion
markerZoomInLevelNumber15Nivel en el que se debe hacer zoom sobre un marcador
featureZoomInLevelNumber17Nivel en el que se debe hacer zoom sobre un feature
languageStringesIdioma de los mensajes del mapa
fromMarkerIconalt textIcono del marcador de inicio al mostrar un recorrido
toMarkerIconalt textIcono del marcador de fin al mostrar un recorrido
activeMarkerIconalt textIcono del marcador activo
markerIconalt textIcono del marcador default
opciones.baseLayer?: Object
OpcionTipoDefaultDescripcion
params.maxZoomNumber18Zoom máximo sobre el mapa
params.minZoomNumber9Zoom 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

OpcionTipoDefaultDescripcion
contentStringContenido del popup, se acepta HTML y los atributos se usan con placeholders entre llaves. Ejemplo {atributo}. Referencia
onEventStringclickclick 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.
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free