mgiraldo · August 22, 2018 11:34 · Duermael · Mar 31, 2016
diff --git a/a-web-maps-101.md b/a-web-maps-101.md
diff --git a/div.html b/div.html
 <div id="map"></div>
diff --git a/example.json b/example.json
 {
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [125.6, 10.1]
  },
  "properties": {
    "name": "Dinagat Islands"
  }
 }
diff --git a/geojsonio1.js b/geojsonio1.js
 window.api.map.setView([4.598056,-74.075833],14);
diff --git a/geojsonio2.js b/geojsonio2.js
 window.api.map.addLayer( L.tileLayer( 'http://mapwarper.net/maps/tile/4949/{z}/{x}/{y}.png' ) );
diff --git a/style.css b/style.css
 #map {
  width:400px;
  height:400px;
 }
diff --git a/template.html b/template.html
 <!DOCTYPE html>
 <html>
 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>Mapa</title>
 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
 <link href="http://api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.css" media="screen, print" rel="stylesheet">
 <script src="http://api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.js"></script>
 <style type="text/css">
 /* paste CSS below this line */

 </style>
 </head>
 <body>
 <!-- paste HTML below this line -->

 <script type="text/javascript">
 // paste JavaScript below this line

 </script>
 </body>
 </html>
diff --git a/x1.js b/x1.js
 // use a variable for the 1891 tile set
 var bog_1891 = L.tileLayer( 'http://mapwarper.net/maps/tile/4949/{z}/{x}/{y}.png');

 // create the map with the default the tileset
 var map = L.map('map', {layers:bog_1891});

 // zoom and center in downtown Bogotá
 map.setView([4.598056, -74.075833],14);
diff --git a/x2.js b/x2.js
 // 1891 map attribution
 var attribution_1891 = 'Map image from <a href="http://bibliotecanacional.gov.co">Biblioteca Nacional</a>';

 // 1891 tile set with attribution
 var bog_1891 = L.tileLayer(  'http://mapwarper.net/maps/tile/4949/{z}/{x}/{y}.png' , { attribution: attribution_1891 } );

 // 2014 tile set attribution
 var attribution_2014 = '<a id="home-link" target="_top" href="../">Map tiles</a> by <a target="_top" href="http://stamen.com">Stamen Design</a>, under <a target="_top" href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a target="_top" href="http://openstreetmap.org">OpenStreetMap</a>, under <a target="_top" href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.';

 // 2014 tile set using Stamen Toner Lite
 var bog_2014 = L.tileLayer( 'http://a.tile.stamen.com/toner-lite/{z}/{x}/{y}.png',{attribution: attribution_2014});

 // create the map with the default the tileset
 var map = L.map('map', {layers:bog_1891});

 // create a variable to hold all tile sets and name them so we can use it for the toggler
 var baseMaps = {
  "Bogotá 2014": bog_2014,
  "Bogotá 1891": bog_1891
 };

 // add the tile set switcher control
 L.control.layers(baseMaps).addTo(map);

 // zoom and center in downtown Bogotá
 map.setView([4.598056, -74.075833],14);
diff --git a/x3.js b/x3.js
 // the geojson as it comes from the text document
 var geostring = 'paste_geojson_here_keep_quotes';

 // parse the geojson string to a proper json structure
 var geodata = JSON.parse(geostring);

 // now make it understandable by leaflet
 var geolayer = L.geoJson(geodata);

 // add the points to the map
 geolayer.addTo(map);

 // zoom the map to the bounds of the points
 map.fitBounds(geolayer.getBounds());
diff --git a/x4.js b/x4.js
 var geostring = '{"type":"FeatureCollection","features":[…]}';
diff --git a/x5.js b/x5.js
 // a data layers variable for the toggler
 var overlays = {
  "Politicians": geolayer
 }

 // update the tileset switcher control creation
 L.control.layers(baseMaps, overlays).addTo(map);
diff --git a/x6.js b/x6.js
 function showPopup(feature, layer) {
  var key, val;
  var content = [];
  for (key in feature.properties) {
    val = feature.properties[key];
    content.push("<strong>" + key + ":</strong> " + val);
  }
  layer.bindPopup(content.join("<br />"));
 }
