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

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

Suite au message http://article.gmane.org/gmane.comp.web.spip.zone/30857, je commite.

  • Intégration avec le plugin 'insérer modèle' : on peut insérer une carte GIS dans le texte d'un article (ou autre) à partir de la boîte du plugin 'insérer modèle'.
  • modèle 'carte_gis'

Nouvelle option pour le paramètre 'objets' : 'point_libre'
L'idée est de pouvoir insérer une carte centrée sur un point libre (non enregistré en base), en indiquant la latitude et la longitude (+zoom). On peut optionnellement donner un titre et une description à à ce point, et indiquer une image pour le marker (qui sera cherchée via les balises #CHEMIN et #CHEMIN_IMAGE).
Donc, dans le texte d'un article par ex: <carte_gis|objets=point_libre|lat=xx|lon=yy|zoom=zz|titre=mon beau point|description=ma super description|icone=mon_image.png>
Un paramètre supplémentaire : 'titre_carte' pour placer un titre <h3> juste avant la carte.
Donc pour résumer les paramètres ajoutés :

  • dans tous les cas :
  • titre_carte : titre de la carte
  • si 'objets' = 'point_libre'
  • titre : titre du point
  • description: description
  • icone: image ou chemin/vers/image
  • saisie 'carte' : ajout des parametres 'hauteur' et 'largeur'
