|
| 1 | +<!--1. HTML Skeleton--> |
| 2 | + |
| 3 | +<!DOCTYPE html> |
| 4 | +<html> |
| 5 | +<head> |
| 6 | + <meta charset="UTF-8"> |
| 7 | + <title>mbtiles on baselayer</title> |
| 8 | + <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> |
| 9 | +</head> |
| 10 | + |
| 11 | +<body> |
| 12 | + |
| 13 | +</body> |
| 14 | +</html> |
| 15 | + |
| 16 | + |
| 17 | +<!--2. Add leaflet.js & leaflet.css to top of head--> |
| 18 | +<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> |
| 19 | + <!--[if lte IE 8]> |
| 20 | + <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.ie.css" /> |
| 21 | + <![endif]--> |
| 22 | + <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> |
| 23 | + |
| 24 | + |
| 25 | +<!--3. Create map div at top of body--> |
| 26 | + |
| 27 | +<div id='map'></div> |
| 28 | + |
| 29 | + |
| 30 | +<!--4. Basic style for body and map div. Add in head under leaflet.js--> |
| 31 | + |
| 32 | +<style type="text/css"> |
| 33 | + body { |
| 34 | + padding: 0; |
| 35 | + margin: 0; |
| 36 | + } |
| 37 | + |
| 38 | + html, body, #map { |
| 39 | + height: 100%; |
| 40 | + } |
| 41 | +</style> |
| 42 | + |
| 43 | + |
| 44 | +<!--5. Initialize map inside script tags...immediately under map div--> |
| 45 | +<script> |
| 46 | + // Initializes the map at the noted coordinates and zoom |
| 47 | + var map = L.map('map').setView([41.56633, -83.63830], 10); |
| 48 | +</script> |
| 49 | + |
| 50 | + |
| 51 | +<!--6. Add toner base layer map initialization--> |
| 52 | +<script> // <- Don't add |
| 53 | +//Add base layer |
| 54 | +var stamenLayer = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', { |
| 55 | + attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.' |
| 56 | +}).addTo(map); |
| 57 | +</script> <!-- <- Don't add--> |
| 58 | + |
| 59 | + |
| 60 | +<!--7. Create geojson variable under map initialization--> |
| 61 | + |
| 62 | +<script> // <- Don't add |
| 63 | +var geojson; |
| 64 | +</script> <!-- <- Don't add--> |
| 65 | +<!--Why? From choropleth example: "The handy geojson.resetStyle method will reset the layer style to its default state (defined by our style function). For this to work, make sure our GeoJSON layer is accessible through the geojson variable by defining it before our listeners and assigning the layer to it later" http://leafletjs.com/examples/choropleth.html--> |
| 66 | + |
| 67 | + |
| 68 | +<!--8. Add jQuery in head below leaflet.js--> |
| 69 | +<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> |
| 70 | + |
| 71 | + |
| 72 | +<!--9. Add geojson from external source, but same domain--> |
| 73 | +<script> // <- Don't add |
| 74 | +//Add geojson |
| 75 | +$.getJSON("../data/prepared/lucasCo_hungarian_tracts.geojson", function(data) { |
| 76 | + geojson = L.geoJson(data, { |
| 77 | + //leave this space open, |
| 78 | + //also this one |
| 79 | +}).addTo(map); |
| 80 | +</script> <!-- <- Don't add--> |
| 81 | + |
| 82 | +<!--10. Add color stepzzzzzz--> |
0 commit comments