diff --git a/x7.js b/x7.js
 var geolayer = L.geoJson(geodata, {onEachFeature: showPopup});
diff --git a/x8.js b/x8.js
 function showPopup(feature, layer) {
  var key, val;
  var content = [];
  for (key in feature.properties) {
    val = feature.properties[key];
    if (key == "Page") {
      val = '<a href="http://www.bibliotecanacional.gov.co/recursos_user/bookreader/1889_sala3a_12756/#page/' + val + '" target="_blank">See page</a>';
    } else if (key == "Photo") {
      val = '<img src="' + val + '"  height="150" />';
    }
    content.push("<strong>" + key + ":</strong> " + val);
  }
  layer.bindPopup(content.join("<br />"));
 }
	{
	"type": "Feature",
	"geometry": {
	"type": "Point",
	"coordinates": [125.6, 10.1]
	},
	"properties": {
	"name": "Dinagat Islands"
	}
	}
	<!DOCTYPE html>
	<html>
	<head>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Mapa</title>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<link href="http://api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.css" media="screen, print" rel="stylesheet">
	<script src="http://api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.js"></script>
	<style type="text/css">
	/* paste CSS below this line */

	</style>
	</head>
	<body>
	<!-- paste HTML below this line -->

	<script type="text/javascript">
	// paste JavaScript below this line

	</script>
	</body>
	</html>
	// use a variable for the 1891 tile set
	var bog_1891 = L.tileLayer( 'http://mapwarper.net/maps/tile/4949/{z}/{x}/{y}.png');

	// create the map with the default the tileset
	var map = L.map('map', {layers:bog_1891});

	// zoom and center in downtown Bogotá
	map.setView([4.598056, -74.075833],14);
	// 1891 map attribution
	var attribution_1891 = 'Map image from <a href="http://bibliotecanacional.gov.co">Biblioteca Nacional</a>';

	// 1891 tile set with attribution
	var bog_1891 = L.tileLayer( 'http://mapwarper.net/maps/tile/4949/{z}/{x}/{y}.png' , { attribution: attribution_1891 } );

	// 2014 tile set attribution
	var attribution_2014 = '<a id="home-link" target="_top" href="../">Map tiles</a> by <a target="_top" href="http://stamen.com">Stamen Design</a>, under <a target="_top" href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a target="_top" href="http://openstreetmap.org">OpenStreetMap</a>, under <a target="_top" href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.';

	// 2014 tile set using Stamen Toner Lite
	var bog_2014 = L.tileLayer( 'http://a.tile.stamen.com/toner-lite/{z}/{x}/{y}.png',{attribution: attribution_2014});

	// create the map with the default the tileset
	var map = L.map('map', {layers:bog_1891});

	// create a variable to hold all tile sets and name them so we can use it for the toggler
	var baseMaps = {
	"Bogotá 2014": bog_2014,
	"Bogotá 1891": bog_1891
	};

	// add the tile set switcher control
	L.control.layers(baseMaps).addTo(map);

	// zoom and center in downtown Bogotá
	map.setView([4.598056, -74.075833],14);
	// the geojson as it comes from the text document
	var geostring = 'paste_geojson_here_keep_quotes';

	// parse the geojson string to a proper json structure
	var geodata = JSON.parse(geostring);

	// now make it understandable by leaflet
	var geolayer = L.geoJson(geodata);

	// add the points to the map
	geolayer.addTo(map);

	// zoom the map to the bounds of the points
	map.fitBounds(geolayer.getBounds());
	// a data layers variable for the toggler
	var overlays = {
	"Politicians": geolayer
	}

	// update the tileset switcher control creation
	L.control.layers(baseMaps, overlays).addTo(map);
	function showPopup(feature, layer) {
	var key, val;
	var content = [];
	for (key in feature.properties) {
	val = feature.properties[key];
	content.push("<strong>" + key + ":</strong> " + val);
	}
	layer.bindPopup(content.join("<br />"));
	}