Skip to content

Commit 5dca34d

Browse files
yohanbonifaceyohanboniface
committed
cf brutasse#37 - First shot in using Leaflet instead of Gmap
1 parent 2d1dc75 commit 5dca34d

14 files changed

Lines changed: 173 additions & 233 deletions

File tree

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

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -504,24 +504,34 @@ ul.split li {
504504
margin: 0 0 1em 0;
505505
}
506506

507-
#gmap {
507+
#map {
508508
background-color: #99B3CC;
509509
border: 1px solid #326342;
510510
border-width: 2px 0 1px 0;
511511
margin: 2px 0 1px 0;
512512
width: 100%;
513-
/* background-image: url(../img/map.png); */
514-
background-position: top left;
515513
}
516514

517-
.minor #gmap {
515+
.minor #map {
518516
height: 7em;
519517
}
520518

521-
.major #gmap {
519+
.major #map {
522520
height: 25em;
523521
}
524522

523+
.shrinkControl {
524+
color: #000;
525+
background-color: #fff;
526+
font: 12px Arial;
527+
border: 1px solid black;
528+
padding: 2px;
529+
margin-bottom: 3px;
530+
text-align: center;
531+
width: 6em;
532+
cursor: pointer;
533+
}
534+
525535
/* @end */
526536

527537
.highlight {
@@ -850,7 +860,7 @@ div#hiddenLogin .openid a:active {
850860
div#mapWrapper {
851861
position: relative;
852862
}
853-
div#gmap {
863+
div#map {
854864
width: 100%;
855865
height: 300px;
856866
background-color: #ccc;

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

Lines changed: 32 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,39 @@
1-
function makeWindow(name, username, location, photo, iso_code, lat, lon) {
1+
function getPersonPopupContent(person) {
2+
var lat = person[0];
3+
var lon = person[1];
4+
var name = person[2];
5+
var username = person[3];
6+
var location_description = person[4];
7+
var photo = person[5];
8+
var iso_code = person[6];
29
var html = '<ul class="detailsList">' +
310
'<li>' +
411
'<img src="' + photo + '" alt="' + name + '" class="main">' +
512
'<h3><a href="/' + username + '/">' + name + '</a></h3>' +
613
'<p class="meta"><a href="/' + iso_code + '/" class="nobg">' +
714
'<img src="' + STATIC_URL + 'djangopeople/img/flags/' + iso_code + '.gif"></a> ' +
8-
location + '</p>' +
15+
location_description + '</p>' +
916
'<p class="meta"><a href="#" onclick="zoomOn(' + lat + ', ' + lon + '); return false;">Zoom to point</a></p>' +
1017
'</li>';
1118
return html;
1219
}
1320

1421
function zoomOn(lat, lon) {
15-
//gmap.closeInfoWindow();
16-
gmap.setCenter(new google.maps.LatLng(lat, lon));
17-
gmap.setZoom(12);
22+
MAP.setCenter(new L.LatLng(lat, lon));
23+
MAP.setZoom(12);
1824
}
1925

2026
/* Plots people on the maps and adds an info window to it
2127
* which becomes visible when you click the marker
2228
*/
23-
function plotPeopleOnMap(people, gmap) {
24-
var bounds = new google.maps.LatLngBounds();
29+
function plotPeopleOnMap(people, map) {
30+
var bounds = new L.LatLngBounds();
2531
$.each(people, function(index, person) {
2632
var marker = getPersonMarker(person);
27-
var infoWindow = getPersonInfoWindow(person);
28-
marker.setMap(gmap);
29-
bounds.extend(marker.getPosition());
30-
// Hook up the marker click event
31-
google.maps.event.addListener(marker, 'click', function() {
32-
infoWindow.open(gmap, marker);
33-
});
34-
});
35-
33+
bounds.extend(marker.getLatLng());
34+
marker.addTo(map);
35+
});
36+
map.fitBounds(bounds);
3637
return bounds;
3738
}
3839

@@ -45,10 +46,10 @@ function hidePeopleOnMap(peopleArray) {
4546
}
4647
}
4748

48-
function showPeopleOnMap(peopleArray, gmap) {
49+
function showPeopleOnMap(peopleArray, map) {
4950
if (peopleArray) {
5051
for (i in peopleArray) {
51-
peopleArray[i].setMap(gmap);
52+
peopleArray[i].addTo(map);
5253
}
5354
}
5455
}
@@ -57,37 +58,17 @@ function showPeopleOnMap(peopleArray, gmap) {
5758
function getPersonMarker(person) {
5859
var lat = person[0];
5960
var lon = person[1];
60-
var point = new google.maps.LatLng(lat, lon);
61+
var point = new L.LatLng(lat, lon);
6162
// custom marker options removed for now
62-
var marker = new google.maps.Marker({
63-
position: point,
63+
var marker = new L.Marker(point, {
6464
icon: greenIconImage(),
65-
shadow: greenIconShadow()
6665
});
66+
var info = getPersonPopupContent(person);
67+
marker.bindPopup(info)
6768

6869
return marker;
6970
}
7071

71-
// Creates a info dialog for a person
72-
function getPersonInfoWindow(person) {
73-
var lat = person[0];
74-
var lon = person[1];
75-
var name = person[2];
76-
var username = person[3];
77-
var location_description = person[4];
78-
var photo = person[5];
79-
var iso_code = person[6];
80-
81-
var infoWindow = new google.maps.InfoWindow({
82-
content: makeWindow(
83-
name, username, location_description, photo, iso_code,
84-
lat, lon
85-
)
86-
});
87-
88-
return infoWindow;
89-
}
90-
9172
/* Creates an array of person Markers for easier toggling
9273
* of their visibility on the map.
9374
*/
@@ -102,20 +83,14 @@ function getPeopleArray(peopleList) {
10283
}
10384

10485
function greenIconImage() {
105-
var greenIcon = new google.maps.MarkerImage(STATIC_URL + 'djangopeople/img/green-bubble.png',
106-
new google.maps.Size(32, 32),
107-
new google.maps.Point(0, 0),
108-
new google.maps.Point(16, 32)
109-
);
86+
var greenIcon = L.icon({
87+
iconUrl: STATIC_URL + 'djangopeople/img/green-bubble.png',
88+
shadowUrl: STATIC_URL + 'djangopeople/img/green-bubble-shadow.png',
89+
iconSize: [32, 32], // size of the icon
90+
shadowSize: [32, 32], // size of the shadow
91+
iconAnchor: [16, 32], // point of the icon which will correspond to marker's location
92+
shadowAnchor: [10, 32], // the same for the shadow
93+
popupAnchor: [0, -32] // point from which the popup should open relative to the iconAnchor
94+
});
11095
return greenIcon;
11196
}
112-
113-
function greenIconShadow() {
114-
var greenIconShadow = new google.maps.MarkerImage(STATIC_URL + 'djangopeople/img/green-bubble-shadow.png',
115-
new google.maps.Size(49, 32),
116-
new google.maps.Point(0, 0),
117-
new google.maps.Point(16, 32)
118-
);
119-
return greenIconShadow;
120-
}
121-

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

Lines changed: 39 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,67 @@
1-
window.onload = function() {
2-
function ShrinkControl(button) {
3-
button.innerHTML = 'Shrink map';
4-
button.style.color = "black";
5-
button.style.backgroundColor = "white";
6-
button.style.font = "12px Arial";
7-
button.style.border = "1px solid black";
8-
button.style.padding = "2px";
9-
button.style.marginBottom = "3px";
10-
button.style.textAlign = "center";
11-
button.style.width = "6em";
12-
button.style.cursor = "pointer";
1+
function shrinkMap (map, latlng) {
2+
// Center map
3+
map.panTo(latlng);
134

14-
google.maps.event.addDomListener(button, "click", function() {
15-
$('#gmap').css({'cursor': 'pointer'}).attr(
5+
var ShrinkMapControl = L.Control.extend({
6+
options: {
7+
position: 'bottomleft'
8+
},
9+
10+
onAdd: function (map) {
11+
// create the control container with a particular class name
12+
var container = L.DomUtil.create('div', 'shrinkControl');
13+
container.innerHTML = 'Shrink map';
14+
L.DomEvent.addListener(container, 'click', this.onClick, this);
15+
16+
return container;
17+
},
18+
19+
onClick: function () {
20+
$('#map').css({'cursor': 'pointer'}).attr(
1621
'title', 'Activate larger map'
1722
);
18-
gmap.controls[google.maps.ControlPosition.BOTTOM_LEFT].clear();
19-
hidePeopleOnMap(peopleArray);
20-
$('#gmap').animate({
23+
$('#map').animate({
2124
height: '7em',
2225
opacity: 0.6
2326
}, 500, 'swing', function() {
24-
google.maps.event.trigger(gmap, 'resize');
25-
gmap.setCenter(personLatLng);
26-
gmap.setZoom(12);
27-
gmap.setOptions({
28-
draggable: false,
29-
panControl: false,
30-
zoomControl: false,
31-
mapTypeControl: false
32-
});
33-
$('#gmap').click(onMapClicked);
27+
map._onResize()
28+
$('#map').click(onMapClicked);
29+
shrinkControl.removeFrom(map);
3430
});
35-
});
36-
}
37-
38-
var personLatLng = new google.maps.LatLng(person_latitude, person_longitude);
39-
40-
var myOptions = {
41-
zoom: 12,
42-
center: personLatLng,
43-
mapTypeId: google.maps.MapTypeId.ROADMAP,
44-
draggable: false,
45-
disableDefaultUI: true,
46-
scrollwheel: false
47-
};
48-
var gmap = new google.maps.Map(document.getElementById('gmap'), myOptions);
49-
50-
var shrinkButtonDiv = document.createElement('div');
51-
var shrinkButton = new ShrinkControl(shrinkButtonDiv);
52-
shrinkButtonDiv.index = 1;
53-
5431

32+
}
33+
});
34+
var shrinkControl = new ShrinkMapControl();
5535

5636
/* Map enlarges and becomes active when you click on it */
57-
$('#gmap').css({'cursor': 'pointer', 'opacity': 0.6}).attr(
37+
$('#map').css({'cursor': 'pointer', 'opacity': 0.6}).attr(
5838
'title', 'Activate larger map'
5939
);
6040
function onMapClicked() {
61-
$('#gmap').css({'cursor': ''}).attr('title', '');
62-
$('#gmap').animate({
41+
$('#map').css({'cursor': ''}).attr('title', '');
42+
$('#map').animate({
6343
height: '25em',
6444
opacity: 1.0
6545
}, 500, 'swing', function() {
66-
google.maps.event.trigger(gmap, 'resize');
67-
gmap.panTo(personLatLng);
68-
gmap.setOptions({
69-
draggable: true,
70-
panControl: true,
71-
zoomControl: true,
72-
mapTypeControl: true
73-
});
74-
showPeopleOnMap(peopleArray, gmap);
46+
map._onResize()
47+
// showPeopleOnMap(peopleArray, map);
7548

7649
// Unbind event so user can actually interact with map
77-
$('#gmap').unbind('click', onMapClicked);
50+
$('#map').unbind('click', onMapClicked);
51+
shrinkControl.addTo(map);
7852
});
79-
gmap.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(shrinkButtonDiv);
8053
}
81-
$('#gmap').click(onMapClicked);
54+
$('#map').click(onMapClicked);
8255

83-
var marker = new google.maps.Marker({
84-
position: personLatLng,
85-
map: gmap,
86-
icon: greenIconImage(),
87-
shadow: greenIconShadow()
8856

89-
});
57+
// Marker for the current profile, not clickable
58+
var marker = new L.Marker(latlng, {
59+
icon: greenIconImage(),
60+
}).addTo(map);
9061

9162
//gets an array of person map markers, used for hiding and showing them on
9263
//the map
93-
var peopleArray = getPeopleArray(nearby_people);
64+
// var peopleArray = getPeopleArray(nearby_people);
9465

9566
};
9667

0 commit comments

Comments
 (0)