| Current File : /home/jeshor13/11bsouth.com/Week2Map/Index.html |
<!-- Leaflet documentation for geoJSON: http://leafletjs.com/examples/geojson.html -->
<!-- Pulling in geojson points from an external file, using the L.circleMarker function to turn the markers into circles, then adding styles. -->
<!DOCTYPE html>
<head>
<style>
body {
padding:0;
margin:0;
height: 100%;
}
html, #map{
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
<title> Jesse'sMap2</title>
<link rel="stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<script src ="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<script language="javascript" type="text/javascript" src="neighborhoods.json"></script>
<script language="javascript" type="text/javascript" src="p5.js"></script>
<!-- Jquery so that we can pull in external JSON files -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
<script src="js/Leaflet.MakiMarkers.js"></script>
</head>
<body>
<div id="map"></div>
<script>
function setup(){
var layer = L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
});
places = [
["Where I live", 40.761813, -73.961747],
["Where I school", 40.729434, -73.993615],
["Current Location", random(40.600,40.900),random(-73.800,-74.100)],
];
var map = L.map('map').setView([40.730610,-73.935242], 11);
map.addLayer(layer);
icons = [
L.MakiMarkers.icon({icon: "building", color: "#ECABB3" , size: "m"}),
L.MakiMarkers.icon({icon: "industrial", color: "#ECABB3", size: "m"}),
L.MakiMarkers.icon({icon: "pitch", color: "#ECABB3", size: "m"}),
]
for (var i = 0; i < places.length; i++){
var marker = new L.marker([places[i][1], places[i][2]], {icon: icons[i]}).addTo(map)
marker.bindPopup(places[i][0]);
};
geojsonStyle = {
"color": "#ECABB3",
radius: 12
}
L.geoJson(neighborhoods, {
pointToLayer: function (feature, latlng) {
return L.polygon(latlng, geojsonStyle);
onEachFeature: layer.bindPopup(features.properties[0].neighborhood);
}
}).addTo(map);
}
function draw () {
// CartoDB Map
}
</script>
</body>
</html>