source: spip-zone/_plugins_/gis/trunk/saisies/carte.html @ 81060

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

pétouille, ordre des champs dans le code

File size: 9.7 KB
Line 
1[(#REM)
2
3        Saisie carte
4
5        Parametres optionnels:
6
7        - lat = 48.3                    latitude du centre de la carte
8        - lon = -4.7                    longitude du centre de la carte
9        - zoom = 5                      zoom de la carte
10        - sw_lat = lat - 10°            latitude du sud-ouest de la bounding box
11        - sw_lon = lon - 10°            longitude du sud-ouest de la bounding box
12        - ne_lat = lat + 10°            latitude du nord-est de la bounding box
13        - ne_lon = lon + 10°            longitude du nord-est de la bounding box
14        - largeur = 100%
15        - hauteur = 350px
16
17]
18
19[(#SET{init_lat,#ENV{lat,#CONFIG{gis/lat,0}}})]
20[(#SET{init_lon,#ENV{lon,#CONFIG{gis/lon,0}}})]
21[(#SET{init_zoom,#ENV{zoom,#CONFIG{gis/zoom,0}}})]
22[(#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
23        Les valeurs par defaut sont "centre +/- 10°", ce qui est naze, mais c'est un cas normalement impossible
24]
25[(#ENV{lat}|ou{#ENV{lon}}|non|et{#ENV{sw_lat}}|et{#ENV{sw_lon}}|et{#ENV{ne_lat}}|et{#ENV{ne_lon}})
26        #SET{utiliser_bb, oui}
27        #SET{init_sw_lat,#ENV{sw_lat,#GET{lat}|moins{10}}}
28        #SET{init_sw_lon,#ENV{sw_lon,#GET{lon}|moins{10}}}
29        #SET{init_ne_lat,#ENV{ne_lat,#GET{lat}|plus{10}}}
30        #SET{init_ne_lon,#ENV{ne_lon,#GET{lon}|plus{10}}}
31]
32
33<li class="pleine_largeur editer editer_[(#ENV{nom})][ (#ENV{li_class})][ saisie_(#ENV{type_saisie})]"[ data-id="(#ENV{id_saisie})"]>
34#ENV*{inserer_debut}
35<div id="map_[(#ENV{nom})]" name="formMap" class="formMap" style="width: #ENV{largeur,100%}; height: #ENV{hauteur,350px}"></div>
36<script type="text/javascript">
37/*<![CDATA[*/
38var form_map,
39        annuler_geocoder = 0;
40[(#ENV{recherche}|!={non}|oui|et{#CONFIG{gis/geocoder}|oui})
41[(#SET{geocoder,oui})]
42var geocoder;]
43
44(function($){
45        var champ_lat = $('#champ_#ENV{champ_lat,lat}'),
46                champ_lon = $('#champ_#ENV{champ_lon,lon}'),
47                champ_zoom = $('#champ_#ENV{champ_zoom,zoom}'),
48                champ_adresse = $('#champ_#ENV{champ_adresse,adresse}'),
49                champ_code_postal = $('##ENV{champ_code_postal,code_postal}'),
50                champ_ville = $('#champ_#ENV{champ_ville,ville}'),
51                champ_departement = $('#champ_#ENV{champ_departement,departement}'),
52                champ_region = $('#champ_#ENV{champ_region,region}'),
53                champ_pays = $('#champ_#ENV{champ_pays,pays}'),
54                champ_code_pays = $('#champ_#ENV{champ_code_pays,code_pays}'),
55                marker;
56
57        var maj_inputs = function(map,data,action) {
58                [(#GET{geocoder}|oui)
59                if (action != 'geocoding') {
60                        var f = geocoder.geocode(data);
61                }]
62                var zoom = map.getZoom();
63                if(data.lng <= -180) data.lng = data.lng+360
64                else if(data.lng > 180) data.lng = data.lng-360;
65                $('#champ_#ENV{champ_zoom,zoom}').val(zoom);
66                if(action == 'click'){
67                        $('#champ_#ENV{champ_lat,lat}').val(data.lat);
68                        $('#champ_#ENV{champ_lon,lon}').val(data.lng); 
69                        annuler_geocoder = 1;
70                        form_map.panTo(data);
71                        marker.setLatLng(data);
72                }
73                else if(annuler_geocoder != 1){
74                        if(data.point == 'undefined'){
75                                $('#champ_#ENV{champ_lat,lat}').val(data.lat);
76                                $('#champ_#ENV{champ_lon,lon}').val(data.lng);
77                                form_map.panTo(data);
78                                marker.setLatLng(data);
79                        }else{
80                                $('#champ_#ENV{champ_lat,lat}').val(data.point.lat);
81                                $('#champ_#ENV{champ_lon,lon}').val(data.point.lng);
82                                form_map.panTo(data.point);
83                                marker.setLatLng(data.point);
84                        }
85                }
86                if (!marker._map)
87                        form_map.addLayer(marker);
88        }
89
90        [(#GET{geocoder}|oui)
91        function geocode(query) {
92                if(! query.error){
93                        $('#champ_#ENV{champ_adresse,adresse}').val(query.street);
94                        $('#champ_#ENV{champ_code_postal,code_postal}').val(query.postcode);
95                        $('#champ_#ENV{champ_ville,ville}').val(query.locality);
96                        $('#champ_#ENV{champ_departement,departement}').val(query.departement);
97                        $('#champ_#ENV{champ_region,region}').val(query.region); 
98                        $('#champ_#ENV{champ_pays,pays}').val(query.country);
99                        $('#champ_#ENV{champ_code_pays,code_pays}').val(query.country_code);
100                        maj_inputs(form_map,query,'geocoding');
101                }else{
102                        alert('<:gis:erreur_geocoder:> '+query.search);
103                }
104        }]
105       
106        var init_map = function(callback) {
107                // creer la carte
108                var map_container = 'map_[(#ENV{nom})]';
109                form_map = new L.Map(map_container);
110               
111                // affecter sur l'objet du DOM
112                jQuery("#"+map_container).get(0).map=form_map;
113
114                // appeler l'éventuelle fonction de callback
115                if (callback && typeof(callback) === "function") {
116                        form_map.on('load',function(e){
117                                callback(e.target);
118                        });
119                }
120                form_map.attributionControl.setPrefix('');
121               
122                marker = new L.Marker(new L.LatLng(#ENV{lat,0}, #ENV{lon,0}), {draggable: true});
123               
124                //default layer
125                #SET{layer_defaut,#REM|gis_layer_defaut} #SET{layers,#EVAL{$GLOBALS['gis_layers']}}
126                var [(#GET{layer_defaut})] = [new (#GET{layers}|table_valeur{#GET{layer_defaut}/layer})];
127                form_map.addLayer([(#GET{layer_defaut})]);
128               
129                <B_layers>
130                var layers_control = new L.Control.Layers();
131                layers_control.addBaseLayer([(#GET{layer_defaut})],["(#GET{layers}|table_valeur{#GET{layer_defaut}/nom})"]);
132                <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}>[
133                (#CLE|!={#GET{layer_defaut}}|oui|et{#CLE|in_array{#CONFIG{gis/layers,#ARRAY}}|oui}|oui)
134                layers_control.addBaseLayer([new (#VALEUR|table_valeur{layer})],"[(#VALEUR|table_valeur{nom})]");]
135                </BOUCLE_layers>
136                form_map.addControl(layers_control);
137                // ajouter l'objet du controle de layers à la carte pour permettre d'y accéder depuis le callback
138                form_map.layersControl = layers_control;
139                // classe noajax sur le layer_control pour éviter l'ajout de hidden par SPIP
140                $(layers_control._form).addClass('noajax');
141                </B_layers>
142               
143                [(#GET{utiliser_bb}|non)
144                form_map.setView(new L.LatLng([(#GET{init_lat})], [(#GET{init_lon})]), [(#GET{init_zoom})]); 
145                ]
146                [(#GET{utiliser_bb}|oui)
147                form_map.fitBounds(
148                        new L.LatLngBounds(
149                                new L.LatLng([(#GET{init_sw_lat})], [(#GET{init_sw_lon})]),
150                                new L.LatLng([(#GET{init_ne_lat})], [(#GET{init_ne_lon})])
151                        )
152                );
153                // mettre à jour les champs de latitude et longitude quand la carte est chargée
154                // a voir si on le fait dans tous les cas, pas seulement pour la boundingbox, comme pour le zoom
155                form_map.on('load', function(e) {
156                        $('#champ_#ENV{champ_lat,lat}').val(e.latlng.lat);
157                        $('#champ_#ENV{champ_lon,lon}').val(e.latlng.lon);
158                });             
159                ]
160               
161                [(#GET{geocoder}|oui)
162                geocoder = new L.Geocoder(geocode,{acceptLanguage:'#ENV{lang}'});]
163               
164                [(#REM) Ici on utilise #ENV{lat} et #ENV{lon}, et pas les valeurs
165                        d'initialisation #GET{init_lat} et #GET{init_lon} qui sont toujours remplies]
166                [(#ENV{lat}|et{#ENV{lon}}|oui)
167                var data = {
168                        "type": "FeatureCollection",
169                        "features": \[
170                                {"type": "Feature",
171                                        "geometry": {"type": "Point", "coordinates": \[#ENV{lon}, #ENV{lat}\]},
172                                        "id":"#ENV{id_gis,oui}",
173                                        "properties": {
174                                                "title":[(#ENV{titre,''}|supprimer_numero|json_encode)],
175                                                "description":[(#ENV{descriptif,''}|json_encode)][,(#LOGO_GIS|oui)
176                                                [(#SET{logo_doc,#LOGO_GIS|image_passe_partout{32,32}|image_recadre{32,32}})]
177                                                #SET{icon_w,#GET{logo_doc}|extraire_attribut{src}|largeur}
178                                                #SET{icon_h,#GET{logo_doc}|extraire_attribut{src}|hauteur}
179                                                ["icon": (#GET{logo_doc}|extraire_attribut{src}|url_absolue|json_encode)],
180                                                "icon_size": \[#GET{icon_w},#GET{icon_h}\],
181                                                "icon_anchor": \[[(#GET{icon_w}|div{2})],[(#GET{icon_h})]\],
182                                                "popup_anchor": \[1,[-(#GET{icon_h}|div{1.2})]\]]
183                                        }
184                                }\]
185                }
186               
187                var geojson = new L.geoJson('', {
188                        onEachFeature: function (feature, layer) {
189                                marker = layer;
190                                layer.options.draggable = true;
191                                if (feature.properties && feature.properties.icon){
192                                        layer.setIcon(new L.Icon({
193                                                iconUrl: feature.properties.icon,
194                                                iconSize: new L.Point( feature.properties.icon_size\[0\], feature.properties.icon_size\[1\] ),
195                                                iconAnchor: new L.Point( feature.properties.icon_anchor\[0\], feature.properties.icon_anchor\[1\] ),
196                                                popupAnchor: new L.Point( feature.properties.popup_anchor\[0\], feature.properties.popup_anchor\[1\] )
197                                        }));
198                                }
199                                if (feature.properties && feature.properties.title){
200                                        layer.bindPopup(feature.properties.title);
201                                }
202                        }
203                }).addTo(form_map);
204                geojson.addData(data);]
205               
206                // mettre a jour les coordonnees quand on clique la carte
207                form_map.on('click', function(e) {
208                        annuler_geocoder = 0;
209                        maj_inputs(form_map,e.latlng,'click');
210                });
211               
212                marker.on("dragend", function(e){
213                        maj_inputs(form_map,e.target._latlng,'click');
214                });
215               
216                // mettre à jour le zoom quand on le modifie
217                form_map.on('zoomend', function(e) {
218                        $('#champ_#ENV{champ_zoom,zoom}').val(e.target._zoom);
219                });
220               
221                [(#GET{geocoder}|oui)
222                // geocoder si clic...
223                $('a##ENV{nom}_rechercher_geocodage').css("cursor","pointer").click(function(){
224                        var address = $("#champ_#ENV{nom}_geocoder").attr("value");
225                        annuler_geocoder = 0;
226                        geocoder.geocode(address);
227                });
228
229                // ne pas soumettre le formulaire si on presse Entree depuis le champ de recherche
230                $('#champ_#ENV{nom}_geocoder').keypress(function(e){
231                        if (e.which == 13) {
232                                $('a##ENV{nom}_rechercher_geocodage').trigger("click");
233                                return false;
234                        }
235                });]
236               
237                [(#ENV{id_gis}|non|ou{#ENV{id_gis}|=={oui}}|et{#CONFIG{gis/geolocaliser_user_html5}|=={on}}|oui)
238                form_map.locate({setView: true, maxZoom: [(#GET{init_zoom})]});]
239               
240        };
241
242        $(function(){
243                jQuery.getScript('[(#PRODUIRE{fond=javascript/gis.js}|compacte)]',function(){
244                        if (typeof(callback_form_map) === "function") {
245                                init_map(callback_form_map);
246                        } else {
247                                init_map();
248                        }
249                });
250        });
251       
252})(jQuery);
253/*]]>*/
254</script>
255#ENV*{inserer_fin}
256</li>
257[(#GET{geocoder}|oui)
258<li class="rechercher_adresse editer_[(#ENV{nom})]">
259        <label for="champ_#ENV{nom}_geocoder"><:gis:label_rechercher_address:></label>
260        <input type="text" class="text" name="champ_#ENV{nom}_geocoder" id="champ_#ENV{nom}_geocoder" value="" />
261        <a id="#ENV{nom}_rechercher_geocodage"><:info_rechercher:></a>
262</li>]
Note: See TracBrowser for help on using the repository browser.