Osm

README.rst

@@ -29,6 +29,7 @@ Create ``djangopeople/settings.py`` and add::
     DATABASES = {
         # your DB config
     }
+    INTERNAL_IPS = ('127.0.0.1', )
 
 Then::
 

djangopeople/djangopeople/static/djangopeople/css/styles.css

@@ -504,24 +504,38 @@ ul.split li {
 	margin: 0 0 1em 0;
 }
 
-#gmap {
+#map {
 	background-color: #99B3CC;
 	border: 1px solid #326342;
 	border-width: 2px 0 1px 0;
 	margin: 2px 0 1px 0;
 	width: 100%;
-/*	background-image: url(../img/map.png); */
-	background-position: top left;
 }
 
-.minor #gmap {
+.minor #map {
 	height: 7em;
 }
 
-.major #gmap {
+.major #map {
 	height: 25em;
 }
 
+.shrinkControl {
+	color: #000;
+	background-color: #fff;
+	font: 12px Arial;
+	border: 1px solid black;
+	padding: 2px;
+	margin-bottom: 3px;
+    text-align: center;
+    width: 6em;
+	cursor: pointer;
+}
+
+div.leaflet-popup-content a {
+	color: #ab5603;
+}
+
 /* @end */
 
 .highlight {
@@ -850,7 +864,7 @@ div#hiddenLogin .openid a:active {
 div#mapWrapper {
     position: relative;
 }
-div#gmap {
+div#map {
     width: 100%;
     height: 300px;
     background-color: #ccc;

djangopeople/djangopeople/static/djangopeople/js/maps.js

