You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm beginners of Mapbox, I saw a demo in set-config-property/. So I was wondering if it is possible to change the style of map while also change the config option such as lightPresets. So I made MWE here. If I don't change the style of the basemap, I will get imports of a map like that: .
But if I change the style of the basemap to satellite-streets-v12 or other value, the imports will miss and the function of setConfigProperty(importId,config, value) will loss. So how can I solve this problem?
The outputs of console is the result of map.style.stylesheet and map.style.stylesheet.imports. The main question is when I try to change the map style from basemap to other..., the structure of imports will change and I was not able to get the importID of other style.
MWE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Persist sources and layers when switching a map's base style</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<style>
#menu {
position: absolute;
background: #efefef;
padding: 10px;
font-family: 'Open Sans', sans-serif;
}
#optionMenu {
position: absolute;
top: 100px;
background: #efefef;
padding: 10px;
font-family: 'Open Sans', sans-serif;
}
.select-large {
font-size: 30px;
}
</style>
<div id="map"></div>
<div id="menu">
StyleMenu
<select name="styleMenu" id="styleMenu" class="select-large">
<option value="satellite-streets-v12">Satellite</option>
<option value="light-v11">light-v11</option>
<option value="streets-v12">street-v12</option>
<option value="outdoors-v12">outdoor</option>
</select>
</div>
<div id="optionMenu">
lightPresetMenu
<select name="lightPresets" id="lightPresets" class="select-large">
<option value="dusk">dusk</option>
<option value="dawn">dawn</option>
<option value="day">day</option>
<option value="night">night</option>
</select>
</div>
<script>
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvODg2NiIsImEiOiJjbGhzcWowMHUwYTNyM2VwNXZhaXhjd3Q4In0.FEh2q7sEW88Z1B5GcK_TDg';
const map = new mapboxgl.Map({
container: 'map', // container ID
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/standard', // style URL
center: [-122.486052, 37.830348],
zoom: 14,
projection: 'mercator'
});
// Add GeoJSON source and layer
function addAdditionalSourceAndLayer() {
map.addSource('routeSource', {
'type': 'geojson',
'data': {
'type': 'Feature',
'properties': {},
'geometry': {
'type': 'LineString',
'coordinates': [
[-122.48369693756104, 37.83381888486939],
[-122.48348236083984, 37.83317489144141],
[-122.48339653015138, 37.83270036637107],
[-122.48356819152832, 37.832056363179625],
[-122.48404026031496, 37.83114119107971],
[-122.48404026031496, 37.83049717427869],
[-122.48348236083984, 37.829920943955045],
[-122.48356819152832, 37.82954808664175],
[-122.48507022857666, 37.82944639795659],
[-122.48610019683838, 37.82880236636284],
[-122.48695850372314, 37.82931081282506],
[-122.48700141906738, 37.83080223556934],
[-122.48751640319824, 37.83168351665737],
[-122.48803138732912, 37.832158048267786],
[-122.48888969421387, 37.83297152392784],
[-122.48987674713133, 37.83263257682617],
[-122.49043464660643, 37.832937629287755],
[-122.49125003814696, 37.832429207817725],
[-122.49163627624512, 37.832564787218985],
[-122.49223709106445, 37.83337825839438],
[-122.49378204345702, 37.83368330777276]
]
}
}
});
map.addLayer({
'id': 'routeLayer',
'type': 'line',
'source': 'routeSource',
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#33bb6a',
'line-width': 8
}
});
}
// Add source and layer whenever base style is loaded
map.on('style.load', () => {
addAdditionalSourceAndLayer();
});
// Handle Layers style
const layerList = document.querySelector('#styleMenu');
layerList.addEventListener('change',function(){
map.setStyle('mapbox://styles/mapbox/' + this.value);
})
const lightPresetsList = document.querySelector('#lightPresets')
lightPresetsList.addEventListener('change',function(){
// map.setConfigProperty(layerList.value,'lightPreset',this.value) // how to config other standard map style e.g satellite-streets-v12 since the map variable doesn't have importId
console.log(map.style.stylesheet)
console.log(map.style.stylesheet.imports)
map.setConfigProperty('basemap','lightPreset',this.value)
})
</script>
</body>
</html>
Links to related documentation
The text was updated successfully, but these errors were encountered:
Question
I'm beginners of Mapbox, I saw a demo in set-config-property/. So I was wondering if it is possible to change the style of map while also change the config option such as
.
lightPresets. So I made MWE here. If I don't change the style of thebasemap, I will get imports of a map like that:But if I change the style of the
basemaptosatellite-streets-v12or other value, the imports will miss and the function ofsetConfigProperty(importId,config, value)will loss. So how can I solve this problem?The outputs of console is the result of
map.style.stylesheetandmap.style.stylesheet.imports. The main question is when I try to change the map style frombasemaptoother..., the structure ofimportswill change and I was not able to get the importID ofother style.MWE
Links to related documentation
The text was updated successfully, but these errors were encountered: