Skip to content

Instantly share code, notes, and snippets.

@javierarce

javierarce/index.html

Created October 30, 2014 10:09
Show Gist options
  • Save javierarce/0f4fa9407781a79507c3 to your computer and use it in GitHub Desktop.
Save javierarce/0f4fa9407781a79507c3 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. javierarce renamed this gist Oct 30, 2014. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.html → index.html
    View file
    File renamed without changes.
  2. javierarce created this gist Oct 30, 2014.
    69 changes: 69 additions & 0 deletions gistfile1.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,69 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>Leaflet 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: 100%;
    padding: 0;
    margin: 0;
    }
    </style>
    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
    </head>
    <body>
    <div id="map"></div>

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

    <script>
    function main() {
    var map = new L.Map('map', {
    zoomControl: false,
    center: [40.712216, -74.22655],
    zoom: 10
    });

    L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
    attribution: 'Stamen'
    }).addTo(map);

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

    layer.setInteraction(true);

    var imageUrl = 'https://farm4.staticflickr.com/3731/14101168818_932d707f90_o.jpg',
    // This is the trickiest part - you'll need accurate coordinates for the
    // corners of the image. You can find and create appropriate values at
    // http://maps.nypl.org/warper/ or
    // http://www.georeferencer.org/
    imageBounds = L.latLngBounds([
    [40.712216, -74.22655],
    [40.773941, -74.12544]]);

    var overlay = L.imageOverlay(imageUrl, imageBounds)
    .addTo(map);

    layer.on('featureOver', function(e, pos, latlng, data) {
    cartodb.log.log(e, pos, latlng, data);
    });

    layer.on('error', function(err) {
    cartodb.log.log('error: ' + err);
    });
    }).on('error', function() {
    cartodb.log.log("some error occurred");
    });
    }

    // you could use $(window).load(main);
    window.onload = main;
    </script>
    </body>
    </html>