How to add my styled mapbox vector maps to openlayers3

1
votes

I tried using this example http://openlayers.org/en/master/examples/mapbox-vector-tiles.html

And it works well.

I have now styled my own map in Mapbox studio online.

I am not able to add my styled map in this example because there is a style function createMapboxStreetsV6Style() in the example which I am not able to get for my styles.

Any idea how I can add my styles mapbox vector map to openlayers 3?

Any help would be appreciated.

2
mapboxopenlayers-3
The function is found here: github.com/openlayers/ol3/blob/master/examples/resources/… – Brian Schantz

2 Answers

0
votes

This is now possible using ol-mapbox-style.

I've recently found an issue, however, it should not stop you from using this awesome package. I'm sure the maintainers will address that issue in no time.

-2
votes

Depending on what you are using the map for, you can replace Openlayers for Mapbox-GL-JS as the maps will be much more fluid and better performing overall. Here's an example to get you started if you're interested.

Otherwise, I'll point you to one of the help guides on Mapbox.com that walks through the steps to style a tile map and use it in Openlayers 3.0.

Hope this helps

EDIT: A better example to work off as an example:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>OpenLayers MapBox Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.15.1/ol.js"></script>
  <link url="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.15.1/ol.css">
</head>
<body>
    <div id="map"></div>
</body>


var map = new ol.Map({
layers: [
new ol.layer.Tile({
  source: new ol.source.XYZ({
    tileSize: [512, 512],
    url: 'https://api.mapbox.com/styles/v1/mapbox/streets-v8/tiles/{z}/{x}/{y}?access_token=Your access token here'
  })
})
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});

and lastly CSS:

body { margin:0; padding:0; }
#map { 
  position:absolute; 
  top:0; 
  bottom:0; 
  width:100%; 
}