Composite of multiple sources about ol-mapbox-style HOT 15 CLOSED

For this you'd have to create two layers, one with a source with the 1st url and one with the 2nd. Then assign both layers the same style.

from ol-mapbox-style.

It seems that it does not work with a terrain data source.

from ol-mapbox-style.

Can you share your style

from ol-mapbox-style.

Yes, it's mapbox/light-v9

from ol-mapbox-style.

Ok, this explains it. Only vector sources are supported, no raster sources.

from ol-mapbox-style.

I don't understand? light-v9 is made up of Mapbox Streets V7 & Vector Terrain V2. "Mapbox Terrain provides hillshades, elevation contours, and landcover data all in vector form" https://www.mapbox.com/vector-tiles/mapbox-terrain/

from ol-mapbox-style.

Ah I see. But like I already suggested: can't you just create two layers, one with the streets source and one with the terrain? You'd have to use different styles though. One set to the streets source, and one to terrain. As long as the style does not have a layer order where streets and terrain layers are heavily mixed, you should get a nice visual result when you set the streets layer above the terrain layer.

from ol-mapbox-style.

I finally found some time to test the light-v9 style. It did not work because some aspects of the style spec were not supported yet. I fixed this with 662076f, so v0.0.7 should work for you.

from ol-mapbox-style.

Thanks for updating the tool. I am still not able to get light-v9 working, can you provide an example? It might be useful to have such an example in the docs.

from ol-mapbox-style.

This code works for me:

var tilegrid = ol.tilegrid.createXYZ({tileSize: 512, maxZoom: 22});
var layer = new ol.layer.VectorTile({
  source: new ol.source.VectorTile({
    attributions: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
      '© <a href="http://www.openstreetmap.org/copyright">' +
      'OpenStreetMap contributors</a>',
    format: new ol.format.MVT(),
    tileGrid: tilegrid,
    tilePixelRatio: 8,
    tileLoadFunction: function(tile, url) {
      tile.setLoader(function() {
        Promise.all([
          fetch(url),
          fetch(url.replace('mapbox-terrain-v2', 'mapbox-streets-v7'))
        ])
        .then(function(responses) {
          return Promise.all([responses[0].arrayBuffer(), responses[1].arrayBuffer()]);
        })
        .then(function(results) {
          var format = tile.getFormat();
          var features = format.readFeatures(results[0])
          .concat(format.readFeatures(results[1]));
          tile.setFeatures(features);
          tile.setProjection(format.readProjection(results[0]));
        });
      });
    },
    url: 'https://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-terrain-v2/' +
        '{z}/{x}/{y}.vector.pbf?access_token=' + key
  })
});
var map = new ol.Map({
  target: 'map',
  view: new ol.View({
    center: [1822363, 6141705],
    zoom: 11,
    maxResolution: 78271.51696402048
  })
});

fetch(baseUrl + '?access_token=' + key).then(function(response) {
  response.json().then(function(glStyle) {
    glStyle.sprite = baseUrl + '/sprite?access_token=' + key;
    olms.applyStyle(layer, glStyle, 'composite').then(function() {
      map.addLayer(layer);
    });
  });
});

The trick is the custom tile loader, which combines features from the terrain-v2 and streets-v7 sources.

from ol-mapbox-style.

Thanks, worked!! This is really great!!

from ol-mapbox-style.

Does this still work? I'm trying to render the mapbox/light-v10 style

     import VectorTileLayer from 'ol/layer/VectorTile';
     import VectorTile from 'ol/source/VectorTile';
     import MVT from 'ol/format/MVT';
     import {createXYZ} from 'ol/tilegrid';
     import {applyStyle} from 'ol-mapbox-style';
     ...
     const baseURL = 'https://api.mapbox.com/styles/v1/mapbox/light-v10';
     const accessToken = '<my_access_token>';
     const tilegrid = createXYZ({tileSize: 512, maxZoom: 22});
     const baseLayer = new VectorTileLayer({
       source: new VectorTile({
         format: new MVT(),
         tileGrid: tilegrid,
         tilePixelRatio: 8,
         tileLoadFunction: function(tile, url) {
           tile.setLoader(function() {
             Promise.all([
               fetch(url),
               fetch(url.replace('mapbox-terrain-v2', 'mapbox-streets-v8'))
             ])
             .then(function(responses) {
               return Promise.all([responses[0].arrayBuffer(), responses[1].arrayBuffer()]);
             })
             .then(function(results) {
               var format = tile.getFormat();
               var features = format.readFeatures(results[0])
               .concat(format.readFeatures(results[1]));
               tile.setFeatures(features);
               tile.setProjection(format.readProjection(results[0]));
             });
           });
         },
         url: 'https://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-terrain-v2/' +
             '{z}/{x}/{y}.vector.pbf?access_token=' + accessToken
       })
     });
 
       fetch(baseURL + '?access_token=' + accessToken).then(function(response) {
         response.json().then(function(glStyle) {
           glStyle.sprite = baseURL + '/sprite?access_token=' + accessToken;
           applyStyle(baseLayer, glStyle, 'composite').then(function() {
             map.addLayer(baseLayer);
           });
         });
       });

The error I'm getting is: Unhandled Rejection (TypeError): Cannot read property '3' of undefined in getHeight src/extent.js:568

from ol-mapbox-style.

This has gotten much easier:

import 'ol/ol.css';
import FullScreen from 'ol/control/FullScreen';
import apply from 'ol-mapbox-style';

const accessToken = '<your access token here>'

apply(
  'map',
  'https://api.mapbox.com/styles/v1/mapbox/light-v10?access_token=' + accessToken
);

from ol-mapbox-style.

Thank you, this is great. I think this would make a good OpenLayers example.

Is it possible to always make it so the mapbox light (or whatever) layer is always put first in the map's layer stack? I had an idea that i could iterate through the map's layers and if mapbox-source: "composite" is a property of the layer, move it to the first position. However, I was also noticing that the layers aren't immediately available. Is there a good way to know when the apply() is done, other than a setTimeout(() => {}, 200) which seems problematic?

from ol-mapbox-style.

No need to use setTimeout(). apply() returns a promise. You can see how that works in https://openlayers.org/en/latest/examples/mapbox-style.html. In the resolver of the promise, you can also add your additional layers. That way, the composite source will be at the bottom of the layer stack, and the layers you add in the resolver will be above.

from ol-mapbox-style.