www/plugins/gis/javascript/leaflet.gis.js

   1 (function() {
   2 // Plugin Leaflet L.Map.Gis
   3 L.Map.Gis = L.Map.extend({
   4
   5         includes: L.Mixin.Events,
   6
   7         options:{
   8                 mapId: 'map_gis',
   9                 utiliser_bb: false,
  10                 sw_lat: 0,
  11                 ne_lat: 0,
  12                 sw_lon: 0,
  13                 ne_lon: 0,
  14                 gis_layers: L.gisConfig.gis_layers,
  15                 default_layer: L.gisConfig.default_layer,
  16                 affiche_layers: L.gisConfig.affiche_layers,
  17                 scaleControl: false,
  18                 overviewControl: false,
  19                 layersControl: false,
  20                 layersControlOptions: {},
  21                 noControl: false,
  22                 cluster: false,
  23                 clusterOptions: {
  24                         disableClusteringAtZoom: 0,
  25                         showCoverageOnHover: false,
  26                         maxClusterRadius: 80,
  27                         spiderfyOnMaxZoom: false
  28                 },
  29                 pathStyles: null,
  30                 autocenterandzoom: false,
  31                 openId: false,
  32                 affiche_points: true,
  33                 json_points: {
  34                         url: "",
  35                         objets: "",
  36                         limit: 500,
  37                         env: [],
  38                         titre: "",
  39                         description: "",
  40                         icone: ""
  41                 },
  42                 localize_visitor: false,
  43                 localize_visitor_zoom: 0,
  44                 centrer_fichier: true,
  45                 kml: false,
  46                 gpx: false,
  47                 geojson: false
  48         },
  49
  50         initialize: function (id,options) {
  51                 L.Util.setOptions(this, options);
  52
  53                 this.on('load',function(e){
  54                         // Affecter sur l'objet du DOM
  55                         jQuery("#"+this._container.id).get(0).map = this;
  56                         // Appeler l'éventuelle fonction de callback
  57                         if (this.options.callback && typeof(this.options.callback) === "function")
  58                                 this.options.callback(this);
  59                         // trigger load sur l'objet du DOM
  60                         jQuery("#"+this._container.id).trigger('load',this);
  61                 });
  62
  63                 L.Map.prototype.initialize.call(this, id, options);
  64
  65                 if (this.options.utiliser_bb){
  66                         this.fitBounds(
  67                                 L.latLngBounds(
  68                                         [this.options.sw_lat, this.options.sw_lon],
  69                                         [this.options.ne_lat, this.options.ne_lon]
  70                                 )
  71                         );
  72                 }
  73
  74                 this.populateTileLayers(this.options.affiche_layers);
  75
  76                 this.initControls();
  77
  78                 this.loadData();
  79
  80                 this.addOverlays();
  81
  82                 if (this.options.localize_visitor){
  83                         var maxZoom = this.options.localize_visitor_zoom;
  84                         this.on('locationerror',function(e){
  85                                 maxZoom = this.options.zoom;
  86                                 alert(e.message);
  87                         });
  88                         this.locate({setView: true, maxZoom: maxZoom});
  89                 }
  90
  91                 // Si pas de points affichés trigger ready ici
  92                 if (!this.options.affiche_points || !this.options.json_points.length)
  93                         jQuery("#"+this._container.id).trigger('ready',this);
  94         },
  95
  96         populateTileLayers: function (tilelayers) {
  97                 // Fond de carte par défaut
  98                 var default_layer = this.createTileLayer(this.options.default_layer);
  99                 this.addLayer(default_layer);
 100                 // Fonds de carte supplémentaires
 101                 if (this.options.layersControl && !this.options.noControl && this.options.affiche_layers.length>1){
 102                         var layers_control = L.control.layers('','',this.options.layersControlOptions);
 103                         layers_control.addBaseLayer(default_layer,this.options.gis_layers[this.options.default_layer].nom);
 104                         for(var l in this.options.affiche_layers){
 105                                 if (this.options.affiche_layers[l]!==this.options.default_layer){
 106                                         var layer = this.createTileLayer(this.options.affiche_layers[l]);
 107                                         if (typeof layer!=="undefined")
 108                                                 layers_control.addBaseLayer(layer,this.options.gis_layers[this.options.affiche_layers[l]].nom);
 109                                 }
 110                         }
 111                         this.addControl(layers_control);
 112                         // Ajouter l'objet du controle de layers à la carte pour permettre d'y accéder depuis le callback
 113                         this.layersControl = layers_control;
 114                         // Classe noajax sur le layer_control pour éviter l'ajout de hidden par SPIP
 115                         L.DomUtil.addClass(layers_control._form,'noajax');
 116                 }
 117         },
 118
 119         initControls: function () {
 120                 this.attributionControl.setPrefix('');
 121                 if (this.options.scaleControl)
 122                         L.control.scale().addTo(this);
 123                 if (this.options.overviewControl){
 124                         // todo ajouter une option pour permettre de choisir la couche à afficher dans la minimap
 125                         var minimap_layer = this.createTileLayer(this.options.default_layer);
 126                         L.control.minimap(minimap_layer,{width: 100,height: 100, toggleDisplay: true}).addTo(this);
 127                 }
 128         },
 129
 130         createTileLayer: function (name) {
 131                 var layer;
 132                 if (typeof this.options.gis_layers[name]!=="undefined")
 133                         eval("layer=new "+ this.options.gis_layers[name].layer +";");
 134                 return layer;
 135         },
 136
 137         // API setGeoJsonFeatureIcon : Pour Ajouter l'icone d'un point (feature = item d'un GeoJson)
 138         setGeoJsonFeatureIcon: function (feature, layer) {
 139                 // Déclarer l'icone du points, si défini
 140                 if (feature.properties && feature.properties.icon){
 141                         icon_options = {
 142                                 'iconUrl': feature.properties.icon,
 143                                 'iconSize': [feature.properties.icon_size[0], feature.properties.icon_size[1]],
 144                                 'iconAnchor': [feature.properties.icon_anchor[0], feature.properties.icon_anchor[1]]
 145                         };
 146                         if (feature.properties.popup_anchor)
 147                                 icon_options.popupAnchor = [feature.properties.popup_anchor[0], feature.properties.popup_anchor[1]];
 148                         if (feature.properties.shadow)
 149                                 icon_options.shadowUrl = feature.properties.shadow;
 150                         if (feature.properties.shadow_size)
 151                                 icon_options.shadowSize = [feature.properties.shadow_size[0], feature.properties.shadow_size[1]];
 152                         layer.setIcon(L.icon(icon_options));
 153                 }
 154         },
 155
 156         // API setGeoJsonFeaturePopup : Pour Ajouter le texte de popup d'un point (feature = item d'un GeoJson)
 157         setGeoJsonFeaturePopup: function (feature, layer) {
 158                 // Déclarer le contenu de la popup s'il y en a
 159                 if (feature.properties && (feature.properties.title || feature.properties.description)){
 160                         var popupContent = '';
 161                         var popupOptions = '';
 162                         if (feature.properties.title)
 163                                 popupContent = '<strong class="title">' + feature.properties.title + '</strong>';
 164                         if (feature.properties.description)
 165                                 popupContent = popupContent + feature.properties.description;
 166                         if (feature.properties.popup_options)
 167                                 popupOptions = feature.properties.popup_options;
 168                         layer.bindPopup(popupContent,popupOptions);
 169                 }
 170         },
 171
 172         // API parseGeoJson
 173         parseGeoJson: function(data) {
 174                 var map = this;
 175                 // Analyse des points et déclaration (sans regroupement des points en cluster)
 176                 if (!map.options.cluster){
 177                         if (data.features.length > 0){
 178                                 var geojson = L.geoJson('', {
 179                                         style: this.options.pathStyles,
 180                                         onEachFeature: function (feature, layer) {
 181                                                 // Déclarer l'icone du point
 182                                                 map.setGeoJsonFeatureIcon(feature, layer);
 183                                                 // Déclarer le contenu de la popup s'il y en a
 184                                                 map.setGeoJsonFeaturePopup(feature, layer);
 185                                         }
 186                                 }).addData(data).addTo(map);
 187
 188                                 if (map.options.autocenterandzoom){
 189                                         if (data.features.length == 1 && data.features[0].geometry.type == 'Point')
 190                                                 map.setView(geojson.getBounds().getCenter(), map.options.zoom);
 191                                         else
 192                                                 map.fitBounds(geojson.getBounds());
 193                                 }
 194                                 if (map.options.openId)
 195                                         gis_focus_marker(map.options.openId,map.options.mapId);
 196
 197                                 if (typeof map.geojsons=="undefined") map.geojsons = [];
 198                                 map.geojsons.push(geojson);
 199                         }
 200                 } else {
 201                         map.markers = L.markerClusterGroup(map.options.clusterOptions);
 202
 203                         /* Pour chaque points présents, on crée un marqueur */
 204                         jQuery.each(data.features, function(i, feature){
 205                                 if (feature.geometry.coordinates[0]){
 206                                         var marker = L.marker([feature.geometry.coordinates[1], feature.geometry.coordinates[0]]);
 207
 208                                         // Déclarer l'icone du point
 209                                         map.setGeoJsonFeatureIcon(feature, marker);
 210                                         // Déclarer le contenu de la popup s'il y en a
 211                                         map.setGeoJsonFeaturePopup(feature, marker);
 212
 213                                         marker.id = feature.id;
 214                                         map.markers.addLayer(marker);
 215                                 }
 216                         });
 217
 218                         map.addLayer(map.markers);
 219
 220                         if (map.options.autocenterandzoom){
 221                                 if (data.features.length > 1)
 222                                         map.fitBounds(map.markers.getBounds());
 223                                 else
 224                                         map.setView(map.markers.getBounds().getCenter(), map.options.zoom);
 225                         }
 226                 }
 227         },
 228
 229         // API Compat GIS3
 230         addJSON: function(data) {
 231                 return this.parseGeoJson(data);
 232         },
 233
 234         // API Compat GIS3
 235         removeAllMarkers: function(){
 236                 if (typeof this.geojsons=="undefined") this.geojsons = [];
 237                 for(var i in this.geojsons){
 238                         this.geojsons[i].clearLayers();
 239                         this.removeLayer(this.geojsons[i]);
 240                 }
 241                 this.geojsons = [];
 242         },
 243
 244         loadData: function () {
 245                 var map = this;
 246                 if (map.options.affiche_points
 247                         && typeof(map.options.json_points) !== "undefined"
 248                         && map.options.json_points.url.length){
 249                         // Récupération des points à mettre sur la carte, via json externe
 250                         var args = {};
 251                         jQuery.extend(true, args, map.options.json_points.env);
 252                         if (typeof map.options.json_points.objets !== "undefined"){
 253                                 args.objets = map.options.json_points.objets;
 254                                 if (args.objets == "point_libre"){
 255                                         args.lat = map.options.center[0];
 256                                         args.lon = map.options.center[1];
 257                                         if (typeof map.options.json_points.titre !== "undefined")
 258                                                 args.titre = map.options.json_points.titre;
 259                                         if (typeof map.options.json_points.description !== "undefined")
 260                                                 args.description = map.options.json_points.description;
 261                                         if (typeof map.options.json_points.icone !== "undefined")
 262                                                 args.icone = map.options.json_points.icone;
 263                                 }
 264                         }
 265                         if (typeof map.options.json_points.limit !== "undefined")
 266                                 args.limit = map.options.json_points.limit;
 267                         jQuery.getJSON(map.options.json_points.url,args,
 268                                 function(data) {
 269                                         if (data){
 270                                                 // Charger le json (data) et déclarer les points
 271                                                 map.parseGeoJson(data);
 272                                                 jQuery("#"+map._container.id).trigger('ready',map);
 273                                         }
 274                                 }
 275                         );
 276                 }
 277         },
 278
 279         addOverlays: function () {
 280                 var map = this;
 281                 if (map.options.kml && map.options.kml.length){
 282                         map.kml = {};
 283                         for(var i in map.options.kml){
 284                                 map.kml[i] = new L.KML(map.options.kml[i], {async: true});
 285                                 if (map.options.centrer_fichier)
 286                                         map.kml[i].on("loaded", function(e) { map.fitBounds(e.target.getBounds()); });
 287                                 map.addLayer(map.kml[i]);
 288                         }
 289                 }
 290                 if (map.options.gpx && map.options.gpx.length){
 291                         map.gpx = {};
 292                         for(var i in map.options.gpx){
 293                                 map.gpx[i] = new L.GPX(map.options.gpx[i], {async: true});
 294                                 if (map.options.centrer_fichier)
 295                                         map.gpx[i].on("loaded", function(e) { map.fitBounds(e.target.getBounds()); });
 296                                 map.addLayer(map.gpx[i]);
 297                         }
 298                 }
 299                 if (map.options.geojson && map.options.geojson.length){
 300                         for(var i in map.options.geojson){
 301                                 jQuery.getJSON(map.options.geojson[i], function(data){
 302                                         if (data)
 303                                                 map.parseGeoJson(data);
 304                                 });
 305                         }
 306                 }
 307         }
 308 });
 309
 310 L.map.gis = function (id, options) {
 311         return new L.Map.Gis(id, options);
 312 };
 313
 314 })();