1

I'm new to using CartoDB.js and I'm trying to use the CreateLayer function to create a new map on a webpage. (I don't want to link to a map already made on the CartoDB website.)

The online tutorials provide code samples, but don't explain how to create a basemap. Can I do that in Cartodb.js? Or do I have to use something like Leaflet?

Here's my code so far:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Online Mapping</title>
    <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>

</head>
<body>
<script>
    map = new google.maps.Map(document.getElementById('map'),  mapOptions);
    cartodb.createLayer(map, {
      user_name: 'samuelsmaggie',
      type: 'cartodb',
      sublayers: [{
        sql: "SELECT * FROM us_counties",
        cartocss: 

            #us_counties{
              polygon-fill: #8A4E8A;
              polygon-opacity: 0.8;
              polygon-comp-op: darken;
              line-color: #FFF;
              line-width: 0.3;
              line-opacity: 1;
            }

            }
                  }]
                }).done(function(layer) {
                map.addLayer(layer);


                });
</script>               
</body>
</html>
Improve this question

1 Answer 1

Reset to default
1

If you are using Google Maps, you would have to specify the basemap type in the MapOptions. At the Google Maps JS docs you can also find the details for MapTypes here.

You can also find more examples of CartoDB.js y Google Maps here.

You can add CartoDB basemaps as an extra layer in your Leaflet or OpenLayer maps as follows:

Leaflet:

var layer = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
});

var map = L.map('map', {
  scrollWheelZoom: false,
  center: [40.7127837, -74.0059413],
  zoom: 6
});

map.addLayer(layer);

OpenLayers 3:

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
        attributions: [new ol.Attribution({ html: ['&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'] })]
      })
    })
  ],
  view: new ol.View({
    center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
    zoom: 4
  })
});

The url attribute allows you to choose the basemap you want. My examples are using CartoDB Positron's basemap (light_all) but you can use any other ZXY URL basemap in there.

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.