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 = M.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 = M.map({
  container: 'map',
  bbox: [268339.6976254622, 5219913.662610877, 347031.6182450511, 5241774.652700437],
  layers: [ 'OSM', 
    new M.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 = M.map({
  bbox: [268339.6976254622, 5219913.662610877, 347031.6182450511, 5241774.652700437],
  container: 'map',
  projection: 'EPSG:3857*m',
});


const layer = new M.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.
• transparent: 'false' si es una capa base, 'true' en caso contrario.
• 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 click en el objeto geográfico, por defecto falso.
• 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 M.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
});