Skip to content

Personalizar el mapa

gdtel-cnig-develop edited this page Mar 12, 2026 · 4 revisions

La personalización del mapa que queremos construir recae en las siguientes categorías:

  • Capas: Son los datos a mostrar y conforman el mapa que se representará. Actualmente, la API-IDEE acepta los principales orígenes de datos OGC.
  • Controles: Son las herramientas que incluye el mapa y que permiten trabajar con él, tales como herramientas de medición, de coordenadas, etc. Se dividen en dos categorías: controles básicos y plugins.
  • Opciones: Permiten establecer características concretas del mapa o del área a visualizar, como son el centrado en un punto, nivel de zool inicial, sistema de referencia, etc.
  • Internacionalización: Permiten establecer un idioma concreto al mapa, controles y plugins. Más información.
    • M.language.getTranslation([nombre_idioma]): Retorna un JSON con todas las traducciones.
    • M.plugin.[nombre_plugin].getJSONTranslations([nombre_idioma]): Retorna un JSON con las traducciones de un plugin.
    • M.language.addTranslation([nombre_idioma]): Permite establecer un idioma concretro al mapa, se tiene que declarar antes que M.map.
    • M.language.getLang(): Devuelve el idioma actual.
    • M.language.setLang(): Modifica el idioma.
M.language.addTranslation('ca', {
    "scale": {
        "title": "Escala",
        "scale": "Escala",
        "level": "Nivel"
    },
    "attributions": {
        "exception": {
            "impl": "La implementació no pot crear controls de Attribution.",
            "mode": "L'opció 'mode' no s'ha establert correctament. Consell: {mode: 1 | 2 | 3}.",
            "type": "L'opció 'type' no ha estat establerta. Quan l'opció 'url' és usada el plugin necessita l'opció 'type'. Valors = geojson | kml | topojson.",
            "layer_name": "L'opció 'layerName' no s'ha establert. Quan l'opció 'url' s'utilitza el connector necessita l'opció 'layerName'."
        },
        "attribution": "atribució",
        "tooltip": "Reconeixements"
    }
});

M.language.setLang('ca');

const mapa = new M.map({
    container: 'map',
    bbox: [-1715858.410945638, 4318997.846225591, 632287.0979749766, 4797187.895177655],
    controls: ['scale*true'],
});
  • Configuration: Por defecto la API-IDEE proporciona unas configuraciones por defecto: configuration.js

Para modificar esta configuración se tiene que hacer antes de crear el mapa "M.map". Por ejemplo:

M.config('tms', {
  base: 'TMS*PNOA-MA*https://tms-pnoa-ma.idee.es/1.0.0/pnoa-ma/{z}/{x}/{-y}.jpeg*true*false*19',
});

const map = M.map({
  container: 'mapjs',
  controls: ['scale'],
  zoom: 6,
  bbox: [-3132050.401125163, 3036505.360983581, 983484.0466877755, 5563700.732843714],
});

Ejemplos

Configuración de visualizador: https://componentes.idee.es/GaleriaEjemplos_APICNIG/ejemplos/configuracionVisualizador01.html
Configuración de idioma a través de una extensión personalizada:
https://componentes.idee.es/GaleriaEjemplos_APICNIG/ejemplos/cambioIdioma01.html
Extensión fuentes de datos: https://componentes.idee.es/GaleriaEjemplos_APICNIG/ejemplos/attributions01.html

1.INICIO
   1.1. Componentes de la API-IDEE
   1.2. Documentación y Puntos de acceso
   1.3. Primeros pasos
   1.4. Diagrama API IDEE

2. MAPA
2.1. Capas

 ■ 2.1.1. Fuentes
   • 2.1.1.1. Capas vectoriales
     + Vector
     + WFS
     + GeoJSON
     + KML
     + MVT
     + OGCAPIFeatures
     + MBTilesVector
     + GenericVector
     + MapLibre
   • 2.1.1.2. Capas ráster
     + WMS
     + WMC
     + WMTS
     + TMS
     + XYZ
     + OSM
     + MBTiles
     + GenericRaster
     + GeoTIFF
     + GeoPackageTile
   • 2.1.1.3. Capas 3D
     + Terreno
     + 3DTiles
       + info 3DTiles
   • 2.1.1.4. Capas rápidas
   • 2.1.1.5. Grupo de capas
   • 2.1.1.6. Secciones
   • 2.1.1.7. GeoPackage
   • 2.1.1.8. Capas externas

 ■ 2.1.2. Simbolización
   • 2.1.2.1. Genérica
     + Puntos
     + Líneas
     + Polígonos
   • 2.1.2.2. Básica
     + Puntos
     + Líneas
     + Polígonos
   • 2.1.2.3. Avanzada
     + Coropletas
     + Proporcional
     + Categorías
     + Estadísticos
     + Mapas de Calor
     + Cluster
     + Línea de flujo
     + Composición

 ■ 2.1.3. Filtros

2.3.-Plugins

  > Creación de plugin en cliente

  » Tutorial de creación de un plugin

2.4. Paneles

  » Creación de panel desde cero sin controles

  » Tutorial Panel de un único control

  » Tutorial Panel de un único control con más de un botón

  » Tutorial Panel con más de un control

2.5. Eventos

  » Gestión de eventos
  » Gestión de eventos en controles personalizados

    2.6. Internacionalización

    2.7. Configuración

    2.8. Acceso librerías base

3. UTILIDADES

4. PROXY

5. API REST
 5.1. Parametrización API-REST
 5.2. Base de Datos API-REST
 5.3. API REST Actions
 5.4. Servicio de correos electrónicos
 5.5. Capas rápidas
 5.6. Parametrización API-REST plugins externos

6. PARAMETRIZACIÓN VISUALIZADORES

7. SOLUCIÓN DE PROBLEMAS

8. PROCESO DE VERSIONADO

9. GUÍA DE DESARROLLO
  > Guía para colaborar en el repositorio
  > Guía para el desarrollo de API-IDEE
  > Guía de test de API-IDEE
  » Tutorial desarrollo del núcleo de API-IDEE - (Cliente)
  > Guía de desarrollo de componentes
  » Tutorial desarrollo del núcleo de API-IDEE - (Servidor)
  > Guía de desarrollo de plugins
  » Tutorial desarrollo de plugins ya creados
  » Tutorial desarrollo de nuevos plugins
  > Guía de desarrollo de visualizadores con React

  > Compilación proyecto API-IDEE

Clone this wiki locally