www/plugins/gis/saisies/carte.html

   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[*/
  38 var form_map,
  39         annuler_geocoder = 0;
  40 [(#ENV{recherche}|!={non}|oui|et{#CONFIG{gis/geocoder}|oui})
  41 [(#SET{geocoder,oui})]
  42 var 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").val();
 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>]