@@ -1,121 +1,66 @@
-function makeWindow(name, username, location, photo, iso_code, lat, lon) {
+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 html =  '<ul class="detailsList">' + 
         '<li>' + 
         '<img src="' + photo + '" alt="' + name + '" class="main">' + 
         '<h3><a href="/' + username + '/">' + name + '</a></h3>' + 
         '<p class="meta"><a href="/' + iso_code + '/" class="nobg">' + 
         '<img src="' + STATIC_URL + 'djangopeople/img/flags/' + iso_code + '.gif"></a> ' + 
-        location + '</p>' + 
+        location_description + '</p>' + 
         '<p class="meta"><a href="#" onclick="zoomOn(' + lat + ', ' + lon + '); return false;">Zoom to point</a></p>' +
         '</li>';
     return html;
 }
 
 function zoomOn(lat, lon) {
-    //gmap.closeInfoWindow();
-    gmap.setCenter(new google.maps.LatLng(lat, lon));
-    gmap.setZoom(12);
+    MAP.setCenter(new L.LatLng(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, gmap) {
-    var bounds = new google.maps.LatLngBounds();
+function plotPeopleOnMap(people, map) {
+    var bounds = new L.LatLngBounds();
     $.each(people, function(index, person) {
         var marker = getPersonMarker(person);
-        var infoWindow = getPersonInfoWindow(person);
-        marker.setMap(gmap);
-        bounds.extend(marker.getPosition());
-        // Hook up the marker click event
-        google.maps.event.addListener(marker, 'click', function() {
-            infoWindow.open(gmap, marker);
-        });
-    });   
-
+        bounds.extend(marker.getLatLng());
+        marker.addTo(map);
+    });
+    map.fitBounds(bounds);
     return bounds;
 }
 
-
-function hidePeopleOnMap(peopleArray) {
-    if (peopleArray) {
-        for (i in peopleArray) {
-            peopleArray[i].setMap(null);
-        }
-    }
-}
-
-function showPeopleOnMap(peopleArray, gmap) {
-    if (peopleArray) {
-        for (i in peopleArray) {
-            peopleArray[i].setMap(gmap);
-        }
-    }
-}
-
 // Creates a Marker object for a person
 function getPersonMarker(person) {
     var lat = person[0];
     var lon = person[1];
-    var point = new google.maps.LatLng(lat, lon);
+    var point = new L.LatLng(lat, lon);
     // custom marker options removed for now
-    var marker = new google.maps.Marker({
-        position: point,
+    var marker = new L.Marker(point, {
         icon: greenIconImage(),
-        shadow: greenIconShadow()
     });
+    var info = getPersonPopupContent(person);
+    marker.bindPopup(info)
 
     return marker;
 }
 
-// Creates a info dialog for a person
-function getPersonInfoWindow(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 infoWindow = new google.maps.InfoWindow({
-        content: makeWindow(
-                     name, username, location_description, photo, iso_code, 
-                     lat, lon
-                     )
-    });
-
-    return infoWindow;
-}
-
-/* Creates an array of person Markers for easier toggling
- * of their visibility on the map. 
- */
-function getPeopleArray(peopleList) {
-    var peopleArray = [];
-    $.each(peopleList, function(index, person) {
-        var marker = getPersonMarker(person);
-        peopleArray.push(marker);
-    });
-
-    return peopleArray;
-}
-
 function greenIconImage() {
-    var greenIcon = new google.maps.MarkerImage(STATIC_URL + 'djangopeople/img/green-bubble.png',
-            new google.maps.Size(32, 32),
-            new google.maps.Point(0, 0),
-            new google.maps.Point(16, 32)
-            );
+    var greenIcon = L.icon({
+        iconUrl: STATIC_URL + 'djangopeople/img/green-bubble.png',
+        shadowUrl: STATIC_URL + 'djangopeople/img/green-bubble-shadow.png',
+        iconSize:     [32, 32], // size of the icon
+        shadowSize:   [32, 32], // size of the shadow
+        iconAnchor:   [16, 32], // point of the icon which will correspond to marker's location
+        shadowAnchor: [10, 32],  // the same for the shadow
+        popupAnchor:  [0, -32] // point from which the popup should open relative to the iconAnchor
+    });
     return greenIcon;
 }
-
-function greenIconShadow() {
-    var greenIconShadow = new google.maps.MarkerImage(STATIC_URL + 'djangopeople/img/green-bubble-shadow.png',
-            new google.maps.Size(49, 32),
-            new google.maps.Point(0, 0),
-            new google.maps.Point(16, 32)
-            );
-    return greenIconShadow;
-}
-

djangopeople/djangopeople/static/djangopeople/js/profile.js

@@ -1,96 +1,62 @@
-window.onload = function() {
-    function ShrinkControl(button) {
-        button.innerHTML = 'Shrink map';
-        button.style.color = "black";
-        button.style.backgroundColor = "white";
-        button.style.font = "12px Arial";
-        button.style.border = "1px solid black";
-        button.style.padding = "2px";
-        button.style.marginBottom = "3px";
-        button.style.textAlign = "center";
-        button.style.width = "6em";
-        button.style.cursor = "pointer";
+function shrinkMap (map, latlng) {
+    // Center map
+    map.panTo(latlng);
 
-        google.maps.event.addDomListener(button, "click", function() {
-            $('#gmap').css({'cursor': 'pointer'}).attr(
+    var ShrinkMapControl = L.Control.extend({
+        options: {
+            position: 'bottomleft'
+        },
+
+        onAdd: function (map) {
+            // create the control container with a particular class name
+            var container = L.DomUtil.create('div', 'shrinkControl');
+            container.innerHTML = 'Shrink map';
+            L.DomEvent.addListener(container, 'click', this.onClick, this);
+
+            return container;
+        },
+
+        onClick: function () {
+            $('#map').css({'cursor': 'pointer'}).attr(
                 'title', 'Activate larger map'
             );
-            gmap.controls[google.maps.ControlPosition.BOTTOM_LEFT].clear();
-            hidePeopleOnMap(peopleArray);
-            $('#gmap').animate({
+            $('#map').animate({
                 height: '7em',
                 opacity: 0.6
             }, 500, 'swing', function() {
-                google.maps.event.trigger(gmap, 'resize');
-                gmap.setCenter(personLatLng);
-                gmap.setZoom(12);
-                gmap.setOptions({
-                    draggable: false,
-                    panControl: false,
-                    zoomControl: false,
-                    mapTypeControl: false
-                });
-                $('#gmap').click(onMapClicked);
+                map._onResize()
+                $('#map').click(onMapClicked);
+                shrinkControl.removeFrom(map);
             });
-        });
-    }
-
-    var personLatLng =  new google.maps.LatLng(person_latitude, person_longitude);
-
-    var myOptions = {
-        zoom: 12,
-        center: personLatLng,
-        mapTypeId: google.maps.MapTypeId.ROADMAP,
-        draggable: false,
-        disableDefaultUI: true,
-        scrollwheel: false
-    };
-    var gmap = new google.maps.Map(document.getElementById('gmap'), myOptions);
-
-    var shrinkButtonDiv = document.createElement('div');
-    var shrinkButton = new ShrinkControl(shrinkButtonDiv);
-    shrinkButtonDiv.index = 1;
-
 
+        }
+    });
+    var shrinkControl = new ShrinkMapControl();
 
     /* Map enlarges and becomes active when you click on it */
-    $('#gmap').css({'cursor': 'pointer', 'opacity': 0.6}).attr(
+    $('#map').css({'cursor': 'pointer', 'opacity': 0.6}).attr(
             'title', 'Activate larger map'
             );
     function onMapClicked() {
-        $('#gmap').css({'cursor': ''}).attr('title', '');
-        $('#gmap').animate({
+        $('#map').css({'cursor': ''}).attr('title', '');
+        $('#map').animate({
             height: '25em',
             opacity: 1.0
         }, 500, 'swing', function() {
-            google.maps.event.trigger(gmap, 'resize');
-            gmap.panTo(personLatLng);
-            gmap.setOptions({
-                draggable: true,
-                panControl: true,
-                zoomControl: true,
-                mapTypeControl: true
-            });
-            showPeopleOnMap(peopleArray, gmap);
+            map._onResize()
 
             // Unbind event so user can actually interact with map
-            $('#gmap').unbind('click', onMapClicked);
+            $('#map').unbind('click', onMapClicked);
+            shrinkControl.addTo(map);
         });
-        gmap.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(shrinkButtonDiv);
     }
-    $('#gmap').click(onMapClicked);
+    $('#map').click(onMapClicked);
 
-    var marker = new google.maps.Marker({
-        position: personLatLng,
-        map: gmap,
-        icon: greenIconImage(),
-        shadow: greenIconShadow()
-
-    });
 
-    //gets an array of person map markers, used for hiding and showing them on
-    //the map
-    var peopleArray = getPeopleArray(nearby_people);
+    // Marker for the current profile, not clickable
+    var marker = new L.Marker(latlng, {
+        icon: greenIconImage(),
+    }).addTo(map);
 
 };