Manage different and multiple layers in areas (including default)

13 files changed, 92 insertions, 707 deletions

diff --git a/chimere/default_settings.py b/chimere/default_settings.py
index 7b7d1c3..121d912 100644
--- a/chimere/default_settings.py
+++ b/chimere/default_settings.py
@@ -40,9 +40,7 @@ CHIMERE_DAYS_BEFORE_EVENT = 30
 CHIMERE_DEFAULT_CATEGORIES = [1]
 
 # JS definition of the main map cf. OpenLayers documentation for more details
-#MAP_LAYER = '''new OpenLayers.Layer.OSM.CycleMap("Cycle map", {
-#displayOutsideMaxExtent: true, wrapDateLine: true})''' # OSM cyclemap
-CHIMERE_MAP_LAYER = "new OpenLayers.Layer.OSM.Mapnik('Mapnik')" # OSM mapnik map
+CHIMERE_DEFAULT_MAP_LAYER = "new OpenLayers.Layer.OSM.Mapnik('Mapnik')" # OSM mapnik map
 
 # display picture inside the description by default or inside a galery?
 CHIMERE_MINIATURE_BY_DEFAULT = True
diff --git a/chimere/fixtures/initial_data.json b/chimere/fixtures/initial_data.json
index 84931f4..553f7d6 100644
--- a/chimere/fixtures/initial_data.json
+++ b/chimere/fixtures/initial_data.json
@@ -236,7 +236,7 @@
         "pk": 1,
         "model": "chimere.layer",
         "fields": {
-            "layer_code": "OpenLayers.Layer.OSM.Mapnik({% trans \"Default\" %},\r\n{attribution:\"\", keyid:\"mapnik\", displayOutsideMaxExtent:!0,wrapDateLine:!0,layerCode:\"M\"})",
+            "layer_code": "new OpenLayers.Layer.OSM.Mapnik(\"Default\",\r\n{attribution:\"\", keyid:\"mapnik\", displayOutsideMaxExtent:!0,wrapDateLine:!0,layerCode:\"M\"})",
             "name": "OSM - Mapnik"
         }
     },
@@ -244,7 +244,7 @@
         "pk": 2,
         "model": "chimere.layer",
         "fields": {
-            "layer_code": "OpenLayers.Layer.OSM.CycleMap({% trans \"Cycle map\" %},\r\n{attribution:\"Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>\",\r\nkeyid:\"cyclemap\",displayOutsideMaxExtent:!0,wrapDateLine:!0,layerCode:\"C\"})",
+            "layer_code": "new OpenLayers.Layer.OSM.CycleMap(\"Cycle map\",\r\n{attribution:\"Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>\",\r\nkeyid:\"cyclemap\",displayOutsideMaxExtent:!0,wrapDateLine:!0,layerCode:\"C\"})",
             "name": "OSM - CycleMap"
         }
     },
@@ -252,7 +252,7 @@
         "pk": 3,
         "model": "chimere.layer",
         "fields": {
-            "layer_code": "OpenLayers.Layer.OSM.TransportMap({% trans \"Transport map\" %},\r\n{attribution:\"Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>\",\r\nkeyid:\"transportmap\",displayOutsideMaxExtent:!0,wrapDateLine:!0,layerCode:\"T\"})",
+            "layer_code": "new OpenLayers.Layer.OSM.TransportMap(\"Transport map\",\r\n{attribution:\"Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>\",\r\nkeyid:\"transportmap\",displayOutsideMaxExtent:!0,wrapDateLine:!0,layerCode:\"T\"})",
             "name": "OSM - TransportMap"
         }
     }
diff --git a/chimere/static/chimere/css/styles.css b/chimere/static/chimere/css/styles.css
index ee47557..3eb81c1 100644
--- a/chimere/static/chimere/css/styles.css
+++ b/chimere/static/chimere/css/styles.css
@@ -32,6 +32,8 @@ body, h2, h3, th,
 .ui-widget-header,
 .action li.selected,
 #welcome_button,
+#content .olControlLayerSwitcher .layersDiv,
+#content .olControlLayerSwitcher span,
 .olControlPermalink{
     background-color:#4ea30d;
 }
@@ -568,6 +570,43 @@ table.inline-table td input[type=file]{
     left:220px;
 }
 
