Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Pretty circular crime dots

  • Loading branch information...
commit cdb1b9889611216300df39efd1ed4421640fa4b3 1 parent acf261a
@zain authored
Showing with 12 additions and 52 deletions.
  1. +12 −52 maps/templates/crime.html
View
64 maps/templates/crime.html
@@ -2,7 +2,7 @@
<head>
<title>Maps Tutorial @ PyCon 2012</title>
- <link href="http://leaflet.cloudmade.com/dist/leaflet.css" media="all" rel="stylesheet" type="text/css" />
+ <link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css" />
<style type="text/css">
body { height:100% }
@@ -14,7 +14,7 @@
<div id="mapdiv"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
- <script src="http://leaflet.cloudmade.com/dist/leaflet.js" type="text/javascript" type="text/javascript"></script>
+ <script src="http://code.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
<script type="text/javascript">
@@ -30,7 +30,14 @@
var sanfran = new L.LatLng(37.77540, -122.41941);
map.addLayer(layers.cloudmade).setView(sanfran, 16);
- var crimes = new L.GeoJSON();
+
+ var crimes = new L.GeoJSON(null, { pointToLayer: function (latlng) { return new L.Circle(latlng, 10); } });
+
+ // attach a popup window to each crime
+ crimes.on("featureparse", function (e){
+ e.layer.bindPopup(e.properties.description);
+ });
+
map.addLayer(crimes);
function crime_refresh(event) {
@@ -48,61 +55,14 @@
});
- console.log(crime_ids.length + " dots on the screen.");
+ console.log(crime_ids.length + " dots loaded.");
});
}
map.on('moveend', crime_refresh);
- map.on('zoomend', crime_refresh);
crime_refresh(null); // not fired automatically
});
</script>
-
- <!--script type="text/javascript">
-
- function crime_refresh(event_name, event_source, event_args) {
- var bounds = event_source.getBounds();
-
- // geodjango's Polygon.from_bbox() expects this format for the coordinates
- var xmin = bounds.sw.lon;
- var xmax = bounds.ne.lon;
- var ymin = bounds.sw.lat;
- var ymax = bounds.ne.lat;
- var bbox = xmin + "," + ymin + "," + xmax + "," + ymax;
-
- var url = "/crime.json?bbox=" + bbox;
-
- $.getJSON(url, function(data) {
- var features = data.features;
-
- $.each(features, function(i, feature) {
- console.log(feature);
- event_source.addJSON(feature);
- });
- });
- }
-
- $(document).ready(function () {
- var map = new mxn.Mapstraction('mapdiv', 'leaflet');
-
- var sanfran = new mxn.LatLonPoint(37.77540, -122.41941);
- map.setCenterAndZoom(sanfran, 16);
-
- // add a marker
- var marker = new mxn.Marker(sanfran);
- map.addMarker(marker);
- marker.addData({'infoBubble': 'This is a popup'})
- marker.openBubble();
-
- map.addSmallControls();
-
- map.load.addHandler(crime_refresh);
- map.endPan.addHandler(crime_refresh);
- map.changeZoom.addHandler(crime_refresh);
-
- map.load.fire(); // not automatically fired
- });
- </script-->
</body>
-</html>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.