2

I currently have a map created entirely in the CartoDB editor, including custom map. For some reason it doesn't allow you to add an attribution in the editor but thats a different problem.

So my map has a custom baselayer and 3 toggleable layers. Here is the code.

<script>
  function main() {
    cartodb.createVis('map', 'https://paulm.cartodb.com/api/v2/viz/5fd91fc8/viz.json', {
    })
    .done(function(vis, layers) {
      window.layers = layers;
    })
    .error(function(err) {
      console.log(err);
    });
  }
  window.onload = main;
</script>

I know that I could replace the current base map by adding

.done(function(vis, layers) {
  var basemap = layers[0];
  basemap.setUrl('http://{s}.tile.osm.org/{z}/{x}/{y}.png');
})

However im not sure if its possible to enable a base map switcher, or if I need to add it as a new layer completely will I need to do that via the code. Adding in a whole new set of tiles seems to be more of a basemap switch than just a data layer.

Improve this question

1 Answer 1

Reset to default
1

Yes, you can! Actually I built something similar in this example some weeks ago (the basemap switcher doesn't look great, but the functionality is there): http://bl.ocks.org/iriberri/08abc420a376053c71d4

You can just save the basemap layer into a variable and change its _url parameter. Then, just redraw it:

      basemap._url="http://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png";
      basemap.redraw();

Copying here the whole source code for the record too:

<!DOCTYPE html>
<html>
  <head>
    <title>Basemap example | CartoDB.js</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
    <style>
      html, body, #map {
        height: 90%;
        padding: 0;
        margin: 0;
      }
    </style>

    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
  </head>
  <body>
    <div id="map"></div>

    <button type="button" id="button-basemap1" onclick="setBasemap1();"> Basemap 1</button>

    <button type="button" id="button-basemap2" onclick="setBasemap2();"> Basemap 2</button>


    <!-- include cartodb.js library -->
    <script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>

    <script>
        var basemap;

       function setBasemap1(){
          basemap._url="http://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png";
          basemap.redraw();
        }

        function setBasemap2(){
          basemap._url="http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png";
          basemap.redraw();

        }
      function main() {

        cartodb.createVis('map', 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json')
        .done(function(vis, layers) {

         basemap = layers[0];


        })
        .error(function(err) {
          console.log(err);
        });
      }
      window.onload = main;
    </script>
  </body>
</html>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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