+#content .olControlLayerSwitcher .baseLbl,
+#content .olControlLayerSwitcher .dataLbl,
+#content .olControlLayerSwitcher .dataLayersDiv{
+    display:None;
+}
+
+#content .olControlLayerSwitcher {
+   top: 150px !important;
+   right: auto !important;
+   bottom: auto !important;
+   left: 0 !important;
+}
+
+
+#content .olControlLayerSwitcher .layersDiv {
+    padding-top: 5px;
+    padding-left: 5px !important;
+    padding-bottom: 5px;
+    padding-right: 0px !important;
+    width: 100%;
+    height: auto !important;
+}
+
+#content .olControlLayerSwitcher .layersDiv .baseLayersDiv,
+{
+    padding-left: 15px;
+}
+
+#content .olControlLayerSwitcher .maximizeDiv,
+#content .olControlLayerSwitcher .minimizeDiv {
+    top: 10px !important;
+    right: auto !important;
+    position: absolute !important;
+    bottom: auto !important;
+    left: 0px !important;
+}
+
 .simple .olControlScaleLine {
     bottom:50px;
     left:10px;
diff --git a/chimere/static/chimere/img/layer-switcher-maximize.png b/chimere/static/chimere/img/layer-switcher-maximize.png
index 33368db..f23bef8 100644
--- a/chimere/static/chimere/img/layer-switcher-maximize.png
+++ b/chimere/static/chimere/img/layer-switcher-maximize.png
diff --git a/chimere/static/chimere/js/edit_map.js b/chimere/static/chimere/js/edit_map.js
deleted file mode 100644
index 5000b75..0000000
--- a/chimere/static/chimere/js/edit_map.js
+++ /dev/null
@@ -1,149 +0,0 @@
-/* Copyright (C) 2008  Étienne Loks  <etienne.loks_AT_peacefrogsDOTnet>
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as
-published by the Free Software Foundation, either version 3 of the
-License, or (at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-See the file COPYING for details.
-*/
-
-/* map edit */
-
-var map;
-
-/* availaible map layers */
-var layerMarkers = new OpenLayers.Layer.Markers('POIs');
-
-/* default size and offset for icon */
-var size = new OpenLayers.Size(21, 25);
-var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
-var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset);
-
-/* set a marker with a click on the map */
-var setMarker = function (event){
-    event = event || window.event;
-    var lonlat = layerMarkers.getLonLatFromViewPortPx(event.xy);
-    putMarker(lonlat, false);
-    OpenLayers.Event.stop(event);
-}
-
-/* put the marker on the map and update latitude and longitude fields */
-var putMarker = function (lonlat, zoom){
-    if (marker) {
-        layerMarkers.removeMarker(marker);
-    }
-    var marker = new OpenLayers.Marker(lonlat.clone(), icon);
-    layerMarkers.addMarker(marker);
-    lonlat = lonlat.clone().transform(map.getProjectionObject(),
-                                      epsg_display_projection);
-    document.getElementById('id_point').value = 'POINT(' + lonlat.lon +
-                                                ' ' + lonlat.lat + ')';
-    document.getElementById('live_latitude').value = lonlat.lat;
-    document.getElementById('live_longitude').value = lonlat.lon;
-    /*zoom to the point*/
-    if (zoom){
-        var bounds = layerMarkers.getDataExtent();
-        if (bounds) map.zoomToExtent(bounds);
-    }
-    return;
-}
-
-/* main initialisation function */
-function init(){
-    var options = {
-        controls:[new OpenLayers.Control.Navigation(),
-                    new OpenLayers.Control.PanPanel(),
-                    new OpenLayers.Control.ZoomPanel(),
-                    new OpenLayers.Control.Attribution()],
-        maxResolution: 156543.0399,
-        units: 'm',
-        projection: epsg_projection,
-        displayProjection: epsg_display_projection
-    };
-    if (restricted_extent){
-        restricted_extent.transform(epsg_display_projection, epsg_projection);
-        options['restrictedExtent'] = restricted_extent;
-    }
-    map = new OpenLayers.Map ('map_edit', options);
-    layerMarkers.setOpacity(0.5);
-    map.addLayers([map_layer, layerMarkers]);
-    map.events.register('click', map, setMarker);
-    /* zoom to the appropriate extent */
-    if (!zoomToCurrentExtent(map)){
-        map.setCenter(centerLonLat, 12);
-    }
-}
-
-
-/* code for drag'n drop : delayed for further version of openlayers */
-
-/*
-function init_b(){
-    init();
-
-    marker.events.register('mouseup', marker, releaseMarker);
-    marker.events.register('mousedown', marker, catchMarker);
-    marker.events.register('mouseover', marker, markerOver);
-    marker.events.register('mouseout', marker, markerOut);
-
-    map.events.register('mousemove', map, onMouseMove);
-    map.events.register('moveend', map, onMoveEnd);
-}
-
-var marker_catched = false;
-
-function catchMarker(event){
-    marker_catched = true;
-    event = event || window.event;
-    OpenLayers.Event.stop(event);
-}
-
-function releaseMarker(event){
-    event = event || window.event;
-    if(marker_catched) {
-        marker_catched = false;
-        lonlat = layerMarkers.getLonLatFromViewPortPx(marker.icon.px);
-        marker.lonlat = lonlat;
-        document.getElementById('latitude').value = marker.lonlat.lat;
-        document.getElementById('longitude').value = marker.lonlat.lon;
-    }
-    OpenLayers.Event.stop(event);
-}
-
-function onMouseMove(event) {
-    event = event || window.event;
-    if (!marker_catched) {return;}
-    marker.icon.px = null;
-    marker.icon.moveTo(new OpenLayers.Pixel(event.xy.x + delta_x,
-                                            event.xy.y + delta_y + 20));
-    defLiveLatLon();
-    lonlat = layerMarkers.getLonLatFromViewPortPx(marker.icon.px).transform(epsg_projection, epsg_display_projection);
-    live_longitude.value = lonlat.lon;
-    live_latitude.value = lonlat.lat;
-    OpenLayers.Event.stop(event);
-}
-
-function onMoveEnd(event) {
-    event = event || window.event;
-    marker.icon.px = map.getPixelFromLonLat(marker.lonlat);
-    OpenLayers.Event.stop(event);
-}
-
-var markerOver = function (evt) {
-    document.body.style.cursor='pointer';
-    OpenLayers.Event.stop(evt);
-};
-var markerOut = function (evt) {
-    document.body.style.cursor='auto';
-    OpenLayers.Event.stop(evt);
-};
-*/
diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js
index 4c35fdf..f395333 100644
--- a/chimere/static/chimere/js/jquery.chimere.js
+++ b/chimere/static/chimere/js/jquery.chimere.js
@@ -141,7 +141,10 @@ See the file COPYING for details.
             }
             /* Add Layers */
             settings.map.addLayers(settings.map_layers);
