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

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

version 1.3.1 : report de r75751, utiliser CDATA plutôt que des commentaires html pour échapper les scripts afin d'éviter des erreurs js avec cette vieille bouse d'ie

File size: 14.2 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<li 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 champ_lat = $('#champ_#ENV{champ_lat,lat}'),
50                champ_lon = $('#champ_#ENV{champ_lon,lon}'),
51                champ_zoom = $('#champ_#ENV{champ_zoom,zoom}'),
52                champ_adresse = $('#champ_#ENV{champ_adresse,adresse}'),
53                champ_code_postal = $('##ENV{champ_code_postal,code_postal}'),
54                champ_ville = $('#champ_#ENV{champ_ville,ville}'),
55                champ_region = $('#champ_#ENV{champ_region,region}'),
56                champ_pays = $('#champ_#ENV{champ_pays,pays}'),
57                marker;
58       
59        var maj_inputs = function(map,data,action) {
60                [(#GET{geocoder}|oui)
61                if (action != 'geocoding') {
62                        var f = geocoder.geocode(data);
63                }]
64                var zoom = map.getZoom();
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                        [(#ENV{nodraw}|oui)
86                        $('#champ_#ENV{champ_type,type}').val('Point');
87                        $('#champ_#ENV{champ_geojson,geojson}').val(JSON.stringify(marker.toGeoJSON()));]
88                }
89                if (!marker._map)
90                        form_map.addLayer(marker);
91        }
92       
93        [(#GET{geocoder}|oui)
94        function geocode(query) {
95                if(! query.error){
96                        $('#champ_#ENV{champ_adresse,adresse}').val(query.street);
97                        $('#champ_#ENV{champ_code_postal,code_postal}').val(query.postcode);
98                        $('#champ_#ENV{champ_ville,ville}').val(query.locality);
99                        $('#champ_#ENV{champ_region,region}').val(query.region);
100                        $('#champ_#ENV{champ_pays,pays}').val(query.country);
101                        maj_inputs(form_map,query,'geocoding');
102                }else{
103                        alert('<:gis:erreur_geocoder:> '+query.search);
104                }
105        }]
106       
107        var init_map = function(callback) {
108                // creer la carte
109                var map_container = 'map_[(#ENV{nom})]';
110                form_map = new L.Map(map_container);
111               
112                // appeler l'éventuelle fonction de callback
113                if (callback && typeof(callback) === "function") {
114                        form_map.on('load',function(e){
115                                callback(e.target);
116                        });
117                }
118               
119                form_map.attributionControl.setPrefix('');
120               
121                marker = new L.Marker(new L.LatLng(#ENV{lat,0}, #ENV{lon,0}), {draggable: true});
122               
123                //default layer
124                #SET{layer_defaut,#REM|gis_layer_defaut} #SET{layers,#EVAL{$GLOBALS['gis_layers']}}
125                var [(#GET{layer_defaut})] = [new (#GET{layers}|table_valeur{#GET{layer_defaut}/layer})];
126                form_map.addLayer([(#GET{layer_defaut})]);
127               
128                <B_layers>
129                var layers_control = new L.Control.Layers();
130                layers_control.addBaseLayer([(#GET{layer_defaut})],["(#GET{layers}|table_valeur{#GET{layer_defaut}/nom})"]);
131                <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}>[
132                (#CLE|!={#GET{layer_defaut}}|oui|et{#CLE|in_array{#CONFIG{gis/layers,#ARRAY}}|oui}|oui)
133                layers_control.addBaseLayer([new (#VALEUR|table_valeur{layer})],"[(#VALEUR|table_valeur{nom})]");]
134                </BOUCLE_layers>
135                form_map.addControl(layers_control);
136                // ajouter l'objet du controle de layers à la carte pour permettre d'y accéder depuis le callback
137                form_map.layersControl = layers_control;
138                // classe noajax sur le layer_control pour éviter l'ajout de hidden par SPIP
139                $(layers_control._form).addClass('noajax');
140                </B_layers>
141               
142                [(#GET{utiliser_bb}|non)
143                form_map.setView(new L.LatLng([(#GET{init_lat})], [(#GET{init_lon})]), [(#GET{init_zoom})]); 
144                ]
145                [(#GET{utiliser_bb}|oui)
146                form_map.fitBounds(
147                        new L.LatLngBounds(
148                                new L.LatLng([(#GET{init_sw_lat})], [(#GET{init_sw_lon})]),
149                                new L.LatLng([(#GET{init_ne_lat})], [(#GET{init_ne_lon})])
150                        )
151                );
152                // mettre à jour les champs de latitude et longitude quand la carte est chargée
153                // a voir si on le fait dans tous les cas, pas seulement pour la boundingbox, comme pour le zoom
154                form_map.on('load', function(e) {
155                        $('#champ_#ENV{champ_lat,lat}').val(e.latlng.lat);
156                        $('#champ_#ENV{champ_lon,lon}').val(e.latlng.lon);
157                });             
158                ]
159               
160                [(#GET{geocoder}|oui)
161                geocoder = new L.Geocoder(geocode);]
162               
163                <BOUCLE_gis(GIS){id_gis}>
164                var data = {
165                        "type": "FeatureCollection",
166                        "features": [
167                                {"type": "Feature",
168                                        ["geometry": (#GEOMETRY|wkt_to_json),]
169                                        "id":"#ENV{id_gis,oui}",
170                                        "properties": {
171                                                "title":[(#ENV{titre,''}|supprimer_numero|json_encode)],
172                                                "description":[(#ENV{descriptif,''}|json_encode)][,(#LOGO_GIS|oui)
173                                                [(#SET{logo_doc,#LOGO_GIS|image_passe_partout{32,32}|image_recadre{32,32}})]
174                                                #SET{icon_w,#GET{logo_doc}|extraire_attribut{src}|largeur}
175                                                #SET{icon_h,#GET{logo_doc}|extraire_attribut{src}|hauteur}
176                                                ["icon": (#GET{logo_doc}|extraire_attribut{src}|url_absolue|json_encode)],
177                                                "icon_size": \[#GET{icon_w},#GET{icon_h}\],
178                                                "icon_anchor": \[[(#GET{icon_w}|div{2})],[(#GET{icon_h})]\],
179                                                "popup_anchor": \[1,[-(#GET{icon_h}|div{1.2})]\]]
180                                        }
181                                }]
182                }
183                var geojson = new L.geoJson('', {[
184                        style: (#ENV*{path_styles}|json_encode),
185                        ]onEachFeature: function (feature, layer) {
186                                if (feature.geometry.type == 'Polygon' || feature.geometry.type == 'LineString') {
187                                        // centrer la carte sur les bounds de l'objet
188                                        form_map.fitBounds(layer.getBounds());
189                                        // activer l'édition sur l'objet
190                                        layer.editing.enable();
191                                        // surveiller les changements sur les points de l'objet
192                                        layer.on("edit", function(e){
193                                                $('#champ_#ENV{champ_geojson,geojson}').val(JSON.stringify(e.target.toGeoJSON()));
194                                                var center = e.target.getBounds().getCenter();
195                                                $('#champ_#ENV{champ_lat,lat}').val(center.lat);
196                                                $('#champ_#ENV{champ_lon,lon}').val(center.lng);
197                                        });
198                                } else if (feature.geometry.type == 'Point') {
199                                        marker = layer;
200                                        // rendre le marker draggable
201                                        layer.options.draggable = true;
202                                        // surveiller les changements sur le point
203                                        layer.on("dragend", function(e){
204                                                $('#champ_#ENV{champ_geojson,geojson}').val(JSON.stringify(e.target.toGeoJSON()));
205                                                maj_inputs(form_map,e.target._latlng,'click');
206                                        });
207                                }
208                        }
209                }).addTo(form_map);
210                geojson.addData(data);
211                </BOUCLE_gis>
212               
213                [(#REM) afficher les outils de dessin uniquement lors de la création d'objet ]
214                [(#ENV{nodraw}|non)
215                // i18n des chaines de Leaflet.draw
216                L.drawLocal.draw.toolbar.actions.title = '<:gis:toolbar_actions_title|texte_script:>';
217                L.drawLocal.draw.toolbar.actions.text = '<:bouton_annuler|texte_script:>';
218                L.drawLocal.draw.toolbar.buttons.polyline = '<:gis:toolbar_buttons_polyline|texte_script:>';
219                L.drawLocal.draw.toolbar.buttons.polygon = '<:gis:toolbar_buttons_polygon|texte_script:>';
220                L.drawLocal.draw.toolbar.buttons.marker = '<:gis:toolbar_buttons_marker|texte_script:>';
221                L.drawLocal.draw.handlers.marker.tooltip.start = '<:gis:toolbar_handlers_marker_tooltip_start|texte_script:>';
222                L.drawLocal.draw.handlers.polygon.tooltip.start = '<:gis:toolbar_handlers_polygon_tooltip_start|texte_script:>';
223                L.drawLocal.draw.handlers.polygon.tooltip.cont = '<:gis:toolbar_handlers_polygon_tooltip_cont|texte_script:>';
224                L.drawLocal.draw.handlers.polygon.tooltip.end = '<:gis:toolbar_handlers_polygon_tooltip_end|texte_script:>';
225                L.drawLocal.draw.handlers.polyline.tooltip.start = '<:gis:toolbar_handlers_polyline_tooltip_start|texte_script:>';
226                L.drawLocal.draw.handlers.polyline.tooltip.cont = '<:gis:toolbar_handlers_polyline_tooltip_cont|texte_script:>';
227                L.drawLocal.draw.handlers.polyline.tooltip.end = '<:gis:toolbar_handlers_polyline_tooltip_end|texte_script:>';
228                var drawOptions = {
229                        position: 'topleft',
230                        draw: {
231                                polyline: [(#ENV{boutons}|table_valeur{polyline}|=={non}|oui)false][
232                                (#ENV{boutons}|table_valeur{polyline}|=={non}|non){
233                                        shapeOptions: { color: '#0033ff' }
234                                }],
235                                polygon: [(#ENV{boutons}|table_valeur{polygon}|=={non}|oui)false][
236                                (#ENV{boutons}|table_valeur{polygon}|=={non}|non){
237                                        shapeOptions: { color: '#0033ff' }
238                                }],
239                                marker: [(#ENV{boutons}|table_valeur{marker}|=={non}|?{false,true})],
240                                circle: false,
241                                rectangle: false
242                        },
243                        edit: false
244                };
245                var drawControl = new L.Control.Draw(drawOptions);
246                form_map.addControl(drawControl);
247                form_map.on('draw:created', function(e) {
248                        var type = e.layerType,
249                                layer = e.layer;
250                        console.log(e);
251                        drawControl.removeFrom(form_map);
252                        if (type === 'marker') {
253                                marker = layer;
254                                $('#champ_#ENV{champ_type,type}').val('Point');
255                                $('#champ_#ENV{champ_geojson,geojson}').val(JSON.stringify(layer.toGeoJSON()));
256                                maj_inputs(form_map,layer._latlng,'click');
257                                layer.dragging.enable();
258                                layer.on("dragend", function(e){
259                                        $('#champ_#ENV{champ_geojson,geojson}').val(JSON.stringify(e.target.toGeoJSON()));
260                                        maj_inputs(form_map,e.target._latlng,'click');
261                                });
262                        } else {
263                                layer.addTo(form_map);
264                                if (type === 'polygon')
265                                        $('#champ_#ENV{champ_type,type}').val('Polygon');
266                                else if (type === 'polyline')
267                                        $('#champ_#ENV{champ_type,type}').val('LineString');
268                                $('#champ_#ENV{champ_geojson,geojson}').val(JSON.stringify(layer.toGeoJSON()));
269                                var center = layer.getBounds().getCenter();
270                                $('#champ_#ENV{champ_lat,lat}').val(center.lat);
271                                $('#champ_#ENV{champ_lon,lon}').val(center.lng);
272                                layer.editing.enable();
273                                layer.on("edit", function(e){
274                                        $('#champ_#ENV{champ_geojson,geojson}').val(JSON.stringify(e.target.toGeoJSON()));
275                                        var center = e.target.getBounds().getCenter();
276                                        $('#champ_#ENV{champ_lat,lat}').val(center.lat);
277                                        $('#champ_#ENV{champ_lon,lon}').val(center.lng);
278                                });
279                        }
280                });]
281                [(#ENV{nodraw}|oui)
282                // option nodraw, l'objet est un point
283                $('#champ_#ENV{champ_type,type}').val('Point');
284                // mettre a jour les coordonnees quand on clique la carte
285                form_map.on('click', function(e) {
286                        maj_inputs(form_map,e.latlng,'click');
287                        $('#champ_#ENV{champ_geojson,geojson}').val(JSON.stringify(marker.toGeoJSON()));
288                });
289                // mettre à jour les coordonnées quand on déplace le marker
290                marker.on('dragend', function(e){
291                        maj_inputs(form_map,e.target._latlng,'click');
292                        $('#champ_#ENV{champ_geojson,geojson}').val(JSON.stringify(marker.toGeoJSON()));
293                });
294                // mettre à jour le champ geosjon et le marker quand on change les valeur de lat ou lon
295                $('#champ_#ENV{champ_lat,lat}, #champ_#ENV{champ_lon,lon}').change(function(){
296                        var new_lat = $('#champ_#ENV{champ_lat,lat}').val();
297                        var new_lon = $('#champ_#ENV{champ_lon,lon}').val();
298                        var new_center = new L.LatLng(new_lat, new_lon);
299                        marker.setLatLng(new_center);
300                        form_map.panTo(new_center);
301                        $('#champ_#ENV{champ_geojson,geojson}').val('{"type":"Point","coordinates":\['+ new_lon +','+ new_lat +'\]}');
302                });]
303                <//B_gis>
304               
305                // mettre à jour le zoom quand on le modifie
306                form_map.on('zoomend', function(e) {
307                        $('#champ_#ENV{champ_zoom,zoom}').val(e.target._zoom);
308                });
309               
310                [(#GET{geocoder}|oui)
311                // geocoder si clic...
312                $('a##ENV{nom}_rechercher_geocodage').css("cursor","pointer").click(function(){
313                        var address = $("#champ_#ENV{nom}_geocoder").attr("value");
314                        annuler_geocoder = 0;
315                        geocoder.geocode(address);
316                });
317
318                // ne pas soumettre le formulaire si on presse Entree depuis le champ de recherche
319                $('#champ_#ENV{nom}_geocoder').keypress(function(e){
320                        if (e.which == 13) {
321                                $('a##ENV{nom}_rechercher_geocodage').trigger("click");
322                                return false;
323                        }
324                });]
325               
326                [(#ENV{id_gis}|non|ou{#ENV{id_gis}|=={oui}}|et{#CONFIG{gis/geolocaliser_user_html5}|=={on}}|oui)
327                form_map.locate({setView: true, maxZoom: [(#GET{init_zoom})]});]
328               
329        };
330
331        $(function(){
332                jQuery.getScript('[(#PRODUIRE{fond=javascript/gis.js}|compacte)]',function(){
333                        if (typeof(callback_form_map) === "function") {
334                                init_map(callback_form_map);
335                        } else {
336                                init_map();
337                        }
338                });
339        });
340       
341})(jQuery);
342/*]]>*/
343</script>
344#ENV*{inserer_fin}
345</li>
346[(#GET{geocoder}|oui)
347<li class="rechercher_adresse editer_[(#ENV{nom})]">
348        <label for="champ_#ENV{nom}_geocoder"><:gis:label_rechercher_address:></label>
349        <input type="text" class="text" name="champ_#ENV{nom}_geocoder" id="champ_#ENV{nom}_geocoder" value="" />
350        <a id="#ENV{nom}_rechercher_geocodage"><:info_rechercher:></a>
351</li>]
352<!--extra-->
Note: See TracBrowser for help on using the repository browser.