netcon-source / cartodb.js

cartodb javascript library

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

cartodb.js

This library allows to embed you visualizations created with CartoDB in your map or website in a simple way.

quick start

  1. add cartodb.js and css to your site (and google maps if you are using it):
```html

    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.css" />
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.ie.css" />
    <![endif]-->

    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script src="http://libs.cartocdn.com/cartodb.js/v2/cartodb.js"></script>

    <!-- use these links if you are using https -->
    <!--

    <link rel="stylesheet" href="https://d3voyrscnb0slx.cloudfront.net/cartodb.js/v2/themes/cartodb.css" />
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="https://d3voyrscnb0slx.cloudfront.net/cartodb.js/v2/themes/css/cartodb.ie.css" />
    <![endif]-->

    <script src="https://d3voyrscnb0slx.cloudfront.net/cartodb.js/v2/cartodb.js"></script>
    -->
```
  1. create the map and add the layer
**gmaps**

```javascript

    // create google map
    var map;
    var mapOptions = {
      zoom: 7,
      center: new google.maps.LatLng(43, -68),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map'),  mapOptions);

    // add the cartodb layer
    // you can find this url in CartoDB interface:
    // - go to map
    // - click on share
    // - API tab
    var layerUrl = 'http://examples-beta.cartodb.com/api/v1/viz/219/viz.json';
    cartodb.createLayer(map, layerUrl, function(layer) {
        map.overlayMapTypes.setAt(0, layer);
    });

```

**leaflet**

```javascript
  var map = L.map('map').setView([0, 0], 3);

  // set a base layer 
  L.tileLayer('http://a.tile.stamen.com/toner/{z}/{x}/{y}.png', {
    attribution: 'stamen http://maps.stamen.com/'
  }).addTo(map);
  
  // add the cartodb layer
  var layerUrl = 'http://examples-beta.cartodb.com/api/v1/viz/219/viz.json';
  cartodb.createLayer(map, layerUrl, function(layer) {
    map.overlayMapTypes.setAt(0, layer);
  });
```

next steps

how to build

```
open test/SpecRunner.html
make release
```

About

cartodb javascript library