| Current File : /home/jeshor13/11bsouth.com/Week3Map/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%;
}
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
}
.info h4 {
margin: 0 0 5px;
color: #777;
}
.legend {
line-height: 18px;
color: #555;
}
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
</style>
<title> Jesse'sMap3</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_nolabels/{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]);
};
var legend = L.control({position: 'bottomright'});
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend'),
grades = [1, 2, 3, 4, 5],
labels = ["Manhattan","The Bronx","Brooklyn","Queens","Staten Island"];
// loop through our density intervals and generate a label with a colored square for each interval
for (var i = 0; i < grades.length; i++) {
div.innerHTML +=
'<i style="background:' + getColor(grades[i]) + '"></i> ' +
grades[i] + (grades[i] ? '–' + labels[i] + '<br>' : '+');
}
return div;
};
legend.addTo(map);
L.geoJson(neighborhoods, {style: style}).addTo(map);
//////////////////////////////////
function draw(){}
function getColor(d) {
return d > 4 ? '#d7191c' :
d > 3 ? '#fdae61' :
d > 2 ? '#ffffbf' :
d > 1 ? '#abd9e9' :
d > 0 ? '#2c7bb6' :
'#FFEDA0';
}
function style(feature) {
return {
fillColor: getColor(feature.properties.boroughCode),
weight: 2,
opacity: 0.4,
color: 'black',
dashArray: '1',
fillOpacity: 0.2
};
}
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 5,
color: '#666',
dashArray: '',
fillOpacity: 0.7
});
info.update(layer.feature.properties);
if (!L.Browser.ie && !L.Browser.opera) {
//layer.bringToFront();
}
}
function resetHighlight(e) {
geojson.resetStyle(e.target);
info.update();
}
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
}
geojson = L.geoJson(neighborhoods, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
var info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
this.update();
return this._div;
};
// method that we will use to update the control based on feature properties passed
info.update = function (props) {
this._div.innerHTML = '<h4>A City of Neighborhoods</h4>' + (props ?
'<b>' + props.neighborhood + '</b><br />' + props.borough
: 'Hover over a neighborhood');
};
info.addTo(map);
var layer2 = L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_only_labels/{z}/{x}/{y}.png', {});
map.addLayer(layer2);
layer2.bringToFront();
}
// 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>