MapLibre

MapLibre permite cargar estilos de un servicio Mapbox Vector Tile, utilizando archivos de extensión .json.

La fuente de datos tiene que seguir una estructura determina, estructura del documento de estilo.

{
    "version": 8,
    "sources": {
        "my-source": {
            "type": "vector",
            "tiles": [
                "https://example.com/tiles/{z}/{x}/{y}.pbf"
            ]
        }
    },
    "layers": [
        {
            "id": "water",
            "type": "fill",
            "source": "my-source",
            "source-layer": "water",
            "paint": {
                "fill-color": "#0000FF",
                "fill-opacity": 0.3
            }
        },
        {
            "id": "buildings",
            "type": "fill",
            "source": "my-source",
            "source-layer": "building",
            "paint": {
                "fill-color": "#888888",
                "fill-opacity": 0.5
            }
        }
    ]
}

1.- En el constructor del mapa:

// En modo cadena 
const mapLibre_string = "MapLibre*LEGEND_NAME*https://demotiles.maplibre.org/style.json*NAME_TEST*false*false*true*false*false*W3siaWQiOiJjb2FzdGxpbmUiLCJwYWludCI6W3sicHJvcGVydHkiOiJsaW5lLWNvbG9yIiwidmFsdWUiOiIjMDAwIn0seyJwcm9wZXJ0eSI6ImxpbmUtd2lkdGgiLCJ2YWx1ZSI6N31dfSx7ImlkIjoiY291bnRyaWVzLWxhYmVsIiwicGFpbnQiOlt7InByb3BlcnR5IjoidGV4dC1jb2xvciIsInZhbHVlIjoicmVkIn1dfV0="

const map = IDEE.map({
  container: 'map',
  bbox: [268339.6976254622, 5219913.662610877, 347031.6182450511, 5241774.652700437],
  layers: ["OSM", mapLibre_string],
  projection: 'EPSG:3857*m',
});

// Instanciando la capa
const map2 = IDEE.map({
  container: 'map',
  bbox: [268339.6976254622, 5219913.662610877, 347031.6182450511, 5241774.652700437],
  layers: [ 'OSM', 
    new IDEE.layer.MapLibre({
      url: 'https://vt-mapabase.idee.es/files/styles/mapaBase_scn_color1_CNIG.json',
      name: 'Mapa Libre',
      legend: 'Mapa Libre'
  })
],
  projection: 'EPSG:3857*m',
});

2.- Mediante los métodos addMapLibre/addLayers:

// Instanciamos el mapa
const map = IDEE.map({
  bbox: [268339.6976254622, 5219913.662610877, 347031.6182450511, 5241774.652700437],
  container: 'map',
  projection: 'EPSG:3857*m',
});


const layer = new IDEE.layer.MapLibre({
  name: 'Mapa Libre DEMO',
  extract: true,
  url: 'https://demotiles.maplibre.org/style.json',
  legend: 'Mapa Libre DEMO Legend',
});

// La añadimos al mapa
map.addLayers(layer);
// También puede usarse map.addMapLibre(layer);
// En caso de que tuvieramos layer1, layer2 podríamos hacer
// map.addLayers([layer1, layer2]) o map.addMapLibre([layer1, layer2])

Parámetros:

• name: nombre de la capa.
• url: url del servicio.
• legend: Nombre asociado en el árbol de contenidos, si usamos uno.
• isBase: 'true' si es una capa base, 'false' en caso contrario.
• attribution: Atribución de la capa.
  • name. Nombre de la atribución
  • description. Descripción de la atribución.
  • url. URL de la atribución.
  • contentAttributions. Atribuciones por objetos geográficos, por defecto vacío.
  • contentType. Tipo de url de “contentAttributions” (KML o GeoJSON).
• visibility: 'true' si la capa es visible, 'false' si queremos que no lo sea. En este caso la capa sería detectado por los plugins de tablas de contenidos y aparecería como no visible.
• maxExtent: Restringe la visibilidad de la capa a una extensión.
• projection: Proyección de fuente.
• displayInLayerSwitcher: Indica si la capa se muestra en el selector de capas.
• extract: Opcional, Activa la consulta por clic en el objeto geográfico, por defecto verdadero.
  • Las capas MapLibre cuentan con métodos get y set para modificar el extract.

