Skip to content

Instantly share code, notes, and snippets.

@pierrelorioux

pierrelorioux/map.html

Created December 25, 2013 18:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pierrelorioux/8125835 to your computer and use it in GitHub Desktop.
Save pierrelorioux/8125835 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
map.html
<!doctype html>
<html>
<!--
Created using jsbin.com
Source can be edited via http://jsbin.com/UYulAVI/1/edit
-->
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
.header{
height : 70px;
width:100%;
background : #BDBDBD;
}
.text{
text-align:right;
color:white;
margin-right:20px;
font-family:'Times New Roman'
}
h1{
font-size:20px;
font-family:'Times New Roman'
}
#map{
top:10px;
width:100%;
height:500px;
}
</style>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js?2"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<link rel="points" type="application/json" href="http://lyzidiamond.com/cupcakes.json">
</head>
<body>
<div class ="header">
<h1>Roads of Bangassou</h1>
<p class="text"> Roads status</p>
</div>
<div id="map"></div>
<script>
var cupcakeTiles = L.tileLayer('http://a.tiles.mapbox.com/v3/lyzidiamond.map-ietb6srb/{z}/{x}/{y}.png', {
maxZoom: 18
});
$.getJSON($('link[rel="points"]').attr("href"), function(data) {
var geojson = L.geoJson(data, {
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.name);
}
});
var map = L.map('map').fitBounds(geojson.getBounds());
comupcakeTiles.addTo(map);
geojson.addTo(map);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment