1

I have been tasked with finishing off an abandoned project in an area I have no expertise in.

I have successfully loaded my 3 geoJSON files into a map, symbolized them and given them popups.

What I can't figure out is how to get my layer control to work for those layers. The basemap toggling works fine, but I am lost on how to make my vector layers toggle, and have a specific one turned on when the map loads.

The material in the map is sensitive (not actually strawberries) so I can't give a demo.

<div id='map' class='map'> </div>

<script>
L.mapbox.accessToken = 'REMOVED';
// define map as an object, set centre and zoom level, add basemap layer from mapbox
var map = L.mapbox.map('map')
    .setView([63.168759, -96.680897],5)

// **AJAX request, subject to the Same Origin Policy for loading all geoJSON files **keep them where they are or it will break:
// define Strawberries as a layer, load it, check, when fully loaded, symbolize from simplestyle-spec, bind a pop-up to the object that displays properties, add to map.
var strawberries = L.mapbox.featureLayer()
  strawberries.loadURL('strawberries.geojson');
strawberries.on('ready', function(layer){
    this.eachLayer(function(marker) {
      marker.setIcon(L.mapbox.marker.icon({
          'marker-color': '#7a77a9',
          'marker-size': 'medium',
          'marker-symbol':'college'
      }));
      marker.bindPopup('<h6>' + marker.feature.properties.strawberry_name + '</h6>', { closeButton: true });
    });
    map.fitBounds(strawberries.getBounds());
  });
strawberries.addTo(map);

// define strawberries2 as a layer, load it, check, when fully loaded, symbolize from simplestyle-spec, bind a pop-up to the object that displays properties, add to map.
var strawberries2 = L.mapbox.featureLayer()
  strawberries2.loadURL('strawberries2.geojson');
strawberries2.on('ready', function(layer){
    this.eachLayer(function(marker) {
      marker.setIcon(L.mapbox.marker.icon({
          'marker-color': '#a21a4a',
          'marker-size': 'small',
          'marker-symbol':'hospital'
      }));
      marker.bindPopup('<h6>' + marker.feature.properties.strawberries2_name + '</h6>', { closeButton: true });
    });
  });
strawberries2.addTo(map);

// define strawberries3 as a layer, load it, check, when fully loaded, symbolize from simplestyle-spec, bind a pop-up to the object that displays properties add to map.
var strawberries3 = L.mapbox.featureLayer()
  strawberries3.loadURL('strawberries3.geojson');
strawberries3.on('ready', function(layer){
    this.eachLayer(function(marker) {
      marker.setIcon(L.mapbox.marker.icon({
          'marker-color': '#208064',
          'marker-size': 'small',
          'marker-symbol':'building'
      }));
      marker.bindPopup('<h6>' + marker.feature.properties.strawberry_name + '</h6>', { closeButton: true });
    });
  });
strawberries3.addTo(map);

L.control.layers( {
    'Topo Map': L.mapbox.styleLayer('mapbox://styles/mapbox/light-v10').addTo(map),
    'Imagery': L.mapbox.styleLayer('mapbox://styles/mapbox/satellite-v9')
}, {
    'Strawberries': L.mapbox.featureLayer('strawberries'),
    'Strawberry 2': L.mapbox.featureLayer('strawberries2'),
    'Strawberry 3': L.mapbox.featureLayer('strawberries3')
}).addTo(map);  

</script>

Can you help with my code or by pointing me to an example that covers layer control in mapbox.js using multiple geoJSON files coming from a URL?


**Update:

L.control.layers( {
    'Topo Map': L.mapbox.styleLayer('mapbox://styles/mapbox/light-v10').addTo(map),
    'Imagery': L.mapbox.styleLayer('mapbox://styles/mapbox/satellite-v9')
}, {
    'Strawberries': strawberries,
    'Strawberry 2': strawberries2,
    'Strawberry 3': strawberries3
}, {
      collapsed: false
    }).addTo(map);  

gets me so close, but how can I only have the 'strawberries' layer selected in the checkbox on load?


Update 2

L.control.layers( null, {
    '<img src="image.png" /> Strawberry': (strawberries).addTo(map),
    '<img src="image2.png" /> Strawberry 2': strawberries2,
    '<img src="image3.png" /> Strawberry 3': strawberries3
}, {
      collapsed: false
    }).addTo(map);

Doesn't work either (but also doesn't break it). How can I only have the 'strawberries' layer selected in the legend control checkboxes on load, not all 3?

0

I figured it out. I was adding each to the map too early overriding the layer control object. Functional code looks like:

<div id='map' class='map'> </div>

<script>
L.mapbox.accessToken = 'REMOVED';
// define map as an object, set centre and zoom level, add basemap layer from mapbox
var map = L.mapbox.map('map')
    .setView([63.168759, -96.680897],5)

// **AJAX request, subject to the Same Origin Policy for loading all geoJSON files **keep them where they are or it will break:
// define Strawberries as a layer, load it, check, when fully loaded, symbolize from simplestyle-spec, bind a pop-up to the object that displays properties, add to map.
var strawberries = L.mapbox.featureLayer()
  strawberries.loadURL('strawberries.geojson');
strawberries.on('ready', function(layer){
    this.eachLayer(function(marker) {
      marker.setIcon(L.mapbox.marker.icon({
          'marker-color': '#7a77a9',
          'marker-size': 'medium',
          'marker-symbol':'college'
      }));
      marker.bindPopup('<h6>' + marker.feature.properties.strawberry_name + '</h6>', { closeButton: true });
    });
    map.fitBounds(strawberries.getBounds());
  });
strawberries.addTo(map);

// define strawberries2 as a layer, load it, check, when fully loaded, symbolize from simplestyle-spec, bind a pop-up to the object that displays properties, add to map.
var strawberries2 = L.mapbox.featureLayer()
  strawberries2.loadURL('strawberries2.geojson');
strawberries2.on('ready', function(layer){
    this.eachLayer(function(marker) {
      marker.setIcon(L.mapbox.marker.icon({
          'marker-color': '#a21a4a',
          'marker-size': 'small',
          'marker-symbol':'hospital'
      }));
      marker.bindPopup('<h6>' + marker.feature.properties.strawberries2_name + '</h6>', { closeButton: true });
    });
  });


// define strawberries3 as a layer, load it, check, when fully loaded, symbolize from simplestyle-spec, bind a pop-up to the object that displays properties add to map.
var strawberries3 = L.mapbox.featureLayer()
  strawberries3.loadURL('strawberries3.geojson');
strawberries3.on('ready', function(layer){
    this.eachLayer(function(marker) {
      marker.setIcon(L.mapbox.marker.icon({
          'marker-color': '#208064',
          'marker-size': 'small',
          'marker-symbol':'building'
      }));
      marker.bindPopup('<h6>' + marker.feature.properties.strawberry_name + '</h6>', { closeButton: true });
    });
  });


L.control.layers( {
    'Topo Map': L.mapbox.styleLayer('mapbox://styles/mapbox/light-v10').addTo(map),
    'Imagery': L.mapbox.styleLayer('mapbox://styles/mapbox/satellite-v9')
}, {
    'Strawberries': L.mapbox.featureLayer('strawberries'),
    'Strawberry 2': L.mapbox.featureLayer('strawberries2'),
    'Strawberry 3': L.mapbox.featureLayer('strawberries3')
}).addTo(map);  

</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.