How to get ImportID of a style except from 'standard basemap'
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
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 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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the set-config-property example and the map.setStyle, style.load, and map.setConfigProperty calls shown in the MWE. Compare the imports exposed after each style change and determine how the relevant import ID should be identified for the selected style. Done means the documented approach works for the listed basemap styles.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- documentation, frontend, web-dev
- Issue type
- Documentation
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100