source: spip-zone/_plugins_/gis/trunk/modeles/carte_gis.html @ 70028

Last change on this file since 70028 was 70028, checked in by brunobergot@…, 7 years ago

Version 4.3.4 : définir popupAnchor lorsqu'on utilise un logo personnalisé pour les points afin de bien placer la popup par rapport au marqueur + maj du json/gis_sites qui n'était pas up depuis un moment + simplification de l'écriture des crochets dans les squelettes json

File size: 14.1 KB
Line 
1[(#REM)
2
3Modele carte_gis
4----------------
5
6Parametres possibles :
7
8- id_map|id_carte_gis = 1          id de la carte
9- lat|latit|latitude = 48.3        latitude du centre de la carte
10- lon|lonxit|longitude = -4.7      longitude du centre de la carte
11- zoom = 5                         zoom de la carte
12- maxZoom = 13                     zoom maximum autorisé
13
14- sw_lat = lat - 10°               latitude du sud-ouest de la bounding box
15- sw_lon = lon - 10°               longitude du sud-ouest de la bounding box
16- ne_lat = lat + 10°               latitude du nord-est de la bounding box
17- ne_lon = lon + 10°               longitude du nord-est de la bounding box
18
19- width|largeur = 100%             largeur de la carte, 100% par defaut
20- height|hauteur = 400px           hauteur de la carte, 400px par defaut
21- style = non                      ne pas styler la carte
22
23- fullscreen = oui                     afficher un bouton pour passer la carte en plein écran
24- zoom_molette|zoom_wheel = non        désactiver le zoom avec la molette de la souris, actif par defaut
25- control_type|controle_type = non     ne pas afficher les controles de changement de type
26- no_control|aucun_controle = oui      ne pas afficher les controles de la carte
27- scale = oui                          afficher l'échelle de la carte
28- overview = oui                       afficher une mini carte de situation
29
30- autocenterandzoom|centrer_auto = oui        centrer et zoomer la carte automatiquement pour afficher tous les marqueurs
31- localize_visitor|localiser_visiteur = oui   centrer la carte sur la position du visiteur (API geolocation HTML5)
32
33- objets = gis                     type d'objets à afficher (fichier json/gis_xx qui génère la source de donnees)
34- limit|limite = 500               nombre max de marqueurs à afficher, 500 par defaut
35- kml = 12                         kml à superposer à la carte (id_document ou url ou liste d'url)
36- gpx = 12                         gpx à superposer à la carte (id_document ou url ou liste d'url)
37- centrer_fichier = non            permet de ne pas centrer la carte automatiquement sur les fichiers kml/gpx surperposés
38- point = non                      si elle vaut "non" cette option n'affichera pas de points du tout (utile pour n'afficher qu'un kml par exemple)
39
40- media = non                      permet de passer le critère 'media' (pour les documents)
41- path_styles=#ARRAY{color,#fff}   options de style des éléments de la couche GeoJSON (voir http://leafletjs.com/reference.html#path-options)
42
43Uniquement si objets = point_libre :
44- icone = chemin/vers/image        image utilisée pour le marker
45- titre                            titre du point
46- description                      description du point
47
48Clustering (regroupement de points proches) :
49- cluster = oui                    Active le clustering
50- clusterMaxZoom = 11              Regroupe les points jusque à ce zoom, mais pas au delà
51- clusterStyles = #ARRAY{}         Styles appliqués aux clusters
52
53]
54
55[(#SET{width,#ENV{width,#ENV{largeur,100%}}})]
56[(#SET{height,#ENV{height,#ENV{hauteur,400px}}})]
57[(#SET{id,#ENV{id_carte_gis,#ENV{id_map,#ENV{id,1}}}})]
58[(#REM) -- compat gis v1 -- ]
59[(#SET{lat,#ENV{lat,#ENV{latit,#ENV{latitude,#CONFIG{gis/lat,0}}}}})]
60[(#SET{lon,#ENV{lon,#ENV{lonxit,#ENV{longitude,#CONFIG{gis/lon,0}}}}})]
61[(#REM) On utilise la bounding box seulement si le centre n'a pas été donné et si les quatre valeurs de la bounding box sont renseignées
62    les valeurs par defaut sont "centre +/- 10°", ce qui est naze, mais c'est un cas normalement impossible
63]
64[(#ENV{lat}|ou{#ENV{lon}}|non|et{#ENV{sw_lat}}|et{#ENV{sw_lon}}|et{#ENV{ne_lat}}|et{#ENV{ne_lon}})
65        #SET{utiliser_bb, oui}
66        #SET{sw_lat,#ENV{sw_lat,#GET{lat}|moins{10}}}
67        #SET{sw_lon,#ENV{sw_lon,#GET{lon}|moins{10}}}
68        #SET{ne_lat,#ENV{ne_lat,#GET{lat}|plus{10}}}
69        #SET{ne_lon,#ENV{ne_lon,#GET{lon}|plus{10}}}
70]
71
72<div id="map[(#GET{id})]" class="carte_gis p"[(#ENV{style}|!={'non'}|?{' '})style="[width:(#GET{width});][ height:(#GET{height});]"]></div>
73
74<script type="text/javascript">/*<!\[CDATA\[*/
75
76var map[(#GET{id})];
77
78(function($){
79
80        var init_map[(#GET{id})] = function(callback) {
81                var map_container = 'map[(#GET{id})]';
82
83                // Création de la carte Leafleat
84                map[(#GET{id})] = new L.Map(map_container,{
85                        scrollWheelZoom: [(#ENV{zoom_molette,#ENV{zoom_wheel}}|=={non}|?{false,true})],
86                        zoomControl: [(#ENV{no_control,#ENV{aucun_controle}}|!={oui}|?{true,false})][,
87                        maxZoom: (#ENV{maxZoom})]
88                });
89
90                // Appeler l'éventuelle fonction de callback
91                if (callback && typeof(callback) === "function") {
92                        map[(#GET{id})].on('load',function(e){
93                                callback(e.target);
94                        });
95                }
96
97                // Déterminer la position initiale de la carte
98                [(#GET{utiliser_bb}|non)
99                map[(#GET{id})].setView(new L.LatLng([(#GET{lat})], [(#GET{lon})]), [(#ENV{zoom,#CONFIG{gis/zoom,0}})]);]
100
101                [(#GET{utiliser_bb}|oui)
102                map[(#GET{id})].fitBounds(
103                        new L.LatLngBounds(
104                                new L.LatLng([(#GET{sw_lat})], [(#GET{sw_lon})]),
105                                new L.LatLng([(#GET{ne_lat})], [(#GET{ne_lon})])
106                        )
107                );]
108
109                // Fond de carte par défaut (layer)
110                #SET{layer_defaut,#REM|gis_layer_defaut} #SET{layers,#EVAL{$GLOBALS['gis_layers']}}
111                var [(#GET{layer_defaut})] = [new (#GET{layers/#GET{layer_defaut}/layer})];
112                map[(#GET{id})].addLayer([(#GET{layer_defaut})]);
113
114                <B_layers>
115                // liste des fonds de carte possibles
116                var layers_control = new L.Control.Layers();
117                layers_control.addBaseLayer([(#GET{layer_defaut})],["(#GET{layers/#GET{layer_defaut}/nom})"]);
118                <BOUCLE_layers(DATA){source table, #GET{layers}}
119                        {si #ENV{control_type,#ENV{controle_type}}|!={non}}
120                        {si #ENV{no_control,#ENV{aucun_controle}}|!={oui}}
121                        {si #CONFIG{gis/layers,#ARRAY}|count|>{1}}>[
122                (#CLE|!={#GET{layer_defaut}}|et{#CLE|in_any{#CONFIG{gis/layers}}|oui})
123                layers_control.addBaseLayer([new (#LAYER)],"#NOM");]
124                </BOUCLE_layers>
125                map[(#GET{id})].addControl(layers_control);
126                // ajouter l'objet du controle de layers à la carte pour permettre d'y accéder depuis le callback
127                map[(#GET{id})].layersControl = layers_control;
128                // classe noajax sur le layer_control pour éviter l'ajout de hidden par SPIP
129                $(layers_control._form).addClass('noajax');
130                </B_layers>
131
132                map[(#GET{id})].setView(new L.LatLng(#GET{lat},#GET{lon}),#ENV{zoom,#CONFIG{gis/zoom,0}});
133
134                map[(#GET{id})].attributionControl.setPrefix('');
135
136                // Ajout des contrôles de la carte
137                [(#ENV{scale}|et{#ENV{no_control,#ENV{aucun_controle}}|!={oui}}|oui)
138                map[(#GET{id})].addControl(new L.Control.Scale());
139                ][(#ENV{fullscreen}|et{#ENV{no_control,#ENV{aucun_controle}}|!={oui}}|oui)
140                map[(#GET{id})].addControl(new L.Control.FullScreen());
141                ][(#ENV{overview}|et{#ENV{no_control,#ENV{aucun_controle}}|!={oui}}|oui)
142                var minimap_layer = [new (#GET{layers/#GET{layer_defaut}/layer})];
143                var miniMap = new L.Control.MiniMap(minimap_layer,{width: 100,height: 100}).addTo(map[(#GET{id})]);
144                ]
145
146                // Pour Ajouter l'icone d'un point (feature = item d'un GeoJson)
147                var setGeoJsonFeatureIcon = function (feature, layer) {
148                        // Déclarer l'icone du points, si défini
149                        if (feature.properties && feature.properties.icon){
150                                layer.setIcon(new L.Icon({
151                                        iconUrl: feature.properties.icon,
152                                        iconSize: new L.Point( feature.properties.icon_size\[0\], feature.properties.icon_size\[1\] ),
153                                        iconAnchor: new L.Point( feature.properties.icon_anchor\[0\], feature.properties.icon_anchor\[1\] ),
154                                        popupAnchor: new L.Point( feature.properties.popup_anchor\[0\], feature.properties.popup_anchor\[1\] )
155                                }));
156                        }
157                }
158
159                // Pour Ajouter le texte de popup d'un point (feature = item d'un GeoJson)
160                var setGeoJsonFeaturePopup = function (feature, layer) {
161                        // Déclarer le contenu de la popup s'il y en a
162                        if (feature.properties && (feature.properties.title || feature.properties.description)){
163                                var popupContent = '';
164                                if (feature.properties.title)
165                                        popupContent = '<strong class="title">' + feature.properties.title + '</strong>';
166                                if (feature.properties.description)
167                                        popupContent = popupContent + feature.properties.description;
168                                layer.bindPopup(popupContent);
169                        }
170                }
171
172                [(#REM)
173                        Il y a pour le moment 2 façons d'analyser le GeoJson calculé
174                        en fonction de si on veut faire du clustering (regrouper les points proches)
175                        ou non. Il y a certainement moyen de regrouper en un seul élément
176                        la plupart du code, en se passant du js L.geoJson même hors clustering.
177                        À réfléchir.
178                ]
179                <BOUCLE_fonction_analyse_json(CONDITION){si #ENV{cluster}|!={oui}}>
180                // Analyse des points et déclaration (sans regroupement des points en cluster)
181                var parseGeoJson = function(data, map) {
182                        var geojson = new L.geoJson('', {[
183                                style: (#ENV*{path_styles}|json_encode),
184                                ]onEachFeature: function (feature, layer) {
185                                        // Déclarer l'icone du point
186                                        setGeoJsonFeatureIcon(feature, layer);
187                                        // Déclarer le contenu de la popup s'il y en a
188                                        setGeoJsonFeaturePopup(feature, layer);
189                                }
190                        }).addTo(map);
191                        geojson.addData(data);
192                        [(#ENV{autocenterandzoom,#ENV{centrer_auto}}|oui)
193                        map.fitBounds(geojson.getBounds());]
194                }
195
196                </BOUCLE_fonction_analyse_json>
197
198                // Analyse des points et déclaration (en regroupant les points en cluster)
199                var parseGeoJson = function(data,map) {
200                        markers = \[\];
201                        /* Pour chaque points présents, on crée un marqueur */
202                        $.each(data.features, function(i, feature) {
203                                if (feature.geometry.coordinates\[0\]) {
204                                        var latlng = new L.LatLng(feature.geometry.coordinates\[1\], feature.geometry.coordinates\[0\]);
205                                        var marker = new L.Marker(latlng);
206                                        // Déclarer l'icone du point
207                                        setGeoJsonFeatureIcon(feature, marker);
208                                        // Déclarer le contenu de la popup s'il y en a
209                                        setGeoJsonFeaturePopup(feature, marker);
210
211                                        marker.id = feature.id;
212                                        markers.push(marker);
213                                }
214                        });
215
216                        /* Ajout des marqueurs dans un clustering JS client */
217                        markerCluster = new L.Marker.Clusterer(map, markers, {[
218                                maxZoom: (#ENV{clusterMaxZoom, #ENV{maxZoom}|?{#ENV{maxZoom}|moins{2},''}}),][
219                                styles: \[[(#ENV*{clusterStyles}|json_encode)]\](#ENV*{clusterStyles}|oui)]
220                        });
221                }
222                <//B_fonction_analyse_json>
223
224
225                <BOUCLE_definir_les_points_de_la_carte(CONDITION){si #ENV{point}|!={non}}>
226                [(#REM)
227                        \#ENV{args} est présent uniquement lors de l'appel d'un modèle <carte_gis|...>
228                        dans un texte et contient alors les paramètres passés au modèle manuellement.
229                        On considère dans ce cas que seuls ces paramètres doivent calculer le json,
230                        et non pas aussi l'environnement automatique ajouté au modèle (comme objet, id_objet)
231                        dans lequel le modèle est appelé.
232                ]
233                // Récupération des points à mettre sur la carte, via json externe
234                jQuery.getJSON("[(#URL_PAGE{gis_json}|url_absolue)]",
235                        {[
236                                objets       : "(#ENV{objets,#ENV{class}}|trim)",]
237                                <BOUCLE_modeles_args_prioritaires(DATA){source table,#LISTE{
238                                        id_objet, id_rubrique, id_secteur, id_parent,
239                                        id_article, id_breve, id_document, id_mot,
240                                        id_groupe, id_auteur, id_syndic, id_forum,
241                                        id_gis, id_evenement
242                                }}>[#VALEUR : (#ENV{args}|?{#ENV{args/#VALEUR},#ENV{#VALEUR}}|trim),
243                                ]</BOUCLE_modeles_args_prioritaires>[
244                                media        : "(#ENV{args}|?{#ENV{args/media},#ENV{media}}|trim)",][
245                                recherche    : "(#ENV{args}|?{#ENV{args/recherche},#ENV{recherche}})",][
246                                mots  : (#ENV{mots}|?{[(#ENV{mots}|trim|json_encode)],''}),][
247                                limit : (#ENV{limit,#ENV{limite,500}}|trim)][
248                                (#ENV{objets}|=={point_libre}|oui)
249                                        [,lat : (#GET{lat}|trim)]
250                                        [,lon : (#GET{lon}|trim)]
251                                        [,titre : (#ENV{titre}|json_encode)]
252                                        [,description : (#ENV{description}|json_encode)]
253                                        [,icone : (#ENV{icone}|json_encode)]
254                                ]
255                        },
256                        function(data) {
257                                if (data){
258                                        // Charger le json (data) et déclarer les points
259                                        parseGeoJson(data, map[(#GET{id})]);
260                                }
261                        }
262                );
263                </BOUCLE_definir_les_points_de_la_carte>
264
265
266                <BOUCLE_test_kml(CONDITION){si (#ENV{kml}|oui)}>
267                        // Définir les couches KML ajoutées à la carte
268                        #SET{kml, #ENV{kml}}
269                        [(#GET{kml}|is_array|non) #SET{kml, #ARRAY{0,#GET{kml}}} ]
270                        <BOUCLE_kml(POUR){tableau #GET{kml}}>
271                                [(#VALEUR|intval|oui)
272                                var kml_#COMPTEUR_BOUCLE = new L.KML(['(#VALEUR|generer_url_entite{document}|url_absolue)'], {async: true}); ]
273                                [(#VALEUR|intval|non)
274                                var kml_#COMPTEUR_BOUCLE = new L.KML(['(#VALEUR|copie_locale)'], {async: true}); ]
275                                [(#ENV{centrer_fichier}|!={non}|et{#TOTAL_BOUCLE|>{1}|non})
276                                kml_#COMPTEUR_BOUCLE.on("loaded", function(e) { map[(#GET{id})].fitBounds(e.target.getBounds()); });]
277                                map[(#GET{id})].addLayer(kml_#COMPTEUR_BOUCLE);
278                        </BOUCLE_kml>
279                </BOUCLE_test_kml>
280
281                <BOUCLE_test_gpx(CONDITION){si (#ENV{gpx}|oui)}>
282                        // Définir les couches GPX ajoutées à la carte
283                        #SET{gpx, #ENV{gpx}}
284                        [(#GET{gpx}|is_array|non) #SET{gpx, #ARRAY{0,#GET{gpx}}} ]
285                        <BOUCLE_gpx(POUR){tableau #GET{gpx}}>
286                                [(#VALEUR|intval|oui)
287                                var gpx_#COMPTEUR_BOUCLE = new L.GPX(['(#VALEUR|generer_url_entite{document}|url_absolue)'], {async: true}); ]
288                                [(#VALEUR|intval|non)
289                                var gpx_#COMPTEUR_BOUCLE = new L.GPX(['(#VALEUR|copie_locale)'], {async: true}); ]
290                                [(#ENV{centrer_fichier}|!={non}|et{#TOTAL_BOUCLE|>{1}|non})
291                                gpx_#COMPTEUR_BOUCLE.on("loaded", function(e) { map[(#GET{id})].fitBounds(e.target.getBounds()); });]
292                                map[(#GET{id})].addLayer(gpx_#COMPTEUR_BOUCLE);
293                        </BOUCLE_gpx>
294                </BOUCLE_test_gpx>
295
296                [(#ENV{localize_visitor,#ENV{localiser_visiteur}}|oui)
297                map[(#GET{id})].locate({setView: true, maxZoom: [(#ENV{zoom,#CONFIG{gis/zoom,0}})]});]
298
299        }
300
301
302        // Charger le javascript de GIS et initialiser la carte
303        $(function(){
304                jQuery.getScript(['(#CONFIG{auto_compress_js}|=={oui}|?{[(#PRODUIRE{fond=javascript/gis.js}|compacte)],[(#PRODUIRE{fond=javascript/gis.js})]})'],function(){
305                        [(#ENV{cluster}|=={oui}|oui)
306                                jQuery.getScript('[(#CHEMIN{javascript/leafclusterer.js}|compacte)]',function(){
307                        ]
308                                if (typeof(callback_map[(#GET{id})]) === "function") {
309                                        init_map[(#GET{id})](callback_map[(#GET{id})]);
310                                } else {
311                                        init_map[(#GET{id})]();
312                                }
313                        [(#ENV{cluster}|=={oui}|oui)
314                                });
315                        ]
316                });
317        });
318
319})(jQuery);
320/*\]\]>*/
321</script>
Note: See TracBrowser for help on using the repository browser.