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

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

Version 4.3.2 : on vire les couches mapbox qui ne sont plus disponibles en accès libre + retrait du paramètre titre du modèle de la carte après discussion sur la liste spip-zone

File size: 14.0 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                                }));
155                        }
156                }
157
158                // Pour Ajouter le texte de popup d'un point (feature = item d'un GeoJson)
159                var setGeoJsonFeaturePopup = function (feature, layer) {
160                        // Déclarer le contenu de la popup s'il y en a
161                        if (feature.properties && (feature.properties.title || feature.properties.description)){
162                                var popupContent = '';
163                                if (feature.properties.title)
164                                        popupContent = '<strong class="title">' + feature.properties.title + '</strong>';
165                                if (feature.properties.description)
166                                        popupContent = popupContent + feature.properties.description;
167                                layer.bindPopup(popupContent);
168                        }
169                }
170
171                [(#REM)
172                        Il y a pour le moment 2 façons d'analyser le GeoJson calculé
173                        en fonction de si on veut faire du clustering (regrouper les points proches)
174                        ou non. Il y a certainement moyen de regrouper en un seul élément
175                        la plupart du code, en se passant du js L.geoJson même hors clustering.
176                        À réfléchir.
177                ]
178                <BOUCLE_fonction_analyse_json(CONDITION){si #ENV{cluster}|!={oui}}>
179                // Analyse des points et déclaration (sans regroupement des points en cluster)
180                var parseGeoJson = function(data, map) {
181                        var geojson = new L.geoJson('', {[
182                                style: (#ENV*{path_styles}|json_encode),
183                                ]onEachFeature: function (feature, layer) {
184                                        // Déclarer l'icone du point
185                                        setGeoJsonFeatureIcon(feature, layer);
186                                        // Déclarer le contenu de la popup s'il y en a
187                                        setGeoJsonFeaturePopup(feature, layer);
188                                }
189                        }).addTo(map);
190                        geojson.addData(data);
191                        [(#ENV{autocenterandzoom,#ENV{centrer_auto}}|oui)
192                        map.fitBounds(geojson.getBounds());]
193                }
194
195                </BOUCLE_fonction_analyse_json>
196
197                // Analyse des points et déclaration (en regroupant les points en cluster)
198                var parseGeoJson = function(data,map) {
199                        markers = \[\];
200                        /* Pour chaque points présents, on crée un marqueur */
201                        $.each(data.features, function(i, feature) {
202                                if (feature.geometry.coordinates\[0\]) {
203                                        var latlng = new L.LatLng(feature.geometry.coordinates\[1\], feature.geometry.coordinates\[0\]);
204                                        var marker = new L.Marker(latlng);
205                                        // Déclarer l'icone du point
206                                        setGeoJsonFeatureIcon(feature, marker);
207                                        // Déclarer le contenu de la popup s'il y en a
208                                        setGeoJsonFeaturePopup(feature, marker);
209
210                                        marker.id = feature.id;
211                                        markers.push(marker);
212                                }
213                        });
214
215                        /* Ajout des marqueurs dans un clustering JS client */
216                        markerCluster = new L.Marker.Clusterer(map, markers, {[
217                                maxZoom: (#ENV{clusterMaxZoom, #ENV{maxZoom}|?{#ENV{maxZoom}|moins{2},''}}),][
218                                styles: \[[(#ENV*{clusterStyles}|json_encode)]\](#ENV*{clusterStyles}|oui)]
219                        });
220                }
221                <//B_fonction_analyse_json>
222
223
224                <BOUCLE_definir_les_points_de_la_carte(CONDITION){si #ENV{point}|!={non}}>
225                [(#REM)
226                        \#ENV{args} est présent uniquement lors de l'appel d'un modèle <carte_gis|...>
227                        dans un texte et contient alors les paramètres passés au modèle manuellement.
228                        On considère dans ce cas que seuls ces paramètres doivent calculer le json,
229                        et non pas aussi l'environnement automatique ajouté au modèle (comme objet, id_objet)
230                        dans lequel le modèle est appelé.
231                ]
232                // Récupération des points à mettre sur la carte, via json externe
233                jQuery.getJSON("[(#URL_PAGE{gis_json}|url_absolue)]",
234                        {[
235                                objets       : "(#ENV{objets,#ENV{class}}|trim)",]
236                                <BOUCLE_modeles_args_prioritaires(DATA){source table,#LISTE{
237                                        id_objet, id_rubrique, id_secteur, id_parent,
238                                        id_article, id_breve, id_document, id_mot,
239                                        id_groupe, id_auteur, id_syndic, id_forum,
240                                        id_gis, id_evenement
241                                }}>[#VALEUR : (#ENV{args}|?{#ENV{args/#VALEUR},#ENV{#VALEUR}}|trim),
242                                ]</BOUCLE_modeles_args_prioritaires>[
243                                media        : "(#ENV{args}|?{#ENV{args/media},#ENV{media}}|trim)",][
244                                recherche    : "(#ENV{args}|?{#ENV{args/recherche},#ENV{recherche}})",][
245                                mots  : (#ENV{mots}|?{[(#ENV{mots}|trim|json_encode)],''}),][
246                                limit : (#ENV{limit,#ENV{limite,500}}|trim)][
247                                (#ENV{objets}|=={point_libre}|oui)
248                                        [,lat : (#GET{lat}|trim)]
249                                        [,lon : (#GET{lon}|trim)]
250                                        [,titre : (#ENV{titre}|json_encode)]
251                                        [,description : (#ENV{description}|json_encode)]
252                                        [,icone : (#ENV{icone}|json_encode)]
253                                ]
254                        },
255                        function(data) {
256                                if (data){
257                                        // Charger le json (data) et déclarer les points
258                                        parseGeoJson(data, map[(#GET{id})]);
259                                }
260                        }
261                );
262                </BOUCLE_definir_les_points_de_la_carte>
263
264
265                <BOUCLE_test_kml(CONDITION){si (#ENV{kml}|oui)}>
266                        // Définir les couches KML ajoutées à la carte
267                        #SET{kml, #ENV{kml}}
268                        [(#GET{kml}|is_array|non) #SET{kml, #ARRAY{0,#GET{kml}}} ]
269                        <BOUCLE_kml(POUR){tableau #GET{kml}}>
270                                [(#VALEUR|intval|oui)
271                                var kml_#COMPTEUR_BOUCLE = new L.KML(['(#VALEUR|generer_url_entite{document}|url_absolue)'], {async: true}); ]
272                                [(#VALEUR|intval|non)
273                                var kml_#COMPTEUR_BOUCLE = new L.KML(['(#VALEUR|copie_locale)'], {async: true}); ]
274                                [(#ENV{centrer_fichier}|!={non}|et{#TOTAL_BOUCLE|>{1}|non})
275                                kml_#COMPTEUR_BOUCLE.on("loaded", function(e) { map[(#GET{id})].fitBounds(e.target.getBounds()); });]
276                                map[(#GET{id})].addLayer(kml_#COMPTEUR_BOUCLE);
277                        </BOUCLE_kml>
278                </BOUCLE_test_kml>
279
280                <BOUCLE_test_gpx(CONDITION){si (#ENV{gpx}|oui)}>
281                        // Définir les couches GPX ajoutées à la carte
282                        #SET{gpx, #ENV{gpx}}
283                        [(#GET{gpx}|is_array|non) #SET{gpx, #ARRAY{0,#GET{gpx}}} ]
284                        <BOUCLE_gpx(POUR){tableau #GET{gpx}}>
285                                [(#VALEUR|intval|oui)
286                                var gpx_#COMPTEUR_BOUCLE = new L.GPX(['(#VALEUR|generer_url_entite{document}|url_absolue)'], {async: true}); ]
287                                [(#VALEUR|intval|non)
288                                var gpx_#COMPTEUR_BOUCLE = new L.GPX(['(#VALEUR|copie_locale)'], {async: true}); ]
289                                [(#ENV{centrer_fichier}|!={non}|et{#TOTAL_BOUCLE|>{1}|non})
290                                gpx_#COMPTEUR_BOUCLE.on("loaded", function(e) { map[(#GET{id})].fitBounds(e.target.getBounds()); });]
291                                map[(#GET{id})].addLayer(gpx_#COMPTEUR_BOUCLE);
292                        </BOUCLE_gpx>
293                </BOUCLE_test_gpx>
294
295                [(#ENV{localize_visitor,#ENV{localiser_visiteur}}|oui)
296                map[(#GET{id})].locate({setView: true, maxZoom: [(#ENV{zoom,#CONFIG{gis/zoom,0}})]});]
297
298        }
299
300
301        // Charger le javascript de GIS et initialiser la carte
302        $(function(){
303                jQuery.getScript(['(#CONFIG{auto_compress_js}|=={oui}|?{[(#PRODUIRE{fond=javascript/gis.js}|compacte)],[(#PRODUIRE{fond=javascript/gis.js})]})'],function(){
304                        [(#ENV{cluster}|=={oui}|oui)
305                                jQuery.getScript('[(#CHEMIN{javascript/leafclusterer.js}|compacte)]',function(){
306                        ]
307                                if (typeof(callback_map[(#GET{id})]) === "function") {
308                                        init_map[(#GET{id})](callback_map[(#GET{id})]);
309                                } else {
310                                        init_map[(#GET{id})]();
311                                }
312                        [(#ENV{cluster}|=={oui}|oui)
313                                });
314                        ]
315                });
316        });
317
318})(jQuery);
319/*\]\]>*/
320</script>
Note: See TracBrowser for help on using the repository browser.