Changeset 70458 in spip-zone


Ignore:
Timestamp:
Mar 6, 2013, 10:33:41 AM (6 years ago)
Author:
cedric@…
Message:

Externaliser le JS d'initialisation d'une map

Location:
_plugins_/gis/trunk
Files:
1 added
2 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/gis/trunk/javascript/gis.js.html

    r70457 r70458  
    3434]
    3535
     36#INCLURE{javascript/gis_init_map.js}
     37
    3638[(#REM)
    3739Lib clustering si besoin
  • _plugins_/gis/trunk/modeles/carte_gis.html

    r70457 r70458  
    121121
    122122(function($){
    123 
    124         var gis_init_map = function(mapcfg) {
    125                 var map_container = mapcfg["mapid"];
    126 
    127                 // Création de la carte Leafleat
    128                 var map = new L.Map(map_container,{
    129                         scrollWheelZoom: mapcfg["scrollWheelZoom"],
    130                         zoomControl: mapcfg["zoomControl"],
    131                         maxZoom: mapcfg["maxZoom"]
    132                 });
    133                 // affecter sur la globale homonyme a mapid/map_container (compat ascendante)
    134                 eval(map_container+"=map;");
    135                 // affecter sur l'objet du DOM
    136                 $("#"+map_container).get(0).map=map;
    137 
    138                 // Appeler l'éventuelle fonction de callback et trigger "load"
    139                 map.on('load',function(e){
    140                         if (mapcfg["callback"] && typeof(mapcfg["callback"]) === "function") {
    141                                 var callback = mapcfg["callback"];
    142                                 callback(e.target);
    143                         }
    144                         $("#"+map_container).trigger('load',e.target);
    145                 });
    146 
    147                 // Déterminer la position initiale de la carte
    148                 if (!mapcfg['utiliser_bb']){
    149                         map.setView(new L.LatLng(mapcfg['lat'], mapcfg['lon']), mapcfg['zoom']);
    150                 }
    151                 else {
    152                         map.fitBounds(
    153                                 new L.LatLngBounds(
    154                                         new L.LatLng(mapcfg['sw_lat'], mapcfg['sw_lon']),
    155                                         new L.LatLng(mapcfg['ne_lat'], mapcfg['ne_lon'])
    156                                 )
    157                         );
    158                 }
    159 
    160                 var get_layer=function(name){
    161                         var layer;
    162                         if (typeof mapcfg['layers'][name]!=="undefined")
    163                         eval("layer=new "+ mapcfg['layers'][name]["layer"]+";");
    164                         return layer;
    165                 }
    166 
    167                 // Fond de carte par défaut (layer)
    168                 var default_layer = get_layer(mapcfg['default_layer']);
    169                 map.addLayer(default_layer);
    170 
    171                 if (mapcfg['control_type'] && !mapcfg['no_control'] && mapcfg['affiche_layers'].length>1){
    172                         var layers_control = new L.Control.Layers();
    173                         layers_control.addBaseLayer(default_layer,mapcfg['layers'][mapcfg['default_layer']]["nom"]);
    174                         for(var l in mapcfg['affiche_layers']){
    175                                 if (mapcfg['affiche_layers'][l]!==mapcfg['default_layer']){
    176                                         var layer = get_layer(mapcfg['affiche_layers'][l]);
    177                                         if (typeof layer!=="undefined")
    178                                                 layers_control.addBaseLayer(layer,mapcfg['layers'][mapcfg['affiche_layers'][l]]["nom"]);
    179                                 }
    180                         }
    181                         map.addControl(layers_control);
    182                         // ajouter l'objet du controle de layers à la carte pour permettre d'y accéder depuis le callback
    183                         map.layersControl = layers_control;
    184                         // classe noajax sur le layer_control pour éviter l'ajout de hidden par SPIP
    185                         $(layers_control._form).addClass('noajax');
    186                 }
    187 
    188                 map.setView(new L.LatLng(mapcfg['lat'],mapcfg['lon']),mapcfg['zoom']);
    189                 map.attributionControl.setPrefix('');
    190 
    191                 // Ajout des contrôles de la carte
    192                 if (!mapcfg['no_control']){
    193                         if (mapcfg['scale'])
    194                                 map.addControl(new L.Control.Scale());
    195                         if (mapcfg['fullscreen'])
    196                                 map.addControl(new L.Control.FullScreen());
    197                         if (mapcfg['overview']){
    198                                 var minimap_layer = get_layer(mapcfg['default_layer']);
    199                                 var miniMap = new L.Control.MiniMap(minimap_layer,{width: 100,height: 100}).addTo(map);
    200                         }
    201                 }
    202 
    203                 // API setGeoJsonFeatureIcon : Pour Ajouter l'icone d'un point (feature = item d'un GeoJson)
    204                 map.setGeoJsonFeatureIcon = function (feature, layer) {
    205                         // Déclarer l'icone du points, si défini
    206                         if (feature.properties && feature.properties.icon){
    207                                 layer.setIcon(new L.Icon({
    208                                         iconUrl: feature.properties.icon,
    209                                         iconSize: new L.Point( feature.properties.icon_size[0], feature.properties.icon_size[1] ),
    210                                         iconAnchor: new L.Point( feature.properties.icon_anchor[0], feature.properties.icon_anchor[1] ),
    211                                         popupAnchor: new L.Point( feature.properties.popup_anchor[0], feature.properties.popup_anchor[1] )
    212                                 }));
    213                         }
    214                 }
    215 
    216                 // API setGeoJsonFeaturePopup : Pour Ajouter le texte de popup d'un point (feature = item d'un GeoJson)
    217                 map.setGeoJsonFeaturePopup = function (feature, layer) {
    218                         // Déclarer le contenu de la popup s'il y en a
    219                         if (feature.properties && (feature.properties.title || feature.properties.description)){
    220                                 var popupContent = '';
    221                                 if (feature.properties.title)
    222                                         popupContent = '<strong class="title">' + feature.properties.title + '</strong>';
    223                                 if (feature.properties.description)
    224                                         popupContent = popupContent + feature.properties.description;
    225                                 layer.bindPopup(popupContent);
    226                         }
    227                 }
    228 
    229                 /*
    230                         Il y a pour le moment 2 façons d'analyser le GeoJson calculé
    231                         en fonction de si on veut faire du clustering (regrouper les points proches)
    232                         ou non. Il y a certainement moyen de regrouper en un seul élément
    233                         la plupart du code, en se passant du js L.geoJson même hors clustering.
    234                         À réfléchir.
    235                 */
    236                 // API parseGeoJson
    237                 if (!mapcfg['cluster']){
    238                         // Analyse des points et déclaration (sans regroupement des points en cluster)
    239                         map.parseGeoJson = function(data) {
    240                                 var geojson = new L.geoJson('', {
    241                                         style: mapcfg['path_styles'],
    242                                         onEachFeature: function (feature, layer) {
    243                                                 // Déclarer l'icone du point
    244                                                 map.setGeoJsonFeatureIcon(feature, layer);
    245                                                 // Déclarer le contenu de la popup s'il y en a
    246                                                 map.setGeoJsonFeaturePopup(feature, layer);
    247                                         }
    248                                 }).addTo(map);
    249                                 geojson.addData(data);
    250                                 if (mapcfg['autocenterandzoom'])
    251                                         map.fitBounds(geojson.getBounds());
    252                                 if (mapcfg['open_id'].length)
    253                                         gis_focus_marker(mapcfg['open_id'],map_container);
    254                         }
    255                 }
    256                 else {
    257                         // Analyse des points et déclaration (en regroupant les points en cluster)
    258                         map.parseGeoJson = function(data) {
    259                                 map.markers = [];
    260                                 /* Pour chaque points présents, on crée un marqueur */
    261                                 $.each(data.features, function(i, feature) {
    262                                         if (feature.geometry.coordinates[0]) {
    263                                                 var latlng = new L.LatLng(feature.geometry.coordinates[1], feature.geometry.coordinates[0]);
    264                                                 var marker = new L.Marker(latlng);
    265                                                 // Déclarer l'icone du point
    266                                                 map.setGeoJsonFeatureIcon(feature, marker);
    267                                                 // Déclarer le contenu de la popup s'il y en a
    268                                                 map.setGeoJsonFeaturePopup(feature, marker);
    269 
    270                                                 marker.id = feature.id;
    271                                                 map.markers.push(marker);
    272                                         }
    273                                 });
    274                                 /* Ajout des marqueurs dans un clustering JS client */
    275                                 var options = {};
    276                                 if (mapcfg["clusterMaxZoom"])
    277                                         options["maxZoom"] = mapcfg["clusterMaxZoom"];
    278                                 if (mapcfg["clusterStyles"].length)
    279                                         options["styles"] = mapcfg["clusterStyles"];
    280                                 map.markerCluster = new L.Marker.Clusterer(map, markers, options);
    281                         }
    282                 }
    283 
    284                 // API Compat Gis3 : addJSON et removeAllMarkers
    285                 map.addJSON = map.parseGeoJson
    286                 map.removeAllMarkers = function(){
    287                         for(l in this._layers)
    288                         if (this._layers[l]._layers){
    289                          this.removeLayer(this._layers[l]);
    290                         }
    291                 }
    292 
    293                 if (mapcfg['affiche_points'] && mapcfg['json_points'].length){
    294                         // Récupération des points à mettre sur la carte, via json externe
    295                         var args = mapcfg['json_points']['env'];
    296                         args["objets"] = mapcfg['json_points']['objets'];
    297                         args["limit"] = mapcfg['json_points']['limit'];
    298                         if (args["objets"]=="point_libre"){
    299                                 args["lat"]=mapcfg['lat'];
    300                                 args["lon"]=mapcfg['lon'];
    301                                 args["titre"]=mapcfg['json_points']['titre'];
    302                                 args["description"]=mapcfg['json_points']['description'];
    303                                 args["icone"]=mapcfg['json_points']['icone'];
    304                         }
    305                         jQuery.getJSON(mapcfg['json_points']['url'],args,
    306                                 function(data) {
    307                                         if (data){
    308                                                 // Charger le json (data) et déclarer les points
    309                                                 map.parseGeoJson(data);
    310                                                 $("#"+map_container).trigger('ready',map);
    311                                         }
    312                                 }
    313                         );
    314                 }
    315 
    316                 if (mapcfg['kml'] && mapcfg['kml'].length){
    317                         map.kml = {};
    318                         for(var i in mapcfg['kml']){
    319                                 map.kml[i] = new L.KML(mapcfg['kml'][i], {async: true});
    320                                 map.kml[i].on("loaded", function(e) { map.fitBounds(e.target.getBounds()); });
    321                                 map.addLayer(map.kml[i]);
    322                         }
    323                 }
    324                 if (mapcfg['gpx'] && mapcfg['gpx'].length){
    325                         map.gpx = {};
    326                         for(var i in mapcfg['gpx']){
    327                                 map.gpx[i] = new L.GPX(mapcfg['gpx'][i], {async: true});
    328                                 map.gpx[i].on("loaded", function(e) { map.fitBounds(e.target.getBounds()); });
    329                                 map.addLayer(map.gpx[i]);
    330                         }
    331                 }
    332 
    333                 if (mapcfg['localize_visitor'])
    334                         map.locate({setView: true, maxZoom: mapcfg['zoom']});
    335 
    336                 // si pas de points trigger ici
    337                 if (!mapcfg['affiche_points'] || !mapcfg['json_points'].length)
    338                         $("#"+map_container).trigger('ready',map);
    339         }
    340 
    341 
    342123        // Charger le javascript de GIS et initialiser la carte
    343124        $(function(){
Note: See TracChangeset for help on using the changeset viewer.