CODEWITHSUNDEEP
javascriptstylesmapsmapboxgeojson
Jithin Joseph
Jithin Joseph

Reputation: 151

How to change map style in mapbox without changing the geoJson inserted

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>

Upvotes: 3

Views: 8958

Answers (3)

Jithin Joseph
Jithin Joseph

Reputation: 151

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/

Upvotes: -1

Nikhil Fadnis
Nikhil Fadnis

Reputation: 860

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'
});

Upvotes: 2

Serendipity
Serendipity

Reputation: 1037

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.

Upvotes: -1

Related Questions