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

Last change on this file since 70294 was 70294, checked in by guy.cesaro@…, 7 years ago

re-introduction du parametre du modele id_a_ouvrir qui permet d'ouvrir l'infobulle d'un marqueur au chargement de la carte (merci b_b pour le support !)

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