cd brutasse#37 - First POC of a TileLayer asynchrone and clustered class

Work in progress!
yohanboniface · Sep 27, 2012 · 2514421 · 2514421
1 parent 813ed44
commit 2514421
Show file tree

Hide file tree

Showing 12 changed files with 221 additions and 118 deletions.
diff --git a/Makefile b/Makefile
@@ -11,6 +11,9 @@ db:
 shell:
 	django-admin.py shell $(settings)
 
+dbshell:
+	django-admin.py dbshell $(settings)
+
 makemessages:
 	cd $(proj) && django-admin.py makemessages -a $(settings)
 
@@ -22,3 +25,6 @@ txpush:
 
 txpull:
 	tx pull -a
+
+tilestache:
+	gunicorn "TileStache:WSGITileServer('tilestache.cfg')" -b 0.0.0.0:8889
diff --git a/djangopeople/default_settings.py b/djangopeople/default_settings.py
@@ -156,3 +156,18 @@
         },
     },
 }
+
+TEMPLATE_CONTEXT_PROCESSORS = (
+    'django.contrib.auth.context_processors.auth',
+    'django.core.context_processors.debug',
+    'django.core.context_processors.i18n',
+    'django.core.context_processors.media',
+    'django.core.context_processors.static',
+    'django.core.context_processors.tz',
+    'django.contrib.messages.context_processors.messages',
+    'djangopeople.djangopeople.context_processors.tilestache_domain'
+)
+
+# You can use {s} template for multiple subdomains
+# Ex: http://{s}.tiles.people.djangoproject.com
+TILESTACHE_DOMAIN = "http://localhost:8889"
diff --git a/djangopeople/djangopeople/context_processors.py b/djangopeople/djangopeople/context_processors.py
@@ -0,0 +1,7 @@
+from django.conf import settings
+
+
+def tilestache_domain(request):
+    return {
+        "TILESTACHE_DOMAIN": settings.TILESTACHE_DOMAIN
+    }
diff --git a/djangopeople/djangopeople/static/djangopeople/css/styles.css b/djangopeople/djangopeople/static/djangopeople/css/styles.css
@@ -536,44 +536,13 @@ div.leaflet-popup-content a {
 	color: #ab5603;
 }
 