File size: 10.4 KB
Line 
1[(#REM)
2
3        Modele carte_gis
4
5        Parametres :
6
7        - id_map|id_carte_gis = 1               id de la carte
8        - lat|latit|latitude = 48.3             latitude du centre de la carte
9        - lon|lonxit|longitude = -4.7           longitude du centre de la carte
10        - zoom = 5                              zoom de la carte
11        - sw_lat = lat - 10°                    latitude du sud-ouest de la bounding box
12        - sw_lon = lon - 10°                    longitude du sud-ouest de la bounding box
13        - ne_lat = lat + 10°                    latitude du nord-est de la bounding box
14        - ne_lon = lon + 10°                    longitude du nord-est de la bounding box
15        - titre_carte                           titre affiché au dessus la carte
16        - width|largeur = 100%                  largeur de la carte, 100% par defaut
17        - height|hauteur = 400px                hauteur de la carte, 400px par defaut
18        - style = non                           ne pas styler la carte
19        - zoom_molette|zoom_wheel = non         désactiver le zoom avec la molette de la souris, actif par defaut
20        - fullscreen = oui                      afficher un bouton pour passer la carte en plein écran
21        - control_type|controle_type = non      ne pas afficher les controles de changement de type
22        - no_control|aucun_controle = oui       ne pas afficher les controles de la carte
23        - scale = oui                           afficher l'échelle de la carte
24        - overview = oui                        afficher une mini carte de situation
25        - limit|limite = 500                    nombre max de marqueurs à afficher, 500 par defaut
26        - objets = gis                          type d'objets à afficher (fichier json/gis_xx qui génère la source de donnees)
27        - autocenterandzoom|centrer_auto = oui  centrer et zoomer la carte automatiquement pour afficher tous les marqueurs
28        - kml = 12                              kml à superposer à la carte (id_document ou url)
29        - gpx = 12                              gpx à superposer à la carte (id_document ou url)
30        - centrer_fichier = non                 permet de ne pas centrer la carte automatiquement sur les fichiers kml/gpx surperposés
31        - localize_visitor|localiser_visiteur = oui             centrer la carte sur la position du visiteur (API geolocation HTML5)
32        - point = non                           si elle vaut "non" cette option n'affichera pas de points du tout (utile pour n'afficher qu'un kml par exemple)
33        - media = non                           permet de passer le critère 'media' (pour les documents)
34        - path_styles=#ARRAY{color,#fff}        options de style des éléments de la couche GeoJSON (voir http://leafletjs.com/reference.html#path-options)
35        uniquement si objets = point_libre :
36        - icone = chemin/vers/image             image utilisée pour le marker
37        - titre                                 titre du point
38        - description                           description du point
39
40]
41
42[(#SET{width,#ENV{width,#ENV{largeur,100%}}})]
43[(#SET{height,#ENV{height,#ENV{hauteur,400px}}})]
44[(#SET{id,#ENV{id_carte_gis,#ENV{id_map,#ENV{id,1}}}})]
45[(#REM) -- compat gis v1 -- ]
46[(#SET{lat,#ENV{lat,#ENV{latit,#ENV{latitude,#CONFIG{gis/lat,0}}}}})]
47[(#SET{lon,#ENV{lon,#ENV{lonxit,#ENV{longitude,#CONFIG{gis/lon,0}}}}})]
48[(#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
49    les valeurs par defaut sont "centre +/- 10°", ce qui est naze, mais c'est un cas normalement impossible
50]
51[(#ENV{lat}|ou{#ENV{lon}}|non|et{#ENV{sw_lat}}|et{#ENV{sw_lon}}|et{#ENV{ne_lat}}|et{#ENV{ne_lon}})
52        #SET{utiliser_bb, oui}
53        #SET{sw_lat,#ENV{sw_lat,#GET{lat}|moins{10}}}
54        #SET{sw_lon,#ENV{sw_lon,#GET{lon}|moins{10}}}
55        #SET{ne_lat,#ENV{ne_lat,#GET{lat}|plus{10}}}
56        #SET{ne_lon,#ENV{ne_lon,#GET{lon}|plus{10}}}
57]
58
59[<h3>(#ENV{titre_carte})</h3>]
60<div id="map[(#GET{id})]" class="carte_gis p"[(#ENV{style}|!={'non'}|?{' '})style="[width:(#GET{width});][ height:(#GET{height});]"]></div>
61
62<script type="text/javascript">/*<!\[CDATA\[*/
63
64var map[(#GET{id})];
65
66(function($){
67       
68        var init_map[(#GET{id})] = function(callback) {
69                var map_container = 'map[(#GET{id})]';
70               
71                map[(#GET{id})] = new L.Map(map_container,{
72                        scrollWheelZoom: [(#ENV{zoom_molette,#ENV{zoom_wheel}}|=={non}|?{false,true})],
73                        zoomControl: [(#ENV{no_control,#ENV{aucun_controle}}|!={oui}|?{true,false})]   
74                });
75               
76                // appeler l'éventuelle fonction de callback
77                if (callback && typeof(callback) === "function") {
78                        map[(#GET{id})].on('load',function(e){
79                                callback(e.target);
80                        });
81                }
82               
83                [(#GET{utiliser_bb}|non)
84                map[(#GET{id})].setView(new L.LatLng([(#GET{lat})], [(#GET{lon})]), [(#ENV{zoom,#CONFIG{gis/zoom,0}})]);]
85               
86                [(#GET{utiliser_bb}|oui)
87                map[(#GET{id})].fitBounds(
88                        new L.LatLngBounds(
89                                new L.LatLng([(#GET{sw_lat})], [(#GET{sw_lon})]),
90                                new L.LatLng([(#GET{ne_lat})], [(#GET{ne_lon})])
91                        )
92                );]
93               
94                //default layer
95                #SET{layer_defaut,#REM|gis_layer_defaut} #SET{layers,#EVAL{$GLOBALS['gis_layers']}}
96                var [(#GET{layer_defaut})] = [new (#GET{layers}|table_valeur{#GET{layer_defaut}/layer})];
97                map[(#GET{id})].addLayer([(#GET{layer_defaut})]);
98               
99                <B_layers>
100                var layers_control = new L.Control.Layers();
101                layers_control.addBaseLayer([(#GET{layer_defaut})],["(#GET{layers}|table_valeur{#GET{layer_defaut}/nom})"]);
102                <BOUCLE_layers(DATA){source table, #GET{layers}}{si #ENV{control_type,#ENV{controle_type}}|!={non}|et{#ENV{no_control,#ENV{aucun_controle}}|!={oui}}|et{#CONFIG{gis/layers,#ARRAY}|count|>{1}|oui}|oui}>[
103                (#CLE|!={#GET{layer_defaut}}|oui|et{#CLE|in_array{#CONFIG{gis/layers,#ARRAY}}|oui}|oui)
104                layers_control.addBaseLayer([new (#VALEUR|table_valeur{layer})],"[(#VALEUR|table_valeur{nom})]");]
105                </BOUCLE_layers>
106                map[(#GET{id})].addControl(layers_control);
107                // ajouter l'objet du controle de layers à la carte pour permettre d'y accéder depuis le callback
108                map[(#GET{id})].layersControl = layers_control;
109                // classe noajax sur le layer_control pour éviter l'ajout de hidden par SPIP
110                $(layers_control._form).addClass('noajax');
111                </B_layers>
112               
113                map[(#GET{id})].setView(new L.LatLng(#GET{lat},#GET{lon}),#ENV{zoom,#CONFIG{gis/zoom,0}});
114               
115                map[(#GET{id})].attributionControl.setPrefix('');
116               
117                [(#ENV{scale}|et{#ENV{no_control,#ENV{aucun_controle}}|!={oui}}|oui)
118                map[(#GET{id})].addControl(new L.Control.Scale());
119                ][(#ENV{fullscreen}|et{#ENV{no_control,#ENV{aucun_controle}}|!={oui}}|oui)
120                map[(#GET{id})].addControl(new L.Control.FullScreen());
121                ][(#ENV{overview}|et{#ENV{no_control,#ENV{aucun_controle}}|!={oui}}|oui)
122                var minimap_layer = [new (#GET{layers}|table_valeur{#GET{layer_defaut}/layer})];
123                var miniMap = new L.Control.MiniMap(minimap_layer,{width: 100,height: 100}).addTo(map[(#GET{id})]);
124                ]
125
126                [(#ENV{point}|!={non}|oui)
127                jQuery.getJSON("[(#URL_PAGE{gis_json}|url_absolue)]",
128                        {[
129                                objets : "(#ENV{objets,#ENV{class}}|trim)",][
130                                id_objet : (#ENV{id_objet}|trim),][
131                                id_rubrique : (#ENV{id_rubrique}|trim),][
132                                id_secteur : (#ENV{id_secteur}|trim),][
133                                id_parent : (#ENV{id_parent}|trim),][
134                                id_article : (#ENV{id_article}|trim),][
135                                id_breve : (#ENV{id_breve}|trim),][
136                                id_document : (#ENV{id_document}|trim),][
137                                media : "(#ENV{media}|trim)",][
138                                id_mot : (#ENV{id_mot}|trim),][
139                                id_groupe : (#ENV{id_groupe}|trim),][
140                                id_auteur : (#ENV{id_auteur}|trim),][
141                                id_syndic : (#ENV{id_syndic}|trim),][
142                                id_forum : (#ENV{id_forum}|trim),][
143                                id_evenement : (#ENV{id_evenement}|trim),][
144                                id_gis : (#ENV{id_gis}|trim),][
145                                recherche : "(#ENV{recherche})",][
146                                mots : (#ENV{mots}|?{[(#ENV{mots}|trim|json_encode)],''}),][
147                                limit : (#ENV{limit,#ENV{limite,500}}|trim)][
148                                (#ENV{objets}|=={point_libre}|oui)
149                                        [,lat : (#GET{lat}|trim)]
150                                        [,lon : (#GET{lon}|trim)]
151                                        [,titre : (#ENV{titre}|json_encode)]
152                                        [,description : (#ENV{description}|json_encode)]
153                                        [,icone : (#ENV{icone}|json_encode)]
154                                ]
155                        },
156                        function(data) {
157                                if (data){
158                                        var geojson = new L.geoJson('', {[
159                                                style: (#ENV*{path_styles}|json_encode),
160                                                ]onEachFeature: function (feature, layer) {
161                                                        if (feature.properties && feature.properties.icon){
162                                                                layer.setIcon(new L.Icon({
163                                                                        iconUrl: feature.properties.icon,
164                                                                        iconSize: new L.Point( feature.properties.icon_size\[0\], feature.properties.icon_size\[1\] ),
165                                                                        iconAnchor: new L.Point( feature.properties.icon_anchor\[0\], feature.properties.icon_anchor\[1\] )
166                                                                }));
167                                                        }
168                                                        if (feature.properties && (feature.properties.title || feature.properties.description)){
169                                                                var popupContent = '';
170                                                                if (feature.properties.title)
171                                                                        popupContent = '<strong>' + feature.properties.title + '</strong>';
172                                                                if (feature.properties.description)
173                                                                        popupContent = popupContent + feature.properties.description;
174                                                                layer.bindPopup(popupContent);
175                                                        }
176                                                }
177                                        }).addTo(map[(#GET{id})]);
178                                        geojson.addData(data);
179                                        [(#ENV{autocenterandzoom,#ENV{centrer_auto}}|oui)
180                                        map[(#GET{id})].fitBounds(geojson.getBounds());]
181                                }
182                        }
183                );]
184               
185                <BOUCLE_test_kml(CONDITION){si (#ENV{kml}|oui)}>
186                        #SET{kml, #ENV{kml}}
187                        [(#GET{kml}|is_array|non) #SET{kml, #ARRAY{0,#GET{kml}}} ]
188                        <BOUCLE_kml(POUR){tableau #GET{kml}}>
189                                [(#VALEUR|intval|oui)
190                                var kml_#COMPTEUR_BOUCLE = new L.KML(['(#VALEUR|generer_url_entite{document}|url_absolue)'], {async: true}); ]
191                                [(#VALEUR|intval|non)
192                                var kml_#COMPTEUR_BOUCLE = new L.KML(['(#VALEUR|copie_locale)'], {async: true}); ]
193                                [(#ENV{centrer_fichier}|!={non}|et{#TOTAL_BOUCLE|>{1}|non})
194                                kml_#COMPTEUR_BOUCLE.on("loaded", function(e) { map[(#GET{id})].fitBounds(e.target.getBounds()); });]
195                                map[(#GET{id})].addLayer(kml_#COMPTEUR_BOUCLE);
196                        </BOUCLE_kml>
197                </BOUCLE_test_kml>
198                <BOUCLE_test_gpx(CONDITION){si (#ENV{gpx}|oui)}>
199                        #SET{gpx, #ENV{gpx}}
200                        [(#GET{gpx}|is_array|non) #SET{gpx, #ARRAY{0,#GET{gpx}}} ]
201                        <BOUCLE_gpx(POUR){tableau #GET{gpx}}>
202                                [(#VALEUR|intval|oui)
203                                var gpx_#COMPTEUR_BOUCLE = new L.GPX(['(#VALEUR|generer_url_entite{document}|url_absolue)'], {async: true}); ]
204                                [(#VALEUR|intval|non)
205                                var gpx_#COMPTEUR_BOUCLE = new L.GPX(['(#VALEUR|copie_locale)'], {async: true}); ]
206                                [(#ENV{centrer_fichier}|!={non}|et{#TOTAL_BOUCLE|>{1}|non})
207                                gpx_#COMPTEUR_BOUCLE.on("loaded", function(e) { map[(#GET{id})].fitBounds(e.target.getBounds()); });]
208                                map[(#GET{id})].addLayer(gpx_#COMPTEUR_BOUCLE);
209                        </BOUCLE_gpx>
210                </BOUCLE_test_gpx>
211               
212                [(#ENV{localize_visitor,#ENV{localiser_visiteur}}|oui)
213                map[(#GET{id})].locate({setView: true, maxZoom: [(#ENV{zoom,#CONFIG{gis/zoom,0}})]});]
214               
215        }
216
217        $(function(){
218                jQuery.getScript(['(#CONFIG{auto_compress_js}|=={oui}|?{[(#PRODUIRE{fond=javascript/gis.js}|compacte)],[(#PRODUIRE{fond=javascript/gis.js})]})'],function(){
219                        if (typeof(callback_map[(#GET{id})]) === "function") {
220                                init_map[(#GET{id})](callback_map[(#GET{id})]);
221                        } else {
222                                init_map[(#GET{id})]();
223                        }
224                });
225        });
226
227})(jQuery);
228/*\]\]>*/
229</script>
Note: See TracBrowser for help on using the repository browser.