Created
October 29, 2015 10:06
-
-
Save oriolbx/3e966eb01c31c806c271 to your computer and use it in GitHub Desktop.
Basemap selector with createLayer()
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> | |
| <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" /> | |
| <script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script> | |
| <style> | |
| html, body,#map { | |
| width:100%; | |
| height:100%; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| #selector_menu{ | |
| position: absolute; | |
| top: 20px; | |
| left: 50px; | |
| z-index: 9000; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='map'></div> | |
| <div id='selector_menu'> | |
| <select id='selector'> | |
| <option value='OSM'>OSM map</option> | |
| <option value='stamen'>Stamen map</option> | |
| </select> | |
| </div> | |
| <script type="text/javascript"> | |
| function main() { | |
| var map; | |
| // center and zoom level | |
| var options = { | |
| center: [20, 20], | |
| zoom: 2, | |
| }; | |
| // define map object | |
| var map_object = new L.Map('map', options); | |
| // add default basemap | |
| var basemap1 = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
| attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>' | |
| }).addTo(map_object); | |
| // add new basemap option | |
| var basemap2 = L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', { | |
| attribution: 'Stamen' | |
| }); | |
| // add CartoDB layer | |
| cartodb.createLayer(map_object, 'https://team.cartodb.com/u/oboix/api/v2/viz/8fe9aca0-39e6-11e5-84c4-0e853d047bba/viz.json') | |
| .addTo(map_object) | |
| .on('done', function (layer){ | |
| // define ZIndex of the CartoDB layer | |
| layer.setZIndex(9000); | |
| // define basemap options | |
| var LayerActions = { | |
| OSM: function(){ | |
| // if map_object has already a basemap, remove it and add a new one | |
| if (map_object.hasLayer(basemap1) || (map_object.hasLayer(basemap2))){ | |
| map_object.removeLayer(basemap1); | |
| map_object.removeLayer(basemap2); | |
| } | |
| map_object.addLayer(basemap1); | |
| return true; | |
| }, | |
| // if map_object has already a basemap, remove it and add a new one | |
| stamen: function(){ | |
| if (map_object.hasLayer(basemap1) || (map_object.hasLayer(basemap2))){ | |
| map_object.removeLayer(basemap1); | |
| map_object.removeLayer(basemap2); | |
| } | |
| map_object.addLayer(basemap2); | |
| return true; | |
| } | |
| } | |
| $('#selector').change(function() { | |
| LayerActions[$(this).val()](); | |
| }); | |
| }); | |
| } | |
| window.onload = main; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment