Use custom pager instead of Suq-Pagination. Don't request the first GeoJSON items...
[infos-pratiques:etalage.git] / poiscasse / static / js / map.js
1 /*
2  * PoisCasse -- Open Data POIs portal
3  * By: Emmanuel Raviart <eraviart@easter-eggs.com>
4  *     Romain Soufflet <rsoufflet@easter-eggs.com>
5  *
6  * Copyright (C) 2011 Easter-eggs
7  * http://gitorious.org/infos-pratiques/poiscasse
8  *
9  * This file is part of PoisCasse.
10  *
11  * PoisCasse is free software; you can redistribute it and/or modify
12  * it under the terms of the GNU Affero General Public License as
13  * published by the Free Software Foundation, either version 3 of the
14  * License, or (at your option) any later version.
15  *
16  * PoisCasse is distributed in the hope that it will be useful,
17  * but WITHOUT ANY WARRANTY; without even the implied warranty of
18  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
19  * GNU Affero General Public License for more details.
20  *
21  * You should have received a copy of the GNU Affero General Public License
22  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
23 */
24
25
26 var etalage = etalage || {};
27
28
29 etalage.map = (function ($) {
30     var leafletMap;
31
32     function createMap(mapDiv, geojsonData) {
33         var icon;
34
35         leafletMap = new L.Map(mapDiv, {
36             scrollWheelZoom: false
37         }).addLayer(
38             new L.TileLayer(etalage.map.tileUrlTemplate, {
39                 attribution: 'Cartel CC-By-SA par <a href="http://openstreetmap.org/">OpenStreetMap</a>',
40                 maxZoom: 18
41             })
42         );
43
44         if (window.PIE) {
45             $('.leaflet-control, .leaflet-control-zoom, .leaflet-control-zoom-in, .leaflet-control-zoom-out').each(
46                 function() {
47                     // Apply CSS3 border-radius for IE to zoom controls.
48                     PIE.attach(this);
49                 }
50             );
51         }
52
53         // Text settings
54         leafletMap.attributionControl.setPrefix('Carte par <a href="http://leaflet.cloudmade.com">Leaflet</a>');
55         $('.leaflet-control-zoom-in').attr('title', 'Zoomer');
56         $('.leaflet-control-zoom-out').attr('title', 'D├ęzoomer');
57
58         // Icon settings
59         icon = new L.Icon(etalage.map.markersUrl + '/map-icons-collection-2.0/numeric/redblank.png');
60         icon.iconAnchor = new L.Point(14, 24);
61         icon.iconSize = new L.Point(27, 27);
62         icon.shadowSize = new L.Point(51, 27);
63         icon.shadowUrl = etalage.map.markersUrl + '/misc/shadow.png';
64
65         var geojson = new L.GeoJSON();
66         geojson.on('featureparse', function(e) {
67             e.layer.options.icon = icon;
68
69             if (e.properties.id && e.properties.name)  {
70                 e.layer.bindPopup('<a href="/organismes/' + e.properties.id + '">' +  e.properties.name + '</a>');
71             }
72         });
73         leafletMap.addLayer(geojson);
74         leafletMap._geojsonLayer = geojson;
75
76         if (window.PIE) {
77             leafletMap.on('layeradd', function(event) {
78                 if (event.layer._wrapper && event.layer._opened === true && event.layer._content) {
79                     // Apply CSS3 border-radius for IE to popup.
80                     PIE.attach(event.layer._wrapper);
81                 }
82             });
83         }
84
85         if (geojsonData) {
86             setGeoJSONData(geojsonData);
87         } else {
88             fetchPois();
89         }
90     }
91
92     function fetchPois() {
93         $.ajax({
94             url: etalage.map.geojsonUrl,
95             dataType: 'json',
96             data: {
97                 term: $('#term').val(),
98                 territory: $('#territory').val()
99             },
100             success: setGeoJSONData
101         });
102     }
103
104     function getBBox(features) {
105         var featureLatLng, coordinates = [];
106
107         $.each(features, function() {
108             featureLatLng = new L.LatLng(this.geometry.coordinates[1], this.geometry.coordinates[0]);
109             coordinates.push(featureLatLng);
110         });
111
112         return new L.LatLngBounds(coordinates);
113     }
114
115     function setGeoJSONData(data) {
116         leafletMap._geojsonLayer.addGeoJSON(data);
117         leafletMap.fitBounds(etalage.map.getBBox(data.features));
118     }
119
120     function singleMarkerMap(mapDiv, latitude, longitude) {
121         var icon, latLng, map, marker;
122
123         map = new L.Map(mapDiv, {
124             scrollWheelZoom: false
125         }).addLayer(
126             new L.TileLayer(etalage.map.tileUrlTemplate, {
127                 attribution: 'Carte CC-By-SA par <a href="http://openstreetmap.org/">OpenStreetMap</a>',
128                 maxZoom: 18
129             })
130         );
131
132         icon = new L.Icon(etalage.map.markersUrl + '/images/markers/map-icons-collection-2.0/numeric/redblank.png');
133         icon.iconAnchor = new L.Point(14, 24);
134         icon.iconSize = new L.Point(27, 27);
135         icon.shadowSize = new L.Point(51, 27);
136         icon.shadowUrl = etalage.map.markersUrl + '/images/markers/misc/shadow.png';
137
138         latLng = new L.LatLng(latitude, longitude);
139         marker = new L.Marker(latLng);
140         marker.options.icon = icon;
141         map.addLayer(marker);
142
143         map.setView(latLng, map.getMaxZoom() - 3);
144
145         return map;
146     }
147
148     return {
149         createMap: createMap,
150         geojsonUrl: null,
151         getBBox: getBBox,
152         markersUrl: null,
153         singleMarkerMap: singleMarkerMap,
154         tileUrlTemplate: null
155     };
156 })(jQuery);
157