I am attempting to create a map of New York City with markers using Leaflet. Right now, I am following a tutorial for guidance:
http://bl.ocks.org/ragnarheidar/a711faa1a94be4dae48f
This is the code I am currently working with:
<!-- http://data.nycprepared.org/dataset/nyc-community-districts/resource/f990d0e5-2917-4902-a50a-1f6a74cc612b -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NY Noise Map</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
</head>
<body>
<div id="map"></div>
</body>
<script type="text/javascript">
var width = 1280,
height = 960,
active = d3.select(null);
/* Map definition */
// Set map wrapper size
d3.select('#map')
.style('width', width + 'px')
.style('height', height + 'px');
// Create Leftlet map and center in the desired position
var map = L.map('map').setView([40.658528, -73.952551], 10);
// Load a tile layer
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a>',
maxZoom: 18,
minZoom: 10
}).addTo(map);
// Interaction
var geojson;
function style(feature) {
return {
fillColor: '#FFEDA0',
weight: 1,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
};
}
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 3,
color: '#666',
dashArray: '',
fillOpacity: 0.7
});
if (!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront();
}
}
// Other functions skipped for brevity...
// Info control
// Error message image link omitted...
<p>I'm unsure what might be causing this issue. Any help would be appreciated.</p>
</script>
</html>