-.marker-cluster-small {
-	background-color: #A2C474;
-}
-.marker-cluster-small div {
-	background-color: #A6CC74;
-}
-
-.marker-cluster-medium {
-	background-color: #A6CC74;
-}
-.marker-cluster-medium div {
-	background-color: #92cc47;
-}
-
-.marker-cluster-large {
-	background-color: #68BA70;
-}
-.marker-cluster-large div {
-	background-color: #35913E;
-}
-
-.marker-cluster {
-	background-clip: padding-box;
-	border-radius: 20px;
-}
-.marker-cluster div {
-	width: 30px;
-	height: 30px;
-	margin-left: 5px;
-	margin-top: 5px;
-
-	text-align: center;
-	border-radius: 15px;
-	font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
-}
-.marker-cluster span {
-	line-height: 30px;
-}
+.marker-cluster div { background-color: #92cc47; color: #fff; width: 34px; height: 34px; margin-left: 3px; margin-top: 3px; text-align: center; border: 3px solid #fff; border-radius: 20px; font: bold 11px "Helvetica Neue", Arial, Helvetica, sans-serif; }
+.marker-cluster span { line-height: 34px }
+.marker-cluster-dot div { width: 12px; height: 12px; margin-left: 10px; margin-top: 10px; border-radius: 12px; }
+.marker-cluster-small div { width: 20px; height: 20px; margin-left: 8px; margin-top: 8px; border-radius: 13px; }
+.marker-cluster-small span { line-height: 20px }
+.marker-cluster-large div { width: 40px; height: 40px; margin-left: 0; margin-top: 0; border-radius: 27px; }
+.marker-cluster-large span { line-height: 40px }
 
 /* @end */
 

diff --git a/djangopeople/djangopeople/static/djangopeople/js/maps.js b/djangopeople/djangopeople/static/djangopeople/js/maps.js
@@ -1,11 +1,11 @@
 function getPersonPopupContent(person) {
-    var lat = person[0];
-    var lon = person[1];
-    var name = person[2];
-    var username = person[3];
-    var location_description = person[4];
-    var photo = person[5];
-    var iso_code = person[6];
+    var lat = person.geometry.coordinates[0];
+    var lon = person.geometry.coordinates[1];
+    var name = person.properties.name;
+    var username = person.properties.username;
+    var location_description = person.properties.location_description;
+    var photo = person.properties.photo;
+    var iso_code = person.properties.iso_code;
     var html =  '<ul class="detailsList">' + 
         '<li>' + 
         '<img src="' + photo + '" alt="' + name + '" class="main">' + 
@@ -23,44 +23,6 @@ function zoomOn(lat, lon) {
     MAP.setZoom(12);
 }
 
-/* Plots people on the maps and adds an info window to it
- * which becomes visible when you click the marker
- */
-function plotPeopleOnMap(people, map) {
-    var bounds = new L.LatLngBounds();
-    var polygonOptions = {
-        fillColor: "#ab5603",
-        color: "#ab5603",
-    }
-    var markers = new L.MarkerClusterGroup({
-        "polygonOptions": polygonOptions
-    });
-    $.each(people, function(index, person) {
-        var marker = getPersonMarker(person);
-        bounds.extend(marker.getLatLng());
-        // marker.addTo(map);
-        markers.addLayer(marker);
-    });
-    // map.fitBounds(bounds);
-    map.addLayer(markers);
-    return bounds;
-}
-
-// Creates a Marker object for a person
-function getPersonMarker(person) {
-    var lat = person[0];
-    var lon = person[1];
-    var point = new L.LatLng(lat, lon);
-    // custom marker options removed for now
-    var marker = new L.Marker(point, {
-        icon: greenIconImage(),
-    });
-    var info = getPersonPopupContent(person);
-    marker.bindPopup(info)
-
-    return marker;
-}
-
 function greenIconImage() {
     var greenIcon = L.icon({
         iconUrl: STATIC_URL + 'djangopeople/img/green-bubble.png',
@@ -73,3 +35,79 @@ function greenIconImage() {
     });
     return greenIcon;
 }
+
+L.TileLayer.ClusteredGeoJSONTile = L.TileLayer.extend({
+
+    initClusterMarker: function (map) {
+        var polygonOptions = {
+            fillColor: "#ab5603",
+            color: "#ab5603",
+        }
+        if (this.clusterMarker) {
+            map.removeLayer(this.clusterMarker);
+        }
+        this.clusterMarker = new L.MarkerClusterGroup({
+            "polygonOptions": polygonOptions
+        });
+    },
+
+    initTmpLayer: function (e) {
+        // Goal: add markers to cluster in one shot
+        this.tmpLayer = new L.GeoJSON(null, {
+            pointToLayer: function (feature, latlng) {
+                var marker = new L.Marker(latlng, {
+                    icon: greenIconImage(),
+                });
+                var info = getPersonPopupContent(feature);
+                marker.bindPopup(info)
+                return marker;
+            }
+        });
+    },
+
+    commitTmpLayer: function (e) {
+        this.clusterMarker.addLayer(this.tmpLayer);
+        if(!this._map.hasLayer(this.clusterMarker)) {
+            // Add cluster layer to map after computing clusters, if needed
+            // Cluster computing is always slower when ClusterLayer is
+            // already displayed on map
+            this._map.addLayer(this.clusterMarker)
+        }
+    },
+
+    onAdd: function (map) {
+        this._map = map;
+        var self = this;
+        map.on('zoomstart', function (e) {
+            // Delete the cluster to prevent from having several times
+            // the same people
+            self.initClusterMarker(map);
+        });
+        this.on({
+            'loading': this.initTmpLayer,
+            'load': this.commitTmpLayer
+        });
+        L.TileLayer.prototype.onAdd.call(this, map);
+    },
+
+    _addTile: function (tilePoint, container) {
+        L.TileLayer.prototype._addTile.call(this, tilePoint, container)
+
+        var z = this._getZoomForUrl(),
+            x = tilePoint.x,
+            y = tilePoint.y;
+
+        var dataUrl = L.Util.template(this.options.dataUrl, {
+            s: this._getSubdomain(tilePoint),
+            z: z,
+            x: x,
+            y: y
+        });
+        var self = this;
+        $.getJSON(dataUrl, function (data) {
+            DATA = data;
+            self.tmpLayer.addData(data);
+        });
+    }
+
+});
diff --git a/djangopeople/djangopeople/static/djangopeople/js/profile.js b/djangopeople/djangopeople/static/djangopeople/js/profile.js
@@ -1,6 +1,6 @@
 function shrinkMap (map, latlng) {
     // Center map
-    map.panTo(latlng);
+    map.setView(latlng, 12);
 
     var ShrinkMapControl = L.Control.extend({
         options: {
@@ -52,12 +52,6 @@ function shrinkMap (map, latlng) {
     }
     $('#map').click(onMapClicked);
 
-
-    // Marker for the current profile, not clickable
-    var marker = new L.Marker(latlng, {
-        icon: greenIconImage(),
-    }).addTo(map);
-
 };
 
 jQuery(function($) {

diff --git a/djangopeople/djangopeople/static/djangopeople/leaflet.markercluster/markercluster.js b/djangopeople/djangopeople/static/djangopeople/leaflet.markercluster/markercluster.js
@@ -494,7 +494,7 @@ L.MarkerClusterGroup = L.FeatureGroup.extend({
 
                 return;
             }
-            
+
             //Didn't manage to cluster in at this zoom, record us as a marker here and continue upwards
             gridUnclustered[zoom].addObject(layer, markerPoint);
         }

diff --git a/djangopeople/djangopeople/templates/index.html b/djangopeople/djangopeople/templates/index.html
@@ -7,13 +7,9 @@
 
 {% block nav_li_class_home %} class="current"{% endblock %}
 
-{% block map_extra_options %}
-<script type="text/javascript">
-	var center = new L.LatLng(19.97335, -15.8203);
-	MAP_OPTIONS['center'] = center;
-	MAP_OPTIONS['zoom'] = 2;
-</script>
-{% endblock map_extra_options %}
+{% block post_map_init %}
+    MAP.locate({setView: true});
+{% endblock %}
 
 {% block map %}
 	<div class="mapContainer major">

diff --git a/djangopeople/djangopeople/templates/maps.html b/djangopeople/djangopeople/templates/maps.html
@@ -18,14 +18,6 @@
 {% endblock maps_api %}
 
 {% block js %}
-<script type="text/javascript">
-var people = [
-	// latitude, longitude, name, username, location description
-	{% for person in people_list %}
-		[{{ person.latitude_str }}, {{ person.longitude_str }}, "{{ person|escapejs }}", "{{ person.user.username|escapejs }}", "{{ person.location_description|escapejs }}", "{% gravatar person.user.email 40 %}", "{{ person.country.iso_code|lower }}"]{% if not forloop.last %},{% endif %}
-	{% endfor %}
-];
-</script>
 
 {% block map_options %}
 <script type="text/javascript">
@@ -44,15 +36,13 @@
 <script type="text/javascript">
 window.onload = function() {
 	var MAP = new L.Map('map', MAP_OPTIONS);
-	L.tileLayer('http://{s}.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png', {
+	var geolayer = new L.TileLayer.ClusteredGeoJSONTile('http://{s}.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png', {
 	    attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, Imagery © <a href="http://www.thunderforest.com/">Thunderforest</a>',
-	    maxZoom: 18
-	}).addTo(MAP);
-
-	// Plot the people as markers
-	if (typeof people != 'undefined' && people.length > 0) {
-		plotPeopleOnMap(people, MAP);
-	}
+	    maxZoom: 18,
+	    dataUrl: '{{ TILESTACHE_DOMAIN }}/people/{z}/{x}/{y}.json',
+	});
+	geolayer.initClusterMarker(MAP);
+	geolayer.addTo(MAP);
 	{% block post_map_init %}
 	{% endblock post_map_init %}
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -494,7 +494,7 @@ L.MarkerClusterGroup = L.FeatureGroup.extend({ @@
                     return;
                 }
                 //Didn't manage to cluster in at this zoom, record us as a marker here and continue upwards
                 gridUnclustered[zoom].addObject(layer, markerPoint);
             }
@@ Expand Down @@