mapbox dynamiczna zmiana stylu mapy

0

mam utworzoną mapę razem z polami 'input' w divie 'menu' do zmiany stylu mapy (satellite,streets,light,dark) . otrzymuję poprawny layerId tylko problem mam z podmianą w wyrażeniu :
addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/' + layerId);
po kliknięciu na odpowiedni input , zmienia się layerId , jednak mapa się już nie zmienia .
Proszę o podpowiedź

const mapPopups = L.mapbox.map('map')
.setView([52.90,22.195], 8)
.addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/outdoors-v11'));
const myLayer = L.mapbox.featureLayer().addTo(mapPopups);

const layerList = document.getElementById('menu');
const inputs = layerList.getElementsByTagName('input');
for (const input of inputs) {
input.onclick = (layer) => {
const layerId = layer.target.id;
addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/' + layerId);
}
}

1

Zadaj swoje pytanie porządniej. Pokaż całość kodu html/js. Użyj ikonki do wklejania go w sformatowanej postaci </>.
A najlepiej zalinkuj do działającego demonstratora.

1 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>A simple map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
  
  #menu {
position: absolute;top:0;
margin-left:50px;

background: #efefef;
padding: 10px;
font-family: 'Open Sans', sans-serif;
}
</style>
</head>
<body>
<div id='map'></div>
<div id="menu">
<input id="outdoors-v11" type="radio" name="rtoggle" value="outdoors" checked="checked">
<label for="outdoors-v11">outdoors</label>
<input id="streets-v11" type="radio" name="rtoggle" value="streets">
<label for="streets-v11">streets</label>
<input id="satellite-v9" type="radio" name="rtoggle" value="satellite" >
<label for="satellite-v9">satellite</label>
<input id="light-v10" type="radio" name="rtoggle" value="light">
<label for="light-v10">light</label>
<input id="dark-v10" type="radio" name="rtoggle" value="dark">
<label for="dark-v10">dark</label>

</div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoibWF4LWluIiwiYSI6ImNrdjVuZG1jbDB6aDMyb3BoNXplMnRteHYifQ.WjhV8tCpt-.............';

const mapPopups = L.mapbox.map('map')
  .setView([51.60,21.155], 8)
  .addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/outdoors-v11'));
	const myLayer = L.mapbox.featureLayer().addTo(mapPopups);

const layerList = document.getElementById('menu');
const inputs = layerList.getElementsByTagName('input');
for (const input of inputs) {
	input.onclick = (layer) => {
		const layerId = layer.target.id;
    	addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/light-v10'));
	}
}


const geojson = [
  {
    	type: 'Feature',
    	geometry: {
      		type: 'Point',
      		coordinates: [22.1556446,52.4039591]
    	},
    	properties: {
      		title: 'Mapbox SF',
      		description: '155 9th St, San Francisco',
      		'marker-color': '#3bb2d0',
      		'marker-size': 'small',
      		'marker-symbol': 'star'
	 // 'marker-symbol': 'rocket'
    	}
  },
  
  
  

  {
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [21.1556446,51.4039591]
    },
    properties: {
      title: 'Mapbox SF',
      description: '155 9th St, San Francisco',
      'marker-color': '#3bb2d0',
      'marker-size': 'small',
      'marker-symbol': 'star'
	 // 'marker-symbol': 'rocket'
    }
  }
];
myLayer.setGeoJSON(geojson);
mapPopups.scrollWheelZoom.disable();



</script>
</body>
</html>

to jest cały kod

0

rozwiązałem problem .
oto poprawny fragment kodu , może komuś się przyda .
``const layerList = document.getElementById('menu');
const inputs = layerList.getElementsByTagName('input');
for (const input of inputs) {
input.onclick = (layer) => {
const layerId = layer.target.id;
//alert(layerId);
//addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/' + layerId));
var styleLayer = L.mapbox.styleLayer('mapbox://styles/mapbox/' + layerId)
.addTo(mapPopups);

};

}

1 użytkowników online, w tym zalogowanych: 0, gości: 1