-            if (settings.map_layers.length > 1) settings.map.addControl(new OpenLayers.Control.LayerSwitcher());
+            if (settings.map_layers.length > 1){
+                settings.map.addControl(new OpenLayers.Control.LayerSwitcher(
+                                        {roundedCorner:false}));
+            }
             /* Vectors layer */
             settings.layerVectors = new OpenLayers.Layer.Vector("Vector Layer");
             settings.map.addLayer(settings.layerVectors);
diff --git a/chimere/static/chimere/js/main_map.js b/chimere/static/chimere/js/main_map.js
deleted file mode 100644
index 42c9b28..0000000
--- a/chimere/static/chimere/js/main_map.js
+++ /dev/null
@@ -1,534 +0,0 @@
-/* Copyright (C) 2008-2011  Étienne Loks  <etienne.loks_AT_peacefrogsDOTnet>
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as
-published by the Free Software Foundation, either version 3 of the
-License, or (at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-See the file COPYING for details.
-*/
-
-/* main map */
-
-var current_cat = -1;
-
-/* open a category section */
-function toggleCategory(item){
-    var id = item.id.split('_').pop();
-    var old;
-    if (current_cat != -1){
-        old = document.getElementById('maincategory_' + current_cat);
-    } else {
-        img = document.getElementById('maincategory_img_' + id);
-        if (img.src.split('/').pop() == "minus.png"){
-            current_cat = id;
-            old = document.getElementById('maincategory_' + id);
-        }
-    }
-    if(old){
-        old.style.display = 'None';
-        old_img = document.getElementById('maincategory_img_' + current_cat);
-        old_img.src = media_path + "icons/plus.png";
-    }
-    if (id != current_cat){
-        current_cat = id;
-        document.getElementById('maincategory_' + current_cat).style.display = 'block';
-        img = document.getElementById('maincategory_img_' + current_cat);
-        img.src = media_path + "icons/minus.png";
-    } else {
-        current_cat = 0;
-    }
-}
-
-/* reopen the current opened categories when a redraw occurs */
-function reOpenCurrent(){
-    if (current_cat && current_cat != -1){
-        document.getElementById('maincategory_' + current_cat).style.display = 'block';
-        img = document.getElementById('maincategory_img_' + current_cat);
-        img.src = media_path + "icons/minus.png";
-    }
-}
-
-function reCheckCategories(){
-    /* recheck categories when a redraw occurs */
-    if (!checked_categories){
-        return;
-    }
-    var checked_categories_ids = checked_categories.split('_');
-    inputs = window.document.forms["frm_categories"];
-    for (var i = 0; i < inputs.length; i++) {
-        input = inputs[i];
-        cat_id = input.name.split('_').pop();
-        if (checked_categories_ids.indexOf(cat_id) != -1){
-            input.checked = true;
-        }
-        if (input.id == 'display_submited' && display_submited == true){
-            input.checked = true;
-        }
-    }
-}
-
-/* get available subcategories for a designed category */
-function getSubcategories(category_id){
-    var ul = document.getElementById('maincategory_'+category_id);
-    var subcats = new Array();
-    for (i in ul.children){
-        var li = ul.children[i];
-        if (li.id){
-            subcats.push(li.id.split('_').pop());
-        }
-    }
-    return subcats;
-}
-
-/* check all the categories if clicked, unckeck if unclick */
-function checkAll(item){
-    check = false;
-    if(item.checked == true){
-        check = true;
-    }
-    id = item.id.split('_').pop();
-    var subcats = getSubcategories(id);
-    for (i=0;i < subcats.length; i++){
-        var checkbox = document.getElementById('category_'+subcats[i]);
-        checkbox.checked = check;
-    }
-}
-
-var map;
-var permalink;
-
-/* default size and offset for icon */
-var size = new OpenLayers.Size(21, 25);
-var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
-
-/* define global variable */
-var markers = new Array();
-var layerMarkers;
-var layerVectors;
-
-var simple = false;
-var first = true;
-
-var currentPopup;
-var currentFeature;
-var clicked = false;
-
-/* show a popup */
-function showPop(feature) {
-    if (currentPopup != null) {
-      currentPopup.hide();
-    }
-    if (feature.popup == null) {
-        feature.popup = feature.createPopup();
-        map.addPopup(feature.popup);
-    } else {
-        feature.popup.toggle();
-    }
-    currentPopup = feature.popup;
-    /* hide on click on the cloud */
-    currentPopup.groupDiv.onclick = hidePopUp;
-    permalink.updateLink();
-}
-
-/* check checked categories */
-var checked_categories;
-var display_submited = false;
-
-function updateCheckedCategories(){
-    /* get checked categories */
-    inputs = window.document.forms["frm_categories"];
-    checked_categories = '';
-    display_submited = false;
-    for (var i = 0; i < inputs.length; i++) {
-        input = inputs[i];
-        // 'category_'.length : 9
-        if (input.checked
-             && input.name.substring(9, 0) == 'category_'){
-            id = input.name.substring(9, input.name.length);
-            if(checked_categories) checked_categories += '_';
-            checked_categories += id;
-        }
-        if (input.checked && input.name == 'display_submited'){
-            display_submited = true;
-        }
-    }
-    permalink.updateLink();
-}
-
-/* load marker and route layer from a JSON feature string */
-function loadLayersFromJSON(layer_markers, layer_vectors, geo_objects){
-    for (var i = 0; i < geo_objects.features.length; i++) {
-        var feature = geo_objects.features[i];
-        if (feature.geometry.type == 'Point'){
-            putMarker(layer_markers, feature);
-        } else if (feature.geometry.type == 'LineString') {
-            putRoute(layer_vectors, feature);
-        }
-    }
-}
-
-/* zoom to an area */
-function zoomToArea(left, top, right, bottom){
-    var bounds = new OpenLayers.Bounds(left, bottom, right, top);
-    bounds.transform(epsg_display_projection, epsg_projection);
-    map.zoomToExtent(bounds, true);
-    loadCategories();
-}
-
-/* zoom to a desired category */
-function zoomToCategory(category_id){
-    var sub_cats = getSubcategories(category_id).join('_');
-    zoomToSubCategory(sub_cats);
-}
-
-/* zoom to desired sub categories */
-function zoomToSubCategory(subcategory_ids){
-    /* 0 stand for all categories */
-    var uri = extra_url + "getGeoObjects/" + subcategory_ids;
-    if (display_submited) uri += "/A_S";
-    OpenLayers.loadURL(uri, '', this, zoomToCategoryExtent);
-}
-
-/* zoom to a selected category from an http response GeoJSON */
-function zoomToCategoryExtent(response){
-    if (response.responseText.indexOf('no results') != -1) return;
-    var fakeLayerVectors = new OpenLayers.Layer.Vector("Fake vector layer");
-    var fakeLayerMarkers = new OpenLayers.Layer.Markers('Fake POIs layer');
-    var json = new OpenLayers.Format.JSON();
-    var geo_objects = json.read(response.responseText);
-    /* load every geo object */
-    loadLayersFromJSON(fakeLayerMarkers, fakeLayerVectors, geo_objects);
-    var bounds = fakeLayerMarkers.getDataExtent();
-    if (bounds){
-        bounds.extend(fakeLayerVectors.getDataExtent());
-    } else {
-        bounds = fakeLayerVectors.getDataExtent();
-    }
-    if(bounds){
-        map.zoomToExtent(bounds);
-    }
-    fakeLayerMarkers.destroy();
-    fakeLayerVectors.destroy();
-    loadCategories();
-}
-
-/* update the categories with an AJAX request */
-function loadCategories(){
-    var current_extent = map.getExtent().transform(map.getProjectionObject(),
-                                                   epsg_display_projection);
-    current_extent = current_extent.toArray().join('_')
-    current_extent = current_extent.replace(/\./g, 'D');
-    current_extent = current_extent.replace(/-/g, 'M');
-    var uri = extra_url + "getAvailableCategories/" + current_extent;
-    if (display_submited) uri += "/A_S";
-    OpenLayers.loadURL(uri, '', this, updateCategories);
-}
-
-function updateCategories(response){
-    if (response.responseText.indexOf('no results') != -1) {
-        return;
-    }
-    document.getElementById('categories').innerHTML = response.responseText;
-    reCheckCategories();
-    reOpenCurrent();
-}
-
-/* load geo objects with an AJAX request */
-function loadGeoObjects(){
-    if (!first){ updateCheckedCategories(); }
-    else if (p_checked_categories){
-        checked_categories = p_checked_categories.join('_');
-    }
-    first = false;
-    /* 0 stand for all categories */
-    if (!checked_categories) checked_categories = '0';
-    var uri = extra_url + "getGeoObjects/" + checked_categories;
-    if (display_submited) uri += "/A_S";
-    OpenLayers.loadURL(uri, '', this, setGeoObjects);
-}
-
-/* update the marker and vector layers from an http response GeoJSON */
-function setGeoObjects(response){
-    if(layerMarkers) layerMarkers.destroy();
-    if(layerVectors) layerVectors.destroy();
-    if (response.responseText.indexOf('no results') == -1) {
-        /* clean the marker layer */
-        if (currentPopup) {
-            currentPopup.hide();
-            if (!simple){
-                hide('detail');
-            }
-        }
-        layerVectors = new OpenLayers.Layer.Vector("Vector Layer");
-        map.addLayer(layerVectors);
-        layerVectors.setOpacity(0.8);
-        layerMarkers = new OpenLayers.Layer.Markers('POIs');
-        map.addLayer(layerMarkers);
-        layerMarkers.setOpacity(0.8);
-
-        var json = new OpenLayers.Format.JSON();
-        var geo_objects = json.read(response.responseText);
-        /* load every geo object */
-        loadLayersFromJSON(layerMarkers, layerVectors, geo_objects);
-        /*
-        var geojson = new OpenLayers.Format.GeoJSON();
-        var markers_pt = geojson.read(response.responseText);
-        for (var i = 0; i < markers_pt.length; i++) {
-            putMarker2(markers_pt[i]);
-        }*/
-    }
-}
-
-/* put a route on the map */
-function putRoute(layer, route) {
-    var polyline = route.geometry;
-    var point_array = new Array();
-    for (i=0; i<polyline.coordinates.length; i++){
-        var point = new OpenLayers.Geometry.Point(polyline.coordinates[i][0],
-                                                  polyline.coordinates[i][1]);
-        point_array.push(point);
-    }
-    var linestring = new OpenLayers.Geometry.LineString(point_array);
-    linestring.transform(epsg_display_projection, map.getProjectionObject());
-    currentFeature = new OpenLayers.Feature.Vector();
-
-    var style = OpenLayers.Util.extend({},
-                                OpenLayers.Feature.Vector.style['default']);
-    style.strokeColor = route.properties.color;
-    style.strokeWidth = 3;
-    currentFeature.style = style;
-    currentFeature.geometry = linestring;
-    layer.addFeatures([currentFeature]);
-}
-
-
-/* put a marker on the map */
-function putMarker(layer, mark) {
-    /* initialise a new marker with appropriate attribute for setting a
-    marker */
-    lat = mark.geometry.coordinates[1];
-    lon = mark.geometry.coordinates[0];
-    var size = new OpenLayers.Size(mark.properties.icon_width,
-                                   mark.properties.icon_height);
-    iconclone = new OpenLayers.Icon(media_path + mark.properties.icon_path,
-                                    size, offset);
-    var feature = new OpenLayers.Feature(markers,
-              new OpenLayers.LonLat(lon, lat).transform(epsg_display_projection,
-                                                        epsg_projection),
-              {icon:iconclone});
-    /*feature.closeBox = false;*/
-    feature.pk = mark.properties.pk;
-    feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud);
-    feature.data.popupContentHTML = "<div class='cloud'>";
-    feature.data.popupContentHTML += mark.properties.name;
-    feature.data.popupContentHTML += "</div>";
-    feature.data.overflow = 'hidden';
-    var marker = feature.createMarker();
-    /* manage markers events */
-    var markerClick = function (evt) {
-        currentFeature = this;
-        if (clicked) {
-            if (currentPopup == this.popup) {
-                this.popup.hide();
-                clicked = false;
-                if (!simple){
-                    hide('detail');
-                }
-            } else {
-                currentPopup.hide();
-                showPop(this);
-                updateDetail(this.pk);
-            }
-        } else {
-            showPop(this);
-            clicked = true;
-            updateDetail(this.pk);
-        }
-        OpenLayers.Event.stop(evt);
-    };
-    var markerOver = function (evt) {
-        document.body.style.cursor='pointer';
-        OpenLayers.Event.stop(evt);
-    };
-    var markerOut = function (evt) {
-        document.body.style.cursor='auto';
-        OpenLayers.Event.stop(evt);
-    };
-    marker.events.register('click', feature, markerClick);
-    marker.events.register('mouseover', feature, markerOver);
-    marker.events.register('mouseout', feature, markerOut);
-    layer.addMarker(marker);
-    /* show the item when designed in the permalink */
-    if (p_current_feature == feature.pk){
-        p_current_feature = null;
-        showPop(feature);
-        clicked = true;
-        updateDetail(feature.pk);
-        map.setCenter(feature.lonlat, 17);
-        updateCategories();
-    }
-    return feature;
-}
-
-var hidePopUp = function (evt) {
-    if (clicked) {
-        currentPopup.hide();
-        clicked = false;
-        if (!simple){
-            hide('detail');
-        }
-    }
-}
-
-var refreshMapItems = function (evt) {
-    loadCategories();
-}
-
-/* update current detail panel with an AJAX request */
-function updateDetail(pk){
-    var uri = extra_url + "getDetail/" + pk;
-    if (simple){uri += "/?simple=True"}
-    OpenLayers.loadURL(uri, '', this, setDetail);
-}
-
-/* update the detail panel from an http response */
-function setDetail(response){
-    if (response.responseText.indexOf('no results') == -1) {
-        if (!simple){
-            document.getElementById('detail').innerHTML = response.responseText;
-            show('detail');
-        } else {
-            currentPopup.setContentHTML("<div class='cloud'>" +
-                                              response.responseText + "</div>");
-        }
-    }
-}
-
-/* show the detail of a category */
-function displayCategoryDetail(category_id) {
-    var uri = extra_url + "getDescriptionDetail/" + category_id;
-    OpenLayers.loadURL(uri, '', this, setCategoryDetail);
-}
-
-/* update the category detail panel from an http response */
-function setCategoryDetail(response){
-    if (response.responseText.indexOf('no results') == -1) {
-        document.getElementById('category_detail').innerHTML = 
-                                                response.responseText;
-        show('category_detail');
-    }
-}
-
-/* new permalink createParams method - update when facilities are given to
-personalize the permalink */
-function createParams(center, zoom, layers) {
-    center = center || this.map.getCenter();
-    var params = OpenLayers.Util.getParameters(this.base);
-    // If there's still no center, map is not initialized yet.
-    // Break out of this function, and simply return the params from the
-    // base link.
-    if (center) {
-        center.transform(epsg_projection, epsg_display_projection);
-        //zoom
-        params.zoom = zoom || this.map.getZoom();
-        //lon,lat
-        var lat = center.lat;
-        var lon = center.lon;
-        params.lat = Math.round(lat*100000)/100000;
-        params.lon = Math.round(lon*100000)/100000;
-        //layers
-        layers = layers || this.map.layers;
-        params.layers = '';
-        for (var i=0, len=layers.length; i<len; i++) {
-            var layer = layers[i];
-
-            if (layer.isBaseLayer) {
-                params.layers += (layer == this.map.baseLayer) ? "B" : "0";
-            } else {
-                params.layers += (layer.getVisibility()) ? "T" : "F";
-            }
-        }
-        /* only piece of code added */
-        params.checked_categories = checked_categories;
-        params.display_submited = display_submited;
-        if(currentFeature){
-            params.current_feature = currentFeature.pk;
-        }
-    }
-    return params;
-}
-
-/* main initialisation function */
-function init(){
-    /* set the main map */
-    var options = {
-        controls:[new OpenLayers.Control.Navigation(),
-                  new OpenLayers.Control.PanPanel(),
-                  new OpenLayers.Control.ZoomPanel(),
-                  new OpenLayers.Control.ScaleLine()],
-        maxResolution: 156543.0399,
-        units: 'm',
-        projection: new OpenLayers.Projection('EPSG:4326'),
-        theme:null
-    };
-    if (restricted_extent){
-        restricted_extent.transform(epsg_display_projection, epsg_projection);
-        options['restrictedExtent'] = restricted_extent;
-    }
-    map = new OpenLayers.Map('map', options);
-    permalink = new OpenLayers.Control.Permalink("permalink");
-    permalink.createParams = createParams;
-    map.addControl(permalink);
-    // update with the translated permalink label
-    if(permalink_label && permalink.div && permalink.div.childNodes.length > 0){
-        permalink.div.childNodes[0].textContent = permalink_label;
-    }
-    map.addLayers([map_layer]);
-
-    map.events.register('click', map, hidePopUp);
-    if (dynamic_categories){
-        map.events.register('moveend', map, refreshMapItems);
-    }
-    /* if from a permalink */
-    if (p_zoom) {
-        var p_centerLonLat = new OpenLayers.LonLat(p_lon, p_lat);
-        p_centerLonLat.transform(epsg_display_projection, epsg_projection);
-        map.setCenter(p_centerLonLat, p_zoom);
-        if (p_display_submited) {
-            document.getElementById('display_submited_check').checked = true;
-        }
-        if (p_checked_categories){
-            /* ckeck selected categories and uncheck others */
-            inputs = window.document.forms["frm_categories"];
-            for (var i = 0; i < inputs.length; i++) {
-                input = inputs[i];
-                if (input.name.substring(9, 0) == 'category_'){
-                    id = input.name.substring(9, input.name.length);
-                    input.checked = false;
-                    for (var cc=0; cc < p_checked_categories.length; cc++){
-                        if (p_checked_categories[cc] == id){
-                            input.checked = true;
-                        }
-                    }
-                }
-            }
-            checked_categories = p_checked_categories.join('_');
-        }
-    }
-    /* if not zoom to the extent in cookies */
-    else if (!zoomToCurrentExtent(map)){
-        /* if no extent in cookies zoom to default */
-        map.setCenter(centerLonLat, 13);
-    }
-    loadCategories();
-    loadGeoObjects();
-}
diff --git a/chimere/templates/chimere/blocks/head_chimere.html b/chimere/templates/chimere/blocks/head_chimere.html
index 8b92c6c..d24a13a 100644
--- a/chimere/templates/chimere/blocks/head_chimere.html
+++ b/chimere/templates/chimere/blocks/head_chimere.html
@@ -17,7 +17,7 @@
     OpenLayers.ImgPath = '{{ STATIC_URL }}chimere/img/';
     var EPSG_PROJECTION = epsg_projection = new OpenLayers.Projection('EPSG:{{ EPSG_PROJECTION }}');
     var CENTER_LONLAT = centerLonLat = new OpenLayers.LonLat{{ DEFAULT_CENTER }}.transform(epsg_display_projection, epsg_projection);
