search

mapbox / mapbox.js

Mapbox JavaScript API, a Leaflet Plugin
mapbox.com/mapbox.js/
Other
1.92k stars 386 forks source link

Toggling baselayers #1068

Closed rbonillajr closed 7 years ago

rbonillajr commented 8 years ago

https://www.mapbox.com/mapbox.js/example/v1.0.0/toggle-baselayers/

In my test using tooltips config into TileMill and if you using this examples don't show tooltips

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

<script>
L.mapbox.accessToken = 'pk.eyJ1IjoicmJvbmlsbGFqciIsImEiOiI5M2FhYjRjNjFjNTE2YTU2NjUxNzJiNmQ3Mjc3OWFjMSJ9.dj1BlB2pdE2TqjQT42kl8A';
  var map = L.mapbox.map('map').setView([22.76, -25.84], 3);

  var layers = {
      Streets: L.mapbox.tileLayer('rbonillajr.ni9k25fo'),
      Outdoors: L.mapbox.tileLayer('rbonillajr.ni98o7h3')

  };
var overlays = {                    
                    Provincia:  L.mapbox.tileLayer('rbonillajr.Provincias')
                };
  layers.Streets.addTo(map);
  L.control.layers(layers, overlays).addTo(map);
</script>
</body>
</html>

if using this example show tooltips and not using Toggling Baselayers

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

<script>
L.mapbox.accessToken = 'pk.eyJ1IjoicmJvbmlsbGFqciIsImEiOiI5M2FhYjRjNjFjNTE2YTU2NjUxNzJiNmQ3Mjc3OWFjMSJ9.dj1BlB2pdE2TqjQT42kl8A';  
  L.mapbox.map('map', 'rbonillajr.ni98o7h3,rbonillajr.Provincias')
  .setView([40, -83], 5);
</script>
</body>
</html>
tmcw commented 8 years ago

L.mapbox.map('map', 'rbonillajr.ni98o7h3,rbonillajr.Provincias') is a shortcut that adds a tileLayer, as well as a gridLayer and gridControl. If you don't use this shortcut and instead add the provinces layer in a layer selector, you'll need to add the gridLayer and gridcontrol yourself. See for an example, this example: https://www.mapbox.com/mapbox.js/example/v1.0.0/gridlayer-gridcontrol/

rbonillajr commented 8 years ago

Hi i need use L.control.layers(layers, overlays).addTo(map); because my app have plugin for change basemap.

L.control.layers run good but don't show tooltips

mi code is first example. second example is for demo of i need with using first example.

thanks

tmcw commented 7 years ago

Closing; you'll need to use L.mapbox.tileLayer then, and respond to the Leaflet-sent events to swap out the grid layers.