I'd like to display a Mapbox GL JS map with a white background, rather than a map background.
This is my code right now:
mapboxgl.accessToken = 'mytoken';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
minZoom: 4,
maxZoom: 14,
center: [-2.0, 53.3],
});
How can I replace the light background with plain white? If I change style to white then I get an error.
You don't need to create the style in Mapbox Studio, you can create it in the browser:
var map = new mapboxgl.Map({
container: 'map',
style: {
version: 8,
sources: {
},
layers: [
{
id: 'background',
type: 'background',
paint: {
'background-color': 'white'
}
}
]
},
});
I figured this out. You need to make your own "style" in Mapbox Studio and set it to be plain white, then add this in the style property of the map.
Related
I have published a shapefile as a vector tile on GeoServer according to this. Now, how can I add this layer to Mapbox?
I would be very pleased if you can help me.
I have been trying to get that to work and for a vector layer you must specify 'source-layer' attribute which is the name of a layer on your GeoServer (ie. 'states' if using topp workspace) here is a code example that eventually worked for me:
<script>
mapboxgl.accessToken =
'<YOUR MAPBOX TOKEN HERE>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-100, 40],
zoom: 12,
});
map.on('load', function () {
map.addSource('wms-test-source', {
type: 'vector',
// use the tiles option to specify a WMS tile source URL
// https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/
tiles: [
'http://<YOUR GEOSERVER ADDRESS>:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=topp:states&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}',
],
'minZoom': 0,
'maxZoom': 14,
});
map.addLayer(
{
'id': 'wms-test-layer',
'type': 'fill',
'source': 'wms-test-source',
'source-layer': 'states',
'paint': { 'fill-color': '#00ffff' },
}
//'aeroway-line'
);
});
</script>
For more info go to GeoServer documentation at GeoServer - Mapbox Style Specification
The code provided at the link actually shows how to add the GeoServer layer to your Mapbox map. Assuming that you want to add the layer to your map with Mapbox GL JS (since your post is tagged with mapbox-gl-js, your code would look something like this:
mapboxgl.accessToken = /* YOUR MAPBOX ACCESS TOKEN HERE */;;
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});
// Add the GeoServer layers as a source to your map.
map.addSource(
"<source-name>": {
"type": "vector",
"tiles": [
"http://localhost:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS
&VERSION=1.0.0&LAYER=<workspace>:<layer>&STYLE=&TILEMATRIX=EPSG:900913:{z}
&TILEMATRIXSET=EPSG:900913&FORMAT=application/vnd.mapbox-vector-tile
&TILECOL={x}&TILEROW={y}"
],
"minZoom": 0,
"maxZoom": 14
}
);
// Style the GeoServer source in order to display it visually on your map
map.addLayer({
'id': 'geoserver-layer',
'type': /* fill in based on options here: https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#type */,
'source': '<source-name>'
/* Add any additional properties, full details here: https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#type */
});
In short, the GeoServer documentation link provides the code for adding a source to your map, and then you should add a layer to style the source visually on your map.
I'd recommend taking a look at the many Mapbox GL JS examples to get a sense of how sources and layers can be added, styled, modified, etc.
I am a beginner in mapbox JS GL. I am looking for a way to give the user the opportunity to change visibility of layer in mapbox on button click.
In MapBox studio I add to Basic style visible layer "regions". I tried to do so :
<script> ...
var mapp = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/terentev/ck2so0c4h1q5x1cqow0aj9nh8',
center: [34.047, 63.779],
zoom: 5.41
});
mapp.setLayoutProperty('regions','visibility','none');
But the layer does not disappear.
And when I try get layers from style:
var v = mapp.getStyle().layers;
I can't. How to do it right?
Thanks in advance!
This is layer 'regions', added to Basic style :
layer 'regions' in mapbox studion
I tried like this:
var v = mapp.getLayoutProperty('regions', 'visibility');
alert('visibility '+ v );
mapp.setLayoutProperty('country-label','visibility','visible');
v = mapp.getLayoutProperty('regions', 'visibility');
alert('visibility '+ v );
On first alert I get "visibility undefined"
but there is no result on second alert at all
Try this:
var mapp = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/terentev/ck2so0c4h1q5x1cqow0aj9nh8',
center: [34.047, 63.779],
zoom: 5.41
});
mapp.on('load', () => {
mapp.setLayoutProperty('regions','visibility','none');
})
It just looks like you're invoking setLayoutProperty before the map has properly loaded
I am trying to display my custom map from Mapbox in Openlayers 5.3.0. I am trying to follow the example HERE.
I am able to show the standard Mapbox background, but as soon as I change to my personal map style it breaks and shows a blank screen...
Here is example code:
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic3ZlbnB0IiwiYSI6ImNqc2Vxa3Q5MzBqcTAzeW1kOWRiajV4ZzYifQ.xpDqTM6B41sS6QjZPwb6yQ' //this works
/*
url: 'https://api.mapbox.com/styles/v1/svenpt/cjsbq6vq716ye1fpgw10kvitp.html?access_token=pk.eyJ1Ijoic3ZlbnB0IiwiYSI6ImNqc2Vxa3Q5MzBqcTAzeW1kOWRiajV4ZzYifQ.xpDqTM6B41sS6QjZPwb6yQ' //this doesn't work
url: 'https://api.mapbox.com/styles/v1/svenpt/cjsbq6vq716ye1fpgw10kvitp.html/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic3ZlbnB0IiwiYSI6ImNqc2Vxa3Q5MzBqcTAzeW1kOWRiajV4ZzYifQ.xpDqTM6B41sS6QjZPwb6yQ' //this doesn't work either
*/
})
})
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
Credits to Mike for the answer!
The correct url is:
url: 'https://api.mapbox.com/styles/v1/svenpt/cjsbq6vq716ye1fpgw10kvitp/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic3ZlbnB0IiwiYSI6ImNqc2Vxa3Q5MzBqcTAzeW1kOWRiajV4ZzYifQ.xpDqTM6B41sS6QjZPwb6yQ'
I had to delte the .html from:
url: 'https://api.mapbox.com/styles/v1/svenpt/cjsbq6vq716ye1fpgw10kvitp.html/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic3ZlbnB0IiwiYSI6ImNqc2Vxa3Q5MzBqcTAzeW1kOWRiajV4ZzYifQ.xpDqTM6B41sS6QjZPwb6yQ'
As of openlayers 3.11, raster reprojection is introduced. I used OSM as a background layer and it works perfectly on some projection, such as EPSG:25832. Now I need to work on another projection EPSG:2326 but it shows some white gaps between map tiles when zoomed into the map.
I created a jsfiddle for reference, can someone help? Thanks!
var myMap = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: [837814, 818872],
projection: 'EPSG:2326',
zoom: 19
})
});
https://jsfiddle.net/86Lu9nd7/
This is a bug in OpenLayers. See https://github.com/openlayers/ol3/issues/4681 for its status.
this is a part of my leaflet code :
// Init
var map = L.map('map', {
center: [46.7, 2.5],
zoom: 6,
layers: [test, boutiques]
});
L.tileLayer('http://otile1.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// overlays
var overlays = {
"Test": test,
"Boutiques": boutiques
};
L.control.layers(overlays).addTo(map);
I want that a overlay can be displayed one by one (via radio button), the problem is that at loading the "boutiques" overlay is selected but "test" is also displayed.. How to put "test" hidden by default ?
Just initialize map without test:
var map = L.map('map', {
center: [46.7, 2.5],
zoom: 6,
layers: [boutiques]
});
JSFiddle example.