-    var map_layer = {{ MAP_LAYER|safe }};
+    /*var map_layer = {{ MAP_LAYER|safe }};*/
     var restricted_extent;
     {% if area_name %}
     var area_name = '{{ area_name }}';{% endif %}
diff --git a/chimere/templates/chimere/blocks/map_params.html b/chimere/templates/chimere/blocks/map_params.html
index 448e206..84b365e 100644
--- a/chimere/templates/chimere/blocks/map_params.html
+++ b/chimere/templates/chimere/blocks/map_params.html
@@ -1,7 +1,7 @@
 {% load i18n %}
 <script type="text/javascript">
     var chimere_init_options = {};
-    chimere_init_options["map_layers"] = [new OpenLayers.Layer.OSM.Mapnik('Mapnik')];
+    chimere_init_options["map_layers"] = [{{map_layers|safe|escape}}];
     chimere_init_options['permalink_label'] = '{%trans "Permalink"%}';
     {% if dynamic_categories %}chimere_init_options['dynamic_categories'] = 1;{% endif %}
     {% if default_area %}
diff --git a/chimere/templatetags/chimere_tags.py b/chimere/templatetags/chimere_tags.py
index e2f7cc9..14d58ec 100644
--- a/chimere/templatetags/chimere_tags.py
+++ b/chimere/templatetags/chimere_tags.py
@@ -8,6 +8,7 @@ from django.conf import settings
 from django.core.urlresolvers import reverse
 
 from chimere.models import Marker, Area, News