capa.extract = true; // activa consulta
capa.extract = false; // desactiva consulta
console.log(capa.extract); // muestra el estado de la propiedad

• template: Opcional Plantilla que se mostrará al consultar un objeto geográfico.
  • Las capas MapLibre cuentan con métodos get y set para modificar el template.

capa.template = `<div>My custom popup</div>`; // especifica la plantilla
console.log(capa.template); // muestra el estado de la propiedad

• maplibrestyle: Style JSON sin utilizar url.

  maplibrestyle: {
    version: 8,
    sources: {
      osm: {
        type: 'raster',
        tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
        tileSize: 256,
        attribution: '© OpenStreetMap Contributors',
        maxzoom: 19,
      },
    },
    layers: [
      {
        id: 'osm',
        type: 'raster',
        source: 'osm',
      },
    ],
  },

• options: Estas opciones se mandarán a la implementación de la capa.

  • minZoom: Zoom mínimo aplicable a la capa.
  • maxZoom: Zoom máximo aplicable a la capa.
  • minScale: Escala mínima.
  • maxScale: Escala máxima.
  • minResolution: Resolución mínima.
  • maxResolution: Resolución máxima.
  • opacity: Opacidad de capa, por defecto 1.
  • disableBackgroundColor: Oculta el fondo de la capa.
    • valor false, color gris de fondo.
    • valor true, se aplica transparencia.
    • valor undefined, color original (definido en el json).

• vendorOptions: Opciones para la biblioteca base (el código se envía directamente a la librería base para ejecutar la funcionalidad).

setPaintProperty y setLayoutProperty

Métodos creados para modificar los valores del json.

• setPaintProperty: Modifica los estilos de la capa.

maplibre.setPaintProperty('coastline', 'line-color', '#000');
maplibre.setPaintProperty('coastline', 'line-width', 7);
maplibre.setPaintProperty('countries-label', 'text-color', 'red');

• setLayoutProperty: Modifica las propiedades visuales de la capa.

maplibre.setLayoutProperty('fondo', 'visibility', 'visible');

No estará disponible el método .setStyle, en su lugar setMapLibreStyleFromId.

// Cambiar el json
 maplibre_001.maplibrestyle = 'https://demotiles.maplibre.org/style.json';

// Modificar estilos del json
const styles = [{
  id: 'coastline',
  paint: [{
    property: 'line-color', value: '#000',
  }, {
    property: 'line-width', value: 7,
  }],
}, {
  id: 'countries-label',
  paint: [{
    property: 'text-color', value: 'red',
  }],
}];
maplibre.setMapLibreStyleFromId(styles);

// Método get, parámetros: id || [id, id].
maplibre.getMapLibreStyleFromId('coastline')

Ejemplo:

const maplibre = new IDEE.layers.MapLibre({
  name: 'Mapa Libre',
  extract: true,
  // visibility: true,
  // maxExtent: [-1259872.4694101033, 4359275.566199489, -85799.71494979598, 4620384.454821652],
  url: 'https://vt-mapabase.idee.es/files/styles/mapaBase_scn_color1_CNIG.json',
  /*
maplibrestyle: {
    version: 8,
    sources: {
      osm: {
        type: 'raster',
        tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
        tileSize: 256,
        attribution: '© OpenStreetMap Contributors',
        maxzoom: 19,
      },
    },
    layers: [
      {
        id: 'osm',
        type: 'raster',
        source: 'osm',
      },
    ],
  },
  */
  legend: 'Mapa Libre',
}, {
  // opacity: 0.5,
  // minZoom: 5,
  // maxZoom: 7,
  // minScale: 2000000,
  // maxScale: 7000000,
  // minResolution: 705.5551745557614,
  // maxResolution: 2469.443110945165,
  // disableBackgroundColor: false, // Color Gris
  // disableBackgroundColor: true, // Aplicada Transparencia
  // disableBackgroundColor: undefined, // Color Original
});