mpmckenna8/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    This a a very simple example of implementing the CartoDB API and getting some
layers created on their platform onto your leaflet map.  Once you do this you
can just edit the layer style, popups, legend or data for your layer on CartoDB and it
will change the next time your map is loaded. Pretty simple and way easier than
trying to host your own postgres instance and code out a bunch of scales and
styles.
The data for the parks is from OpenStreetmap data related to parks in the San
Diego area.  Let me know if you have any questions or let me know if I messed
something up.

  
## index.html
<html>
<head>
  <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
  <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
  <!--[if lte IE 8]>
    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.ie.css" />
  <![endif]-->
  <style>
    html, body {width:100%; height:100%; padding: 0; margin: 0;}
    #cartodb-map { width: 100%; height:100%; background: black;}
  </style>

  <script>
    var map;
    function init(){
      // initiate leaflet map
      map = new L.Map('cartodb-map', {
        zoom: 10,
  center: [32.902222, -116.979378],
      })

      L.tileLayer('https://api.mapbox.com/v4/mapbox.outdoors/{z}/{x}/{y}.png?access_token='
      + 'pk.eyJ1IjoibXBtY2tlbm5hOCIsImEiOiJfYWx3RlJZIn0.v-vrWv_t1ytntvWpeePhgQ',
      {
        attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms &amp; Feedback</a>'
        }).addTo(map);

      var layerUrl = 'http://mpmckenna8.cartodb.com/api/v2/viz/bf965a6a-486a-11e5-a399-0e018d66dc29/viz.json';
        cartodb.createLayer(map, layerUrl)
         // .addTo(map)
            .on('done', function(layer) {
                layer.addTo(map);
              })
            .on('error', function(err) {
                 console.log('there was a error', err) //log the error
              });

      }
  </script>
</head>
<body onload="init()">
  <div id='cartodb-map'></div>
</body>
</html>
	<html>
	<head>
	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
	<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
	<!--[if lte IE 8]>
	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.ie.css" />
	<![endif]-->
	<style>
	html, body {width:100%; height:100%; padding: 0; margin: 0;}
	#cartodb-map { width: 100%; height:100%; background: black;}
	</style>

	<script>
	var map;
	function init(){
	// initiate leaflet map
	map = new L.Map('cartodb-map', {
	zoom: 10,
	center: [32.902222, -116.979378],
	})

	L.tileLayer('https://api.mapbox.com/v4/mapbox.outdoors/{z}/{x}/{y}.png?access_token='
	+ 'pk.eyJ1IjoibXBtY2tlbm5hOCIsImEiOiJfYWx3RlJZIn0.v-vrWv_t1ytntvWpeePhgQ',
	{
	attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms & Feedback</a>'
	}).addTo(map);

	var layerUrl = 'http://mpmckenna8.cartodb.com/api/v2/viz/bf965a6a-486a-11e5-a399-0e018d66dc29/viz.json';
	cartodb.createLayer(map, layerUrl)
	// .addTo(map)
	.on('done', function(layer) {
	layer.addTo(map);
	})
	.on('error', function(err) {
	console.log('there was a error', err) //log the error
	});

	}
	</script>
	</head>
	<body onload="init()">
	<div id='cartodb-map'></div>
	</body>
	</html>