+from chimere.widgets import get_map_layers
 
 log = getLogger(__name__)
 
@@ -81,7 +82,7 @@ def head_chimere(context):
             "DEFAULT_CENTER": settings.CHIMERE_DEFAULT_CENTER,
             "DEFAULT_ZOOM": settings.CHIMERE_DEFAULT_ZOOM,
             "RESTRICTED_EXTENT": settings.CHIMERE_RESTRICTED_EXTENT,
-            "MAP_LAYER": settings.CHIMERE_MAP_LAYER,
+            "MAP_LAYER": settings.CHIMERE_DEFAULT_MAP_LAYER,
             "OSM_CSS_URLS": settings.OSM_CSS_URLS,
             "OSM_JS_URLS": settings.OSM_JS_URLS,
              }
@@ -98,6 +99,8 @@ def map_params(context):
     context_data['icon_offset_y'] = settings.CHIMERE_ICON_OFFSET_Y
     context_data['icon_width'] = settings.CHIMERE_ICON_WIDTH
     context_data['icon_height'] = settings.CHIMERE_ICON_HEIGHT
+    area_name = context['area_name'] if 'area_name' in context else 'area_name'
+    context_data['map_layers'] = ", ".join(get_map_layers(area_name))
     if 'request' not in context:
         return context_data
     request = context['request']
