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

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

report de r62417

File size: 9.9 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
15]
16
17[(#SET{init_lat,#ENV{lat,#CONFIG{gis/lat,0}}})]
18[(#SET{init_lon,#ENV{lon,#CONFIG{gis/lon,0}}})]
19[(#SET{init_zoom,#ENV{zoom,#CONFIG{gis/zoom,0}}})]
20[(#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
21        Les valeurs par defaut sont "centre +/- 10°", ce qui est naze, mais c'est un cas normalement impossible
22]
23[(#ENV{lat}|ou{#ENV{lon}}|non|et{#ENV{sw_lat}}|et{#ENV{sw_lon}}|et{#ENV{ne_lat}}|et{#ENV{ne_lon}})
24        #SET{utiliser_bb, oui}
25        #SET{init_sw_lat,#ENV{sw_lat,#GET{lat}|moins{10}}}
26        #SET{init_sw_lon,#ENV{sw_lon,#GET{lon}|moins{10}}}
27        #SET{init_ne_lat,#ENV{ne_lat,#GET{lat}|plus{10}}}
28        #SET{init_ne_lon,#ENV{ne_lon,#GET{lon}|plus{10}}}
29]
30
31<li class="pleine_largeur editer editer_[(#ENV{nom})][ (#ENV{li_class})][ saisie_(#ENV{type_saisie})]"[ data-id="(#ENV{id_saisie})"]>
32#ENV*{inserer_debut}
33<div id="map_[(#ENV{nom})]" name="formMap" class="formMap" style="width: 100%; height: 350px"></div>
34<script type="text/javascript">
35<!--
36var form_map;
37var annuler_geocoder = 0;
38[(#ENV{recherche}|!={non}|oui|et{#CONFIG{gis/geocoder}|oui})
39[(#SET{geocoder,oui})]
40var geocoder;]
41
42(function($){
43        var champ_lat = $('#champ_#ENV{champ_lat,lat}');
44        var champ_lon = $('#champ_#ENV{champ_lon,lon}');
45        var champ_zoom = $('#champ_#ENV{champ_zoom,zoom}');
46        var champ_adresse = $('#champ_#ENV{champ_adresse,adresse}');
47        var champ_code_postal = $('##ENV{champ_code_postal,code_postal}');
48        var champ_ville = $('#champ_#ENV{champ_ville,ville}');
49        var champ_region = $('#champ_#ENV{champ_region,region}');
50        var champ_pays = $('#champ_#ENV{champ_pays,pays}');
51       
52        var marker = new L.Marker(new L.LatLng(#ENV{lat,0}, #ENV{lon,0}), {draggable: true});
53       
54        var maj_inputs = function(map,data,action) {
55                [(#GET{geocoder}|oui)
56                if (action != 'geocoding') {
57                        var f = geocoder.geocode(data);
58                }]
59                var zoom = map.getZoom();
60                $('#champ_#ENV{champ_zoom,zoom}').val(zoom);
61                if(action == 'click'){
62                        $('#champ_#ENV{champ_lat,lat}').val(data.lat);
63                        $('#champ_#ENV{champ_lon,lon}').val(data.lng);
64                        annuler_geocoder = 1;
65                        form_map.panTo(data);
66                        marker.setLatLng(data);
67                }
68                else if(annuler_geocoder != 1){
69                        if(data.point == 'undefined'){
70                                $('#champ_#ENV{champ_lat,lat}').val(data.lat);
71                                $('#champ_#ENV{champ_lon,lon}').val(data.lng);
72                                form_map.panTo(data);
73                                marker.setLatLng(data);
74                        }else{
75                                $('#champ_#ENV{champ_lat,lat}').val(data.point.lat);
76                                $('#champ_#ENV{champ_lon,lon}').val(data.point.lng);
77                                form_map.panTo(data.point);
78                                marker.setLatLng(data.point);
79                        }
80                }
81                if (!marker._map)
82                        form_map.addLayer(marker);
83        }
84       
85        [(#GET{geocoder}|oui)
86        function geocode(query) {
87                $('#champ_#ENV{champ_adresse,adresse}').val(query.street);
88                $('#champ_#ENV{champ_code_postal,code_postal}').val(query.postcode);
89                $('#champ_#ENV{champ_ville,ville}').val(query.locality);
90                $('#champ_#ENV{champ_region,region}').val(query.region);
91                $('#champ_#ENV{champ_pays,pays}').val(query.country);
92                maj_inputs(form_map,query,'geocoding');
93        }]
94       
95        var init_map = function() {
96                // creer la carte
97                var map_container = 'map_[(#ENV{nom})]';
98                form_map = new L.Map(map_container);
99               
100                form_map.attributionControl.setPrefix('');
101               
102                //default layer
103                #SET{layer_defaut,#REM|gis_layer_defaut} #SET{layers,#EVAL{$GLOBALS['gis_layers']}}
104                var [(#GET{layer_defaut})] = [new (#GET{layers}|table_valeur{#GET{layer_defaut}/layer})];
105                form_map.addLayer([(#GET{layer_defaut})]);
106               
107                <B_layers>
108                var layers_control = new L.Control.Layers();
109                layers_control.addBaseLayer([(#GET{layer_defaut})],["(#GET{layers}|table_valeur{#GET{layer_defaut}/nom})"]);
110                <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}>[
111                (#CLE|!={#GET{layer_defaut}}|oui|et{#CLE|in_array{#CONFIG{gis/layers,#ARRAY}}|oui}|oui)
112                layers_control.addBaseLayer([new (#VALEUR|table_valeur{layer})],"[(#VALEUR|table_valeur{nom})]");]
113                </BOUCLE_layers>
114                form_map.addControl(layers_control);
115                // classe noajax sur le layer_control pour éviter l'ajout de hidden par SPIP
116                $(layers_control._form).addClass('noajax');
117                </B_layers>
118               
119                [(#GET{utiliser_bb}|non)
120                form_map.setView(new L.LatLng([(#GET{init_lat})], [(#GET{init_lon})]), [(#GET{init_zoom})]); 
121                ]
122                [(#GET{utiliser_bb}|oui)
123                form_map.fitBounds(
124                        new L.LatLngBounds(
125                                new L.LatLng([(#GET{init_sw_lat})], [(#GET{init_sw_lon})]),
126                                new L.LatLng([(#GET{init_ne_lat})], [(#GET{init_ne_lon})])
127                        )
128                );
129                // mettre à jour les champs de latitude et longitude quand la carte est chargée
130                // a voir si on le fait dans tous les cas, pas seulement pour la boundingbox, comme pour le zoom
131                form_map.on('load', function(e) {
132                        $('#champ_#ENV{champ_lat,lat}').val(e.latlng.lat);
133                        $('#champ_#ENV{champ_lon,lon}').val(e.latlng.lon);
134                });             
135                ]
136               
137                [(#GET{geocoder}|oui)
138                // geocoder
139                //geocoder = new mxn.Geocoder('[(#REM|gis_api_utilisee)]',geocode);]
140               
141                /* <BOUCLE_gis(GIS){id_gis}> */
142                var data = {
143                        "type": "FeatureCollection",
144                        "features": [
145                                {"type": "Feature",
146                                        ["geometry": (#GEOMETRY|wkt_to_json),]
147                                        "id":"#ENV{id_gis,oui}",
148                                        "properties": {
149                                                "title":[(#ENV{titre,''}|supprimer_numero|json_encode)],
150                                                "description":[(#ENV{descriptif,''}|json_encode)][,(#LOGO_GIS|oui)
151                                                [(#SET{logo_doc,#LOGO_GIS|image_passe_partout{32,32}|image_recadre{32,32}})]
152                                                #SET{icon_w,#GET{logo_doc}|extraire_attribut{src}|largeur}
153                                                #SET{icon_h,#GET{logo_doc}|extraire_attribut{src}|hauteur}
154                                                ["icon": (#GET{logo_doc}|extraire_attribut{src}|url_absolue|json_encode)],
155                                                "icon_size": [(#VAL{91}|chr)]#GET{icon_w},#GET{icon_h}[(#VAL{93}|chr)],
156                                                "icon_anchor": [(#VAL{91}|chr)][(#GET{icon_w}|div{2})],[(#GET{icon_h})][(#VAL{93}|chr)]]
157                                        }
158                                }]
159                }
160                var geojson = new L.GeoJSON();
161                form_map.addLayer(geojson);
162                geojson.on("featureparse", function(e){
163                        if (e.geometryType == 'Polygon' || e.geometryType == 'LineString') {
164                                if (e.geometryType == 'Polygon') // virer le dernier point du polygon pour faciliter l'edition
165                                        e.layer.spliceLatLngs(-1,1);
166                                // centrer la carte sur les bounds de l'objet
167                                form_map.fitBounds(e.layer.getBounds());
168                                // activer l'édition sur l'objet
169                                e.layer.editing.enable();
170                                // surveiller les changements sur les points de l'objet
171                                e.layer.on("edit", function(e){
172                                        $('#champ_#ENV{champ_geojson,geojson}').val(layerToGeometry(e.target));
173                                });
174                        } else if (e.geometryType == 'Point') {
175                                // rendre le marker draggable
176                                e.layer.options.draggable = true;
177                                // surveiller les changements sur le point
178                                e.layer.on("dragend", function(e){
179                                        $('#champ_#ENV{champ_geojson,geojson}').val(layerToGeometry(e.target));
180                                });
181                        }
182                });
183                geojson.addGeoJSON(data);
184                /* </BOUCLE_gis> */
185                [(#REM) afficher les outils de dessin uniquement lors de la création d'objet ]
186               
187                drawControl = new L.Control.Draw();
188                form_map.addControl(drawControl);
189               
190                form_map.on('drawend', function(e) {
191                        drawControl.removeFrom(form_map);
192                        if (L.Marker && (e.marker instanceof L.Marker)) {
193                                $('#champ_#ENV{champ_type,type}').val('Point');
194                                $('#champ_#ENV{champ_geojson,geojson}').val(layerToGeometry(e.marker));
195                                e.marker.dragging.enable();
196                                e.marker.on("dragend", function(e){
197                                        $('#champ_#ENV{champ_geojson,geojson}').val(layerToGeometry(e.target));
198                                });
199                        } else {
200                                if (L.Polygon && (e.poly instanceof L.Polygon))
201                                        $('#champ_#ENV{champ_type,type}').val('Polygon');
202                                else if (L.Polyline && (e.poly instanceof L.Polyline))
203                                        $('#champ_#ENV{champ_type,type}').val('LineString');
204                                $('#champ_#ENV{champ_geojson,geojson}').val(layerToGeometry(e.poly));
205                                var center = e.poly.getBounds().getCenter();
206                                $('#champ_#ENV{champ_lat,lat}').val(center.lat);
207                                $('#champ_#ENV{champ_lon,lon}').val(center.lng);
208                                e.poly.editing.enable();
209                                e.poly.on("edit", function(e){
210                                        $('#champ_#ENV{champ_geojson,geojson}').val(layerToGeometry(e.target));
211                                        var center = e.target.getBounds().getCenter();
212                                        $('#champ_#ENV{champ_lat,lat}').val(center.lat);
213                                        $('#champ_#ENV{champ_lon,lon}').val(center.lng);
214                                });
215                        }
216                });
217                /* <//B_gis> */
218               
219                // mettre à jour le zoom quand on le modifie
220                form_map.on('zoomend', function(e) {
221                        $('#champ_#ENV{champ_zoom,zoom}').val(e.target._zoom);
222                });
223               
224                /*
225                [(#GET{geocoder}|oui)
226                // geocoder si clic...
227                $('a##ENV{nom}_rechercher_geocodage').css("cursor","pointer").click(function(){
228                        var address = {};
229                        address.address = $("#champ_#ENV{nom}_geocoder").attr("value");
230                        annuler_geocoder = 0;
231                        geocoder.geocode(address);
232                });
233
234                // ne pas soumettre le formulaire si on presse Entree depuis le champ de recherche
235                $('#champ_#ENV{nom}_geocoder').keypress(function(e){
236                        if (e.which == 13) {
237                                $('a##ENV{nom}_rechercher_geocodage').trigger("click");
238                                return false;
239                        }
240                });]
241                */
242                [(#ENV{id_gis}|non|ou{#ENV{id_gis}|=={oui}}|et{#CONFIG{gis/geolocaliser_user_html5}|=={on}}|oui)
243                form_map.locate({setView: true, maxZoom: [(#GET{init_zoom})]});]
244               
245        };
246
247        $(function(){
248                init_map();
249                //[(#ENV{ajaxload}|!={non}|oui)onAjaxLoad(init_map);]
250        });
251       
252})(jQuery);
253-->
254</script>
255#ENV*{inserer_fin}
256</li>
257[(#GET{geocoder}|oui)
258<li class="rechercher_adresse">
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.