How to change map style in mapbox without changing the geoJson inserted
Question
I have tried changing map styles like streets to satellite, dark, bright etc at runtime using radio boxes. But when i load a geojson file to the map, it is showing only on the current map style selected. When i change the map style, the geoJson file is gone. Is there any way that, i could retain the geoJson file in all map styles, even when i change the styles?
var map; mapboxgl.accessToken = 'pk.eyJ1Ijoic2FkaXF1ZSIsImEiOiJjajlrc3V0bjkxaGxlMzNzMjBwdmZ3NmF1In0.KOe_ASpXmNUF_TmN6h2CHw'; map = new mapboxgl.Map({ container: 'map', // container element id style: 'mapbox://styles/mapbox/light-v9', center: [90.899, 26.372], // initial map center in [lon, lat] zoom: 7 }); var layerList = document.getElementById('menu'); var inputs = layerList.getElementsByTagName('input'); function switchLayer(layer) { var layerId = layer.target.id; map.setStyle('mapbox://styles/mapbox/' + layerId + '-v9'); } for (var i = 0; i < inputs.length; i++) { inputs[i].onclick = switchLayer; } function loadRails() { mapboxgl.accessToken = 'pk.eyJ1Ijoic2FkaXF1ZSIsImEiOiJjajlrc3V0bjkxaGxlMzNzMjBwdmZ3NmF1In0.KOe_ASpXmNUF_TmN6h2CHw'; map.addLayer({ id: 'collisions', type: 'line', source: { type: 'geojson', data: 'testRails.geojson' // replace this with the url of your own geojson } }, 'admin-2-boundaries-dispute'); }
<html> <head> <title>Change a map's style</title> <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.1/mapbox-gl.js'></script> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.1/mapbox-gl.css' rel='stylesheet' /> <style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } </style> </head> <body> <br><div id='map'></div><br> <button style="position:relative;" onclick="loadRails()">load geoJson</button> <div id='menu' style="position:relative;"> <input id='basic' type='radio' name='rtoggle' value='basic' checked='checked'> <label for='basic'>basic</label> <input id='streets' type='radio' name='rtoggle' value='streets'> <label for='streets'>streets</label> <input id='bright' type='radio' name='rtoggle' value='bright'> <label for='bright'>bright</label> <input id='light' type='radio' name='rtoggle' value='light'> <label for='light'>light</label> <input id='dark' type='radio' name='rtoggle' value='dark'> <label for='dark'>dark</label> <input id='satellite' type='radio' name='rtoggle' value='satellite'> <label for='satellite'>satellite</label> </div> </body> </html>
3 answers
solution1
2 2017-11-18 07:39:49
You'll have to instantiate the map again with the new style.
// Initially
var map = new mapboxgl.Map({
// Whatever options
style: 'some-style'
});
// On style change, remove map and re-initialize
map.remove();
map = new mapboxgl.Map({
// Options,
style: 'some-other-style'
});
solution2
-1 2017-11-18 07:38:54
This is will documented over here and here . It seems to be working as designed.
I think, although it sounds counter-intuitive, it would be better to redraw. I quote the poster here
I've since removed class level style layers and sources variables and am reloading data on every style change in mapViewDidFinishLoadingMap. While inconvenient, at least it's stable this way. Sorry for the noise. Looking forward to this feature.
solution3
-1 ACCPTED 2017-11-21 08:53:15
We can use "Mapbox js" for changing style without changing the geoJson file in it.
For Adding styles : https://www.mapbox.com/mapbox.js/example/v1.0.0/toggle-baselayers/
For Adding geoJson file : https://www.mapbox.com/mapbox.js/example/v1.0.0/geojson-marker-from-url/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.