diff --git a/chimere/views.py b/chimere/views.py
index 7dc6669..489d235 100644
--- a/chimere/views.py
+++ b/chimere/views.py
@@ -91,7 +91,7 @@ def index(request, area_name=None, default_area=None, simple=False):
                          'error_message':'', 'default_area':default_area,
                          'news_visible': news_visible,
                          'areas_visible': settings.CHIMERE_DISPLAY_AREAS,
-                         'map_layer':settings.CHIMERE_MAP_LAYER,
+                         'map_layer':settings.CHIMERE_DEFAULT_MAP_LAYER,
                          'dynamic_categories':settings.CHIMERE_DYNAMIC_CATEGORIES,
                         })
     tpl = 'chimere/main_map.html'
@@ -199,7 +199,7 @@ def edit(request, area_name="", item_id=None, submited=False):
     response_dct.update({
         'actions':actions,
         'action_selected':('contribute', 'edit'),
-        'map_layer':settings.CHIMERE_MAP_LAYER,
+        'map_layer':settings.CHIMERE_DEFAULT_MAP_LAYER,
         'form':form,
         'formset_multi':formset_multi,
         'formset_picture':formset_picture,
@@ -300,7 +300,7 @@ def editRoute(request, area_name="", item_id=None, submited=False):
         'actions':actions,
         'action_selected':('contribute', 'edit-route'),
         'error_message':'',
-        'map_layer':settings.CHIMERE_MAP_LAYER,
+        'map_layer':settings.CHIMERE_DEFAULT_MAP_LAYER,
         'form':form,
         'formset_multi':formset_multi,
         'formset_picture':formset_picture,
diff --git a/chimere/widgets.py b/chimere/widgets.py
index 328605f..2637145 100644
--- a/chimere/widgets.py
+++ b/chimere/widgets.py
@@ -22,6 +22,7 @@ Extra widgets and fields
 """
 from django import conf
 from django import forms
+from django.core.exceptions import ObjectDoesNotExist
 from django.conf import settings
 from django.contrib.gis.db import models
 from django.contrib.gis.geos import fromstr
@@ -42,7 +43,7 @@ def getMapJS(area_name=''):
                                                settings.CHIMERE_DEFAULT_CENTER
     js += u"var media_path = '%s';\n" % settings.MEDIA_URL
     js += u"var static_path = '%s';\n" % settings.STATIC_URL
-    js += u"var map_layer = %s;\n" % settings.CHIMERE_MAP_LAYER
+    js += u"var map_layer = %s;\n" % settings.CHIMERE_DEFAULT_MAP_LAYER
     js += u"var restricted_extent;\n"
 
     if area_name:
@@ -56,6 +57,28 @@ def getMapJS(area_name=''):
          u"%s// !--></script>\n" % js
     return js
 
+def get_map_layers(area_name=''):
+    from chimere.models import Area
+    area = None
+    if area_name:
+        try:
+            area = Area.objects.get(name=area_name)
+        except ObjectDoesNotExist:
+            pass
+    else:
+        try:
+            area = Area.objects.get(default=True)
+        except ObjectDoesNotExist:
+            pass
+    map_layers = []
+    if area and area.layers.count():
+        map_layers = [layer.layer_code for layer in area.layers.all()]
+    elif settings.CHIMERE_DEFAULT_MAP_LAYER:
+        map_layers = [settings.CHIMERE_DEFAULT_MAP_LAYER]
+    else:
+        map_layers = ["new OpenLayers.Layer.OSM.Mapnik('Mapnik')"]
+    return map_layers
+
 class ChosenSelectWidget(forms.Select):
     """
     Chosen select widget.
@@ -126,21 +149,21 @@ class PointChooserWidget(forms.TextInput):
                     value = None
             else:
                 value = None
+        map_layers = get_map_layers(area_name)
         js = """
         var EPSG_DISPLAY_PROJECTION = epsg_display_projection = new OpenLayers.Projection('EPSG:%s');
         var EPSG_PROJECTION = epsg_projection = new OpenLayers.Projection('EPSG:%s');
         var chimere_init_options = {};
-        chimere_init_options["map_layers"] = [new OpenLayers.Layer.OSM.Mapnik('Mapnik')];
+        chimere_init_options["map_layers"] = [%s];
         chimere_init_options['dynamic_categories'] = false;
         chimere_init_options['edition'] = true;
         chimere_init_options["checked_categories"] = [];
         """ % (settings.CHIMERE_EPSG_DISPLAY_PROJECTION,
-               settings.CHIMERE_EPSG_PROJECTION)
+               settings.CHIMERE_EPSG_PROJECTION,
+               ", ".join(map_layers))
         #TODO: manage area
         tpl = u"<script type='text/javascript'><!--\n"\
               u"%s// !--></script>\n" % js
-        #tpl += u'<script src="%schimere/js/edit_map.js"></script>\n' % \
-        #                                             settings.STATIC_URL
         tpl += u"<div id='map_edit'></div>"\
                u"<div id='live_lonlat'>"\
                u"    <p><label for='live_latitude'>%s</label>"\
@@ -197,17 +220,19 @@ class RouteChooserWidget(forms.TextInput):
         Render a map and latitude, longitude information field
         '''
         tpl = getMapJS(area_name)
+        map_layers = get_map_layers(area_name)
         js = """
         var EPSG_DISPLAY_PROJECTION = epsg_display_projection = new OpenLayers.Projection('EPSG:%s');
         var EPSG_PROJECTION = epsg_projection = new OpenLayers.Projection('EPSG:%s');
         var chimere_init_options = {};
-        chimere_init_options["map_layers"] = [new OpenLayers.Layer.OSM.Mapnik('Mapnik')];
+        chimere_init_options["map_layers"] = [%s];
         chimere_init_options['dynamic_categories'] = false;
         chimere_init_options['edition'] = true;
         chimere_init_options['edition_type_is_route'] = true;
         chimere_init_options["checked_categories"] = [];
         """ % (settings.CHIMERE_EPSG_DISPLAY_PROJECTION,
-               settings.CHIMERE_EPSG_PROJECTION)
+               settings.CHIMERE_EPSG_PROJECTION,
+               ", ".join(map_layers))
         tpl = u"<script type='text/javascript'><!--\n"\
               u"%s// !--></script>\n" % js
         #TODO: manage area
diff --git a/example_project/settings.py b/example_project/settings.py
index b0d4188..332198e 100644
--- a/example_project/settings.py
+++ b/example_project/settings.py
@@ -71,10 +71,10 @@ CHIMERE_DEFAULT_CATEGORIES = [1]
 # display picture inside the description by default or inside a galery?
 CHIMERE_MINIATURE_BY_DEFAULT = False
 
-# JS definition of the main map cf. OpenLayers documentation for more details
-#MAP_LAYER = '''new OpenLayers.Layer.OSM.CycleMap("Cycle map", {
-#displayOutsideMaxExtent: true, wrapDateLine: true})''' # OSM cyclemap
-CHIMERE_MAP_LAYER = "new OpenLayers.Layer.OSM.Mapnik('Mapnik')" # OSM mapnik map
+# JS definition of the default map (for admin and when no map are defined in
+# the application)
+# cf. OpenLayers documentation for more details
+CHIMERE_DEFAULT_MAP_LAYER = "new OpenLayers.Layer.OSM.Mapnik('Mapnik')" # OSM mapnik map
 
 CHIMERE_XAPI_URL = 'http://open.mapquestapi.com/xapi/api/0.6/'
 CHIMERE_OSM_API_URL = 'api06.dev.openstreetmap.org' # test URL