source: spip-zone/_plugins_/gis_geometries/saisies/carte.html @ 91552

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

version 1.6.0 : compatible SPIP 3.1

adaptation nouvelle structure HTML des formulaires + maj nécessite sur GIS

File size: 16.8 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        - nodraw = oui                                          permet de désactiver la barre d'édition pour revenir au comportement par défaut
17        - noimport = oui                                        permet de masquer le champ d'import de fichier GPX/KML
18        - boutons = #ARRAY{marker,non}          permet de spécifier les boutons à ne pas afficher dans la barre d'édition
19        - path_styles=#ARRAY{color,#fff}        options de style des éléments de la couche GeoJSON (voir http://leafletjs.com/reference.html#path-options)
20
21]
22
23[(#SET{init_lat,#ENV{lat,#CONFIG{gis/lat,0}}})]
24[(#SET{init_lon,#ENV{lon,#CONFIG{gis/lon,0}}})]
25[(#SET{init_zoom,#ENV{zoom,#CONFIG{gis/zoom,0}}})]
26[(#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
27        Les valeurs par defaut sont "centre +/- 10°", ce qui est naze, mais c'est un cas normalement impossible
28]
29[(#ENV{lat}|ou{#ENV{lon}}|non|et{#ENV{sw_lat}}|et{#ENV{sw_lon}}|et{#ENV{ne_lat}}|et{#ENV{ne_lon}})
30        #SET{utiliser_bb, oui}
31        #SET{init_sw_lat,#ENV{sw_lat,#GET{lat}|moins{10}}}
32        #SET{init_sw_lon,#ENV{sw_lon,#GET{lon}|moins{10}}}
33        #SET{init_ne_lat,#ENV{ne_lat,#GET{lat}|plus{10}}}
34        #SET{init_ne_lon,#ENV{ne_lon,#GET{lon}|plus{10}}}
35]
36
37<[(#VAL{li}|saisie_balise_structure_formulaire)] class="pleine_largeur editer editer_[(#ENV{nom})][ (#ENV{li_class})][ saisie_(#ENV{type_saisie})]"[ data-id="(#ENV{id_saisie})"]>
38#ENV*{inserer_debut}
39<div id="map_[(#ENV{nom})]" name="formMap" class="formMap" style="width: #ENV{largeur,100%}; height: #ENV{hauteur,350px}"></div>
40<script type="text/javascript">
41/*<![CDATA[*/
42var form_map,
43        annuler_geocoder = 0;
44[(#ENV{recherche}|!={non}|oui|et{#CONFIG{gis/geocoder}|oui})
45[(#SET{geocoder,oui})]
46var geocoder;]
47
48(function($){
49        var marker;
50       
51        var maj_inputs = function(map,data,action) {
52                [(#GET{geocoder}|oui)
53                if (action != 'geocoding') {
54                        var f = geocoder.geocode(data);
55                }]
56                var zoom = map.getZoom();
57                if(data.lng <= -180) data.lng = data.lng+360
58                else if(data.lng > 180) data.lng = data.lng-360;
59                $('#champ_#ENV{champ_zoom,zoom}').val(zoom);
60                if(action == 'click'){
61                        $('#champ_#ENV{champ_lat,lat}').val(data.lat);
62                        $('#champ_#ENV{champ_lon,lon}').val(data.lng);
63                        annuler_geocoder = 1;
64                        form_map.panTo(data);
65                        marker.setLatLng(data);
66                }
67                else if(annuler_geocoder != 1){
68                        if(data.point == 'undefined'){
69                                $('#champ_#ENV{champ_lat,lat}').val(data.lat);
70                                $('#champ_#ENV{champ_lon,lon}').val(data.lng);
71                                form_map.panTo(data);
72                                marker.setLatLng(data);
73                        }else{
74                                $('#champ_#ENV{champ_lat,lat}').val(data.point.lat);
75                                $('#champ_#ENV{champ_lon,lon}').val(data.point.lng);
76                                form_map.panTo(data.point);
77                                marker.setLatLng(data.point);
78                        }
79                        $('#champ_#ENV{champ_type,type}').val('Point');
80                        $('#champ_#ENV{champ_geojson,geojson}').val(JSON.stringify(marker.toGeoJSON()));
81                }
82                if (!marker._map)
83                        form_map.addLayer(marker);
84        }
85       
86        [(#GET{geocoder}|oui)
87        function geocode(query) {
88                if(! query.error){
89                        $('#champ_#ENV{champ_adresse,adresse}').val(query.street);
90                        $('#champ_#ENV{champ_code_postal,code_postal}').val(query.postcode);
91                        $('#champ_#ENV{champ_ville,ville}').val(query.locality);
92                        $('#champ_#ENV{champ_departement,departement}').val(query.departement);
93                        $('#champ_#ENV{champ_region,region}').val(query.region);
94                        $('#champ_#ENV{champ_pays,pays}').val(query.country);
95                        $('#champ_#ENV{champ_code_pays,code_pays}').val(query.country_code);
96                        maj_inputs(form_map,query,'geocoding');
97                }else{
98                        alert('<:gis:erreur_geocoder:> '+query.search);
99                }
100        }]
101       
102        var init_map = function(callback) {
103                // creer la carte
104                var map_container = 'map_[(#ENV{nom})]';
105                form_map = new L.Map(map_container);
106               
107                // affecter sur l'objet du DOM
108                jQuery("#"+map_container).get(0).map=form_map;
109
110                // appeler l'éventuelle fonction de callback
111                if (callback && typeof(callback) === "function") {
112                        form_map.on('load',function(e){
113                                callback(e.target);
114                        });
115                }
116               
117                form_map.attributionControl.setPrefix('');
118               
119                marker = new L.Marker(new L.LatLng(#ENV{lat,0}, #ENV{lon,0}), {draggable: true});
120               
121                //default layer
122                #SET{layer_defaut,#REM|gis_layer_defaut} #SET{layers,#EVAL{$GLOBALS['gis_layers']}}
123                var [(#GET{layer_defaut})] = [new (#GET{layers}|table_valeur{#GET{layer_defaut}/layer})];
124                form_map.addLayer([(#GET{layer_defaut})]);
125               
126                <B_layers>
127                var layers_control = new L.Control.Layers();
128                layers_control.addBaseLayer([(#GET{layer_defaut})],["(#GET{layers}|table_valeur{#GET{layer_defaut}/nom})"]);
129                <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}>[
130                (#CLE|!={#GET{layer_defaut}}|oui|et{#CLE|in_array{#CONFIG{gis/layers,#ARRAY}}|oui}|oui)
131                layers_control.addBaseLayer([new (#VALEUR|table_valeur{layer})],"[(#VALEUR|table_valeur{nom})]");]
132                </BOUCLE_layers>
133                form_map.addControl(layers_control);
134                // ajouter l'objet du controle de layers à la carte pour permettre d'y accéder depuis le callback
135                form_map.layersControl = layers_control;
136                // classe noajax sur le layer_control pour éviter l'ajout de hidden par SPIP
137                $(layers_control._form).addClass('noajax');
138                </B_layers>
139               
140                [(#GET{utiliser_bb}|non)
141                form_map.setView(new L.LatLng([(#GET{init_lat})], [(#GET{init_lon})]), [(#GET{init_zoom})]); 
142                ]
143                [(#GET{utiliser_bb}|oui)
144                form_map.fitBounds(
145                        new L.LatLngBounds(
146                                new L.LatLng([(#GET{init_sw_lat})], [(#GET{init_sw_lon})]),
147                                new L.LatLng([(#GET{init_ne_lat})], [(#GET{init_ne_lon})])
148                        )
149                );
150                // mettre à jour les champs de latitude et longitude quand la carte est chargée
151                // a voir si on le fait dans tous les cas, pas seulement pour la boundingbox, comme pour le zoom
152                form_map.on('load', function(e) {
153                        $('#champ_#ENV{champ_lat,lat}').val(e.latlng.lat);
154                        $('#champ_#ENV{champ_lon,lon}').val(e.latlng.lon);
155                });             
156                ]
157               
158                [(#GET{geocoder}|oui)
159                geocoder = new L.Geocoder(geocode,{acceptLanguage:'#ENV{lang}'});]
160               
161                <BOUCLE_gis(GIS){id_gis}>
162                var data = {
163                        "type": "FeatureCollection",
164                        "features": [
165                                {"type": "Feature",
166                                        ["geometry": (#GEOMETRY|wkt_to_json),]
167                                        "id":"#ENV{id_gis,oui}",
168                                        "properties": {
169                                                "title":[(#ENV{titre,''}|supprimer_numero|json_encode)],
170                                                "description":[(#ENV{descriptif,''}|json_encode)][
171                                                (#LOGO_GIS|gis_icon_properties)]
172                                        }
173                                }]
174                }
175                var geojson = new L.geoJson('', {[
176                        style: (#ENV*{path_styles}|json_encode),
177                        ]onEachFeature: function (feature, layer) {
178                                if (feature.geometry.type == 'Polygon' || feature.geometry.type == 'LineString') {
179                                        // centrer la carte sur les bounds de l'objet
180                                        form_map.fitBounds(layer.getBounds());
181                                        // temp bugfix see https://github.com/Leaflet/Leaflet.draw/issues/364#issuecomment-74184767
182                                        layer.options.editing || (layer.options.editing = {});
183                                        // activer l'édition sur l'objet
184                                        layer.editing.enable();
185                                        // surveiller les changements sur les points de l'objet
186                                        layer.on("edit", function(e){
187                                                $('#champ_#ENV{champ_geojson,geojson}').val(JSON.stringify(e.target.toGeoJSON()));
188                                                var center = e.target.getBounds().getCenter();
189                                                $('#champ_#ENV{champ_lat,lat}').val(center.lat);
190                                                $('#champ_#ENV{champ_lon,lon}').val(center.lng);
191                                        });
192                                } else if (feature.geometry.type == 'Point') {
193                                        marker = layer;
194                                        if (feature.properties && feature.properties.icon){
195                                                layer.setIcon(new L.Icon({
196                                                        iconUrl: feature.properties.icon,
197                                                        iconSize: new L.Point( feature.properties.icon_size\[0\], feature.properties.icon_size\[1\] ),
198                                                        iconAnchor: new L.Point( feature.properties.icon_anchor\[0\], feature.properties.icon_anchor\[1\] ),
199                                                        popupAnchor: new L.Point( feature.properties.popup_anchor\[0\], feature.properties.popup_anchor\[1\] )
200                                                }));
201                                        }
202                                        if (feature.properties && feature.properties.title){
203                                                layer.bindPopup(feature.properties.title);
204                                        }
205                                        // rendre le marker draggable
206                                        layer.options.draggable = true;
207                                        // surveiller les changements sur le point
208                                        layer.on("dragend", function(e){
209                                                $('#champ_#ENV{champ_geojson,geojson}').val(JSON.stringify(e.target.toGeoJSON()));
210                                                maj_inputs(form_map,e.target._latlng,'click');
211                                        });
212                                }
213                        }
214                }).addTo(form_map);
215                geojson.addData(data);
216                </BOUCLE_gis>
217                </B_gis>
218                <BOUCLE_si_geojson(CONDITION){si #ENV{geojson}}>
219                var geojson = new L.geoJson('', {[
220                        style: (#ENV*{path_styles}|json_encode),
221                        ]onEachFeature: function (feature, layer) {
222                                if (feature.type == 'Polygon' || feature.type == 'MultiPolygon' || feature.type == 'LineString') {
223                                        // centrer la carte sur les bounds de l'objet
224                                        form_map.fitBounds(layer.getBounds());
225                                        // temp bugfix see https://github.com/Leaflet/Leaflet.draw/issues/364#issuecomment-74184767
226                                        layer.options.editing || (layer.options.editing = {});
227                                        // activer l'édition sur l'objet
228                                        layer.editing.enable();
229                                        // surveiller les changements sur les points de l'objet
230                                        layer.on("edit", function(e){
231                                                $('#champ_#ENV{champ_geojson,geojson}').val(JSON.stringify(e.target.toGeoJSON()));
232                                                var center = e.target.getBounds().getCenter();
233                                                $('#champ_#ENV{champ_lat,lat}').val(center.lat);
234                                                $('#champ_#ENV{champ_lon,lon}').val(center.lng);
235                                        });
236                                } else if (feature.geometry.type == 'Point') {
237                                        marker = layer;
238                                        if (feature.properties && feature.properties.icon){
239                                                layer.setIcon(new L.Icon({
240                                                        iconUrl: feature.properties.icon,
241                                                        iconSize: new L.Point( feature.properties.icon_size\[0\], feature.properties.icon_size\[1\] ),
242                                                        iconAnchor: new L.Point( feature.properties.icon_anchor\[0\], feature.properties.icon_anchor\[1\] ),
243                                                        popupAnchor: new L.Point( feature.properties.popup_anchor\[0\], feature.properties.popup_anchor\[1\] )
244                                                }));
245                                        }
246                                        if (feature.properties && feature.properties.title){
247                                                layer.bindPopup(feature.properties.title);
248                                        }
249                                        // rendre le marker draggable
250                                        layer.options.draggable = true;
251                                        // surveiller les changements sur le point
252                                        layer.on("dragend", function(e){
253                                                $('#champ_#ENV{champ_geojson,geojson}').val(JSON.stringify(e.target.toGeoJSON()));
254                                                maj_inputs(form_map,e.target._latlng,'click');
255                                        });
256                                }
257                        }
258                }).addTo(form_map);
259                geojson.addData([(#ENV**{geojson}|html_entity_decode)]);
260                </BOUCLE_si_geojson>
261               
262                [(#REM) afficher les outils de dessin uniquement lors de la création d'objet ]
263                [(#ENV{nodraw}|non)
264                // i18n des chaines de Leaflet.draw
265                L.drawLocal.draw.toolbar.actions.title = '<:gis:toolbar_actions_title|texte_script:>';
266                L.drawLocal.draw.toolbar.actions.text = '<:bouton_annuler|texte_script:>';
267                L.drawLocal.draw.toolbar.buttons.polyline = '<:gis:toolbar_buttons_polyline|texte_script:>';
268                L.drawLocal.draw.toolbar.buttons.polygon = '<:gis:toolbar_buttons_polygon|texte_script:>';
269                L.drawLocal.draw.toolbar.buttons.marker = '<:gis:toolbar_buttons_marker|texte_script:>';
270                L.drawLocal.draw.toolbar.undo.title = '<:gis:toolbar_undo_title|texte_script:>';
271                L.drawLocal.draw.toolbar.undo.text = '<:gis:toolbar_undo_text|texte_script:>';
272                L.drawLocal.draw.handlers.marker.tooltip.start = '<:gis:toolbar_handlers_marker_tooltip_start|texte_script:>';
273                L.drawLocal.draw.handlers.polygon.tooltip.start = '<:gis:toolbar_handlers_polygon_tooltip_start|texte_script:>';
274                L.drawLocal.draw.handlers.polygon.tooltip.cont = '<:gis:toolbar_handlers_polygon_tooltip_cont|texte_script:>';
275                L.drawLocal.draw.handlers.polygon.tooltip.end = '<:gis:toolbar_handlers_polygon_tooltip_end|texte_script:>';
276                L.drawLocal.draw.handlers.polyline.tooltip.start = '<:gis:toolbar_handlers_polyline_tooltip_start|texte_script:>';
277                L.drawLocal.draw.handlers.polyline.tooltip.cont = '<:gis:toolbar_handlers_polyline_tooltip_cont|texte_script:>';
278                L.drawLocal.draw.handlers.polyline.tooltip.end = '<:gis:toolbar_handlers_polyline_tooltip_end|texte_script:>';
279                var drawOptions = {
280                        position: 'topleft',
281                        draw: {
282                                polyline: [(#ENV{boutons}|table_valeur{polyline}|=={non}|oui)false][
283                                (#ENV{boutons}|table_valeur{polyline}|=={non}|non){
284                                        shapeOptions: { color: '#0033ff' }
285                                }],
286                                polygon: [(#ENV{boutons}|table_valeur{polygon}|=={non}|oui)false][
287                                (#ENV{boutons}|table_valeur{polygon}|=={non}|non){
288                                        shapeOptions: { color: '#0033ff' }
289                                }],
290                                marker: [(#ENV{boutons}|table_valeur{marker}|=={non}|?{false,true})],
291                                circle: false,
292                                rectangle: false
293                        },
294                        edit: false
295                };
296                var drawControl = new L.Control.Draw(drawOptions);
297                form_map.addControl(drawControl);
298                form_map.drawControl = drawControl;
299                form_map.on('draw:created', function(e) {
300                        var type = e.layerType,
301                                layer = e.layer;
302                        drawControl.removeFrom(form_map);
303                        if (type === 'marker') {
304                                marker.setLatLng(layer._latlng);
305                                $('#champ_#ENV{champ_type,type}').val('Point');
306                                $('#champ_#ENV{champ_geojson,geojson}').val(JSON.stringify(layer.toGeoJSON()));
307                                maj_inputs(form_map,layer._latlng,'click');
308                        } else {
309                                layer.addTo(form_map);
310                                if (type === 'polygon')
311                                        $('#champ_#ENV{champ_type,type}').val('Polygon');
312                                else if (type === 'polyline')
313                                        $('#champ_#ENV{champ_type,type}').val('LineString');
314                                $('#champ_#ENV{champ_geojson,geojson}').val(JSON.stringify(layer.toGeoJSON()));
315                                var center = layer.getBounds().getCenter();
316                                $('#champ_#ENV{champ_lat,lat}').val(center.lat);
317                                $('#champ_#ENV{champ_lon,lon}').val(center.lng);
318                                // temp bugfix see https://github.com/Leaflet/Leaflet.draw/issues/364#issuecomment-74184767
319                                layer.options.editing || (layer.options.editing = {});
320                                layer.editing.enable();
321                                layer.on("edit", function(e){
322                                        $('#champ_#ENV{champ_geojson,geojson}').val(JSON.stringify(e.target.toGeoJSON()));
323                                        var center = e.target.getBounds().getCenter();
324                                        $('#champ_#ENV{champ_lat,lat}').val(center.lat);
325                                        $('#champ_#ENV{champ_lon,lon}').val(center.lng);
326                                });
327                        }
328                });]
329                [(#ENV{nodraw}|oui)
330                // option nodraw, l'objet est un point
331                $('#champ_#ENV{champ_type,type}').val('Point');
332                // mettre a jour les coordonnees quand on clique la carte
333                form_map.on('click', function(e) {
334                        maj_inputs(form_map,e.latlng,'click');
335                        $('#champ_#ENV{champ_geojson,geojson}').val(JSON.stringify(marker.toGeoJSON()));
336                });
337                // mettre à jour le champ geosjon et le marker quand on change les valeur de lat ou lon
338                $('#champ_#ENV{champ_lat,lat}, #champ_#ENV{champ_lon,lon}').change(function(){
339                        var new_lat = $('#champ_#ENV{champ_lat,lat}').val();
340                        var new_lon = $('#champ_#ENV{champ_lon,lon}').val();
341                        var new_center = new L.LatLng(new_lat, new_lon);
342                        marker.setLatLng(new_center);
343                        form_map.panTo(new_center);
344                        $('#champ_#ENV{champ_geojson,geojson}').val('{"type":"Point","coordinates":\['+ new_lon +','+ new_lat +'\]}');
345                });]
346                // mettre à jour les coordonnées quand on déplace le marker
347                marker.on('dragend', function(e){
348                        maj_inputs(form_map,e.target._latlng,'click');
349                        $('#champ_#ENV{champ_geojson,geojson}').val(JSON.stringify(marker.toGeoJSON()));
350                });
351                <//B_gis>
352               
353                // mettre à jour le zoom quand on le modifie
354                form_map.on('zoomend', function(e) {
355                        $('#champ_#ENV{champ_zoom,zoom}').val(e.target._zoom);
356                });
357               
358                [(#GET{geocoder}|oui)
359                // geocoder si clic...
360                $('a##ENV{nom}_rechercher_geocodage').css("cursor","pointer").click(function(){
361                        var address = $("#champ_#ENV{nom}_geocoder").val();
362                        annuler_geocoder = 0;
363                        geocoder.geocode(address);
364                });
365
366                // ne pas soumettre le formulaire si on presse Entree depuis le champ de recherche
367                $('#champ_#ENV{nom}_geocoder').keypress(function(e){
368                        if (e.which == 13) {
369                                $('a##ENV{nom}_rechercher_geocodage').trigger("click");
370                                return false;
371                        }
372                });]
373               
374                [(#ENV{id_gis}|non|ou{#ENV{id_gis}|=={oui}}|et{#CONFIG{gis/geolocaliser_user_html5}|=={on}}|oui)
375                form_map.locate({setView: true, maxZoom: [(#GET{init_zoom})]});]
376               
377        };
378
379        $(function(){
380                jQuery.getScript('[(#PRODUIRE{fond=javascript/gis.js}|compacte)]',function(){
381                        if (typeof(callback_form_map) === "function") {
382                                init_map(callback_form_map);
383                        } else {
384                                init_map();
385                        }
386                });
387        });
388       
389})(jQuery);
390/*]]>*/
391</script>
392#ENV*{inserer_fin}
393</[(#VAL{li}|saisie_balise_structure_formulaire)]>
394[(#GET{geocoder}|oui)
395<[(#VAL{li}|saisie_balise_structure_formulaire)] class="rechercher_adresse editer editer_[(#ENV{nom})]">
396        <label for="champ_#ENV{nom}_geocoder"><:gis:label_rechercher_address:></label>
397        <input type="text" class="text" name="champ_#ENV{nom}_geocoder" id="champ_#ENV{nom}_geocoder" value="" />
398        <a id="#ENV{nom}_rechercher_geocodage"><:info_rechercher:></a>
399</[(#VAL{li}|saisie_balise_structure_formulaire)]>]
400<!--extragis-->
Note: See TracBrowser for help on using the repository browser.