Never Push to Master

    @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.

    Install

    npm i @usig-gcba/mapa-interactivo

    DownloadsWeekly Downloads

    56

    Version

    1.2.5

    License

    USIG

    Unpacked Size

    4.99 MB

    Total Files

    160

    Last publish

    Collaborators

    • sebastian.oscar.lopez
    • aanthieni
    • danieldcm