Опитвам се да начертая карта на Ню Йорк с някои маркери върху нея, като използвам листовка. Базирам своя код в този урок:
http://bl.ocks.org/ragnarheidar/a711faa1a94be4dae48f
Това е текущият ми код:
<!-- 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();
}
}
function resetHighlight(e)
{
geojson.resetStyle(e.target);
}
function zoomToFeature(e)
{
map.fitBounds(e.target.getBounds());
}
function onEachFeature(feature, layer)
{
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
}
// Info control
// Load GeoJSON from an external file
$.getJSON("Resources/community-districts-polygon.geojson", function(data)
{
// Add GeoJSON layer to the map once the file is loaded
geojson = L.geoJson(data,
{
style: style,
onEachFeature: onEachFeature
}).addTo(map);
});
/* 311 Data */
//data URL variables
var start_date = '2013-08-01'; //YYYY-MM-DD
var end_date = '2013-08-08'; //YYYY-MM-DD
var c_type = 'Noise'; // Complaint Type
// Build the data URL
var URL = "http://data.cityofnewyork.us/resource/erm2-nwe9.json"; // API Access Endpoint
URL += "?"; // A query parameter name is preceded by the question mark
URL += "$where="; // Filters to be applied
URL += "(latitude IS NOT NULL)"; // Only return records with coordinates
URL += " AND ";
URL += "(complaint_type='" + c_type + "')"; // Desired complaint
URL += " AND ";
URL += "(created_date>='" + start_date + "') AND (created_date<='" + end_date + "')"; // Date range
URL += "&$group=complaint_type,descriptor,latitude,longitude"; // Fields to group by
URL += "&$select=descriptor,latitude,longitude,complaint_type"; // Fields to return
URL = encodeURI(URL); // Encode special characters such as spaces and quotes
console.log(URL);
var noise_description = ["Air Condition/Ventilation Equipment",
"Alarms",
"Banging/Pounding",
"Barking Dog",
"Car/Truck Horn",
"Car/Truck Music",
"Construction Equipment",
"Construction Before/After Hours",
"Engine Idling",
"Ice Cream Truck",
"Jack Hammering",
"Lawn Care Equipment",
"Loud Music/Party",
"Loud Talking",
"Loud Television",
"Manufacturing Noise",
"Private Carting Noise"];
// Load GeoJSON from an external file
$.getJSON(URL, function(data)
{
var markers = []
var layers = []
for (var i = 0; i < noise_description.length; i++)
{
markers[i] = [];
}
var all_markers = [];
$.each(data, function(index, rec)
{
var marker;
for (var i = 0; i < noise_description.length; i++)
{
if (rec.descriptor.indexOf(noise_description[i]) > -1)
{
console.log(rec.descriptor);
marker = L.marker([rec.latitude, rec.longitude]);
markers[i].push(marker);
break;
}
all_markers.push(marker);
}
});
// Create layer of all markers but do not add to map
var all_layers = L.featureGroup(all_markers);
// Create specific layers of markers and add to map
for (var i = 0; i < markers.length; i++)
{
layers[i] = L.featureGroup(markers[i]).addTo(map);;
}
map.fitBounds(all_layers.getBounds());
// Create object containing all marker layers
var overlays = {};
for (var i = 0; i < noise_description.length; i++)
{
overlay[noise_description[i]] = layers[i];
}
//add layer control using above object
L.control.layers(null,overlays).addTo(map);
});
</script>
</html>
Въпреки това не виждам нищо освен основната си карта. Освен това получавам тази грешка (не мога да я копирам):
Чудя се какво не е наред.
