First work on Leaflet script

* manage markers from a GeoJson source with custom icon

6 files changed, 429 insertions, 34 deletions

diff --git a/chimere/settings.sample.py b/chimere/settings.sample.py
index 2e5ad40..391c6e5 100644
--- a/chimere/settings.sample.py
+++ b/chimere/settings.sample.py
@@ -290,7 +290,8 @@ if 'MAP_JS_URLS' not in globals():
             STATIC_URL + "openlayers/OpenLayers.js",
             STATIC_URL + "openlayers/SimplePanZoom.js",
             "http://www.openstreetmap.org/openlayers/OpenStreetMap.js",
-            STATIC_URL + "chimere/js/jquery.chimere-ol.js"],
+            STATIC_URL + "chimere/js/jquery.chimere-ol.js"
+            ],
         'leaflet':[
             STATIC_URL + "leaflet/leaflet.js",
             STATIC_URL + "chimere/js/jquery.chimere-leaflet.js"
@@ -299,11 +300,13 @@ if 'MAP_JS_URLS' not in globals():
 
 if 'MAP_CSS_URLS' not in globals():
     global MAP_CSS_URLS
+    # key: [(url, condition)]
     MAP_CSS_URLS = {
-        'openlayers':["http://www.openlayers.org/api/theme/default/style.css"],
+        'openlayers':[("http://www.openlayers.org/api/theme/default/style.css",
+                       None)],
         'leaflet':[
-            STATIC_URL + "leaflet/leaflet.css",
-            STATIC_URL + "leaflet/leaflet.ie.css"
+            (STATIC_URL + "leaflet/leaflet.css", None),
+            (STATIC_URL + "leaflet/leaflet.ie.css", 'lte IE 8')
         ]
     }
 
diff --git a/chimere/static/chimere/js/jquery.chimere-leaflet.js b/chimere/static/chimere/js/jquery.chimere-leaflet.js
index 75a0fc3..569f9f5 100644
--- a/chimere/static/chimere/js/jquery.chimere-leaflet.js
+++ b/chimere/static/chimere/js/jquery.chimere-leaflet.js
@@ -106,9 +106,380 @@ See the file COPYING for details.
         * Plugin init function
         */
         init: function ( options ) {
+            settings = $.extend({}, defaults);
+            if ( options ) $.extend(settings, options);
+            var map_element = $(this).attr('id');
+
+            settings.map = map = L.map(map_element);
+            for (idx in settings.map_layers){
+                map.addLayer(settings.map_layers[idx]);
+            }
+            if(settings.zoom && settings.lat && settings.lon){
+                map.setView([settings.lat, settings.lon], settings.zoom);
+            } else {
+                map.fitWorld();
+            }
+            settings.icons = new Object();
+            settings.layerMarkers = L.geoJson(null, {
+                onEachFeature: function (feature, layer) {
+                    layer.bindPopup(feature.properties.name);
+                },
+                pointToLayer: function (feature, latlng) {
+                    if (feature.properties.weigthed){
+                        var geojsonMarkerOptions = {
+                            radius: 8,
+                            fillColor: "#ff7800",
+                            color: "#000",
+                            weight: 1,
+                            opacity: 1,
+                            fillOpacity: 0.8
+                        };
+                        return L.circleMarker(latlng, geojsonMarkerOptions);
+                    }
+                    var icon_path = MEDIA_URL + feature.properties.icon_path;
+                    if (!settings.icons.hasOwnProperty(icon_path)){
+                        var icon_offset = null;
+                        if (feature.properties.icon_offset){
+                            icon_offset = feature.properties.icon_offset;
+                        } else {
+                            icon_offset = [feature.properties.icon_width/2,
+                                           feature.properties.icon_height];
+                        }
+                        var popup_anchor = null;
+                        if (feature.properties.popup_anchor){
+                            popup_anchor = feature.properties.popup_anchor;
+                        } else {
+                            popup_anchor = [0,
+                                            -feature.properties.icon_height];
+                        }
+                        settings.icons[icon_path] = L.icon({
+                            iconUrl: icon_path,
+                            iconSize: [feature.properties.icon_width,
+                                       feature.properties.icon_height],
+                            iconAnchor: icon_offset,
+                            popupAnchor: popup_anchor
+                        });
+                    }
+                    return L.marker(latlng, {icon: settings.icons[icon_path]});
+                }
+            }).addTo(map);
+            settings.layerVectors = L.geoJson().addTo(map);
+
+            methods.loadCategories();
+            methods.loadGeoObjects();
+        },
+        hidePopup: function (evt) {
+            settings.map.closePopup();
+            return true;
+        },
+        /*
+        * Update the categories div in ajax
+        */
+        loadCategories: function () {
+            var current_extent = settings.map.getBounds();
+            current_extent = current_extent.toBBoxString();
+            current_extent = current_extent.split(',').join('_');
+            current_extent = current_extent.replace(/\./g, 'D');
+            current_extent = current_extent.replace(/-/g, 'M');
+            var uri = extra_url
+            if (settings.area_id) uri += settings.area_id + "/";
+            uri += "getAvailableCategories/";
+            var params = {"current_extent": current_extent}
+            if (settings.display_submited) params["status"] = "A_S";
+            $.ajax({url: uri,
+                    data: params,
+                    cache: false,
+                    success: function (data) {
+                            $('#categories').empty();
+                            $('#categories').html(data);
+                            _init_categories();
+                            _reCheckCategories();
+                            if (settings.current_category) {
+                                // TODO : add a force mode 
+                                // (in case the category is yet visible in HTML...)
+                                methods.toggle_category();
+                            }
+                        }
+                   });
+            var _toggle_subcategories = function (category_element) {
+                // Check subcategories only if unchecked
+                var val = category_element.is(":checked") ? true : false;
+                category_element.parent().find("li input").attr("checked", val);
+            }
+            var _toggle_categories = function (subcategory_element) {
+                var parent = subcategory_element.closest('ul');
+                var parent_label = parent.parent().find("> span");
+                if (parent.find('input[type=checkbox]:checked').length){
+                    parent_label.addClass('category-selected');
+                } else {
+                    parent_label.removeClass('category-selected');
+                }
+                var master_check = parent.find("> input");
+                if (parent.find('.subcategories input[type=checkbox]').length ==
+                    parent.find('.subcategories input[type=checkbox]:checked').length){
+                    master_check.attr('checked', 'checked');
+                } else {
+                    master_check.removeAttr('checked');
+                }
+
+                if($('#action-categories').length){
+                    if ($('#categories input[type=checkbox]:checked').length){
+                        $('#action-categories').addClass('category-selected');
+                    } else {
+                        $('#action-categories').removeClass('category-selected');
+                    }
+                }
+                return master_check;
+            };
+            var _init_categories = function () {
+                /*
+                * Add event listener in categories DOM elements
+                */
+                $('#categories #ul_categories > li > input').bind("click",
+                function (e) {
+                    methods.hidePopup(e);
+                    _toggle_subcategories($(this));
+                    methods.loadGeoObjects();
+                    //settings.permalink.updateLink();
+                });
+                $('.subcategories li input').bind("click", function (e) {
+                    var c_name = $(this).attr('name');
+                    c_name = c_name.substr(c_name.lastIndexOf("_")+1);
+                    if($(this).is(':checked')){
+                        methods.subcategory_detail(c_name);
+                    }
+                    var par = $(this).parent();
+                    if ($(this).attr('checked')){
+                        par.addClass('selected');
+                    } else {
+                        par.removeClass('selected');
+                    }
+                    methods.hidePopup(e);
+                    methods.loadGeoObjects();
+                    _toggle_categories($(this));
+                    //settings.permalink.updateLink();
+                    if ($('#layer_cat_'+c_name).length){
+                        $('#layer_cat_'+c_name).prop("checked",
+                                                     this.checked);
+                    }
+                });
+                $('#display_submited_check').bind("click", function () {
+                    methods.loadGeoObjects();
+                    //settings.permalink.updateLink();
+                });
+                // Zoom to category
+                $(".zoom_to_category").bind("click", function (e) {
+                    var id = this.id.substr(this.id.lastIndexOf("_")+1);
+                    helpers.zoom_to_category(id);
+                });
+                $(".zoom_to_subcategory").bind("click", function (e) {
+                    var id = this.id.substr(this.id.lastIndexOf("_")+1);
+                    helpers.zoom_to_subcategories([id]);
+                });
+                $(".toggle_category").parent().bind("click", function (e) {
+                    var item = $(this).children('.toggle_category');
+                    var id = item.attr('id').substr(item.attr('id').lastIndexOf("_")+1);
+                    methods.toggle_category(id);
+                });
+            }
+            var _reCheckCategories = function (){
+                /* recheck categories on init or when a redraw occurs */
+                if (!settings.checked_categories){
+                    return;
+                }
+                $('#frm_categories .subcategories input:checkbox').each(function(index){
+                    cat_id = $(this).attr('id').split('_').pop();
+                    if (settings.checked_categories.indexOf(parseInt(cat_id)) != -1) {
+                        $(this).attr("checked", "checked");
+                        _toggle_categories($(this));
+                        methods.toggle_category();
+                    } else {
+                        $(this).attr("checked", false);
+                    }
+                });
+                if (settings.display_submited == true){
+                    $('#display_submited_check').attr("checked", "checked");
+                }
+            }
+        },
+        /*
+        * Load markers and route from DB
+        */
+        loadGeoObjects: function () {
+            if ($('#waiting').length){
+                $('#waiting').show();
+            }
+            helpers.retrieve_checked_categories();
+            var ids = settings.checked_categories.join('_');
+            if (!ids) ids = '0';
+            var uri = extra_url + "getGeoObjects/" + ids;
+            if (settings.display_submited) uri += "/A_S";
+            $.ajax({url: uri,
+                    dataType: "json",
+                    success: function (data) {
+                        settings.layerMarkers.clearLayers();
+                        settings.layerVectors.clearLayers();
+                        settings.layerMarkers.addData(data);
+                        /*
+                        for (var i = 0; i < data.features.length; i++) {
+                            var feature = data.features[i];
+                            if (feature.geometry.type == 'Point'){
+                                methods.addMarker(feature);
+                            } else if (feature.geometry.type == 'LineString') {
+                                methods.addRoute(feature);
+                            } else if (feature.geometry.type == 'MultiLineString') {
+                                methods.addMultiLine(feature);
+                            }
+                        }*/
+                    },
+                    error: function (data, textStatus, errorThrown) {
+                        settings.layerMarkers.clearLayers();
+                        settings.layerVectors.clearLayers();
+                    },
+                    complete: function () {
+                        if($('#waiting').length){$('#waiting').hide();}
+                    }
+                });
+        },
+        subcategory_detail: function(category_id){
+            var uri = extra_url + "getCategory/" + category_id;
+
+            $.ajax({url: uri,
+                    dataType: "json",
+                    success: function (data) {
+                        if (!data.description){return}
+                        $('#category_description').html(data.description);
+                        $("#category_description").dialog("option", "title",
+                                                          data.name);
+                        $('#category_description').dialog('open');
+                    },
+                    error: function (data) {
+                        // fail silently
+                    }
+                });
+        },
+        toggle_category: function (id) {
+            // TODO make this id DOM element customisable
+            // Check if element is currently visible or not
+            var was_visible = $("#maincategory_" + id).is(":visible");
+            // Close all categories
+            var category_plus = STATIC_URL + "chimere/img/plus.png";
+            var category_minus = STATIC_URL + "chimere/img/minus.png";
+            if (settings.category_accordion){
+                $("#categories ul.subcategories").hide();
+                $("#categories img.toggle_category").attr("src", category_plus);
+                $("#categories .main_category").addClass("toggle_plus");
+                $("#categories .main_category").removeClass("toggle_minus");
+            }
+            // Put a minus image
+            if (!was_visible)
+            {
+                // Show the subcategories
+                $("#maincategory_" + id).toggle();
+                $("#maincategory_" + id).parent().addClass("toggle_minus");
+                $("#maincategory_" + id).parent().removeClass("toggle_plus");
+                // Put a plus image
+                $("#maincategory_img_" + id).attr("src", category_minus);
+                settings.current_category = id;
+            }
+            if (!settings.category_accordion && was_visible)
+            {
+                $("#maincategory_" + id).toggle();
+                $("#maincategory_" + id).parent().addClass("toggle_plus");
+                $("#maincategory_" + id).parent().removeClass("toggle_minus");
+                // Put a minus image
+                $("#maincategory_img_" + id).attr("src", category_plus);
+            }
+        },
+        zoom: function (options) {
+            if ($.hasattr("category", options)) {
+                helpers.zoom_to_category(options["category"]);
+            } else if ($.hasattr("subcategories", options)) {
+                helpers.zoom_to_subcategories(options["subcategories"]);
+            } else if ($.hasattr("area", options)) {
+                helpers.zoom_to_area(options["area"]);
+            }
         } // end of init
     }; // End of public methods
     var helpers = {
+        getSubcategories: function (category_id) {
+            if(settings.get_subcategories_fx) {
+                return settings.get_subcategories_fx(category_id, settings);
+            }
+            else {
+                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;
+            }
+        },
+        retrieve_checked_categories: function () {
+            /*
+            * Retrieve checked_categories, and store it in settings 
+            */
+            var initialized = false;
+            $('#frm_categories .subcategories input:checkbox').each(
+                function(index){
+                    if (!initialized){
+                        initialized = true;
+                        settings.checked_categories = [];
+                        settings.display_submited = false;
+                    }
+                    if ($(this).attr('checked') == 'checked' || $(this).attr('checked') == true){
+                        cat_id = $(this).attr('id').split('_').pop();
+                        settings.checked_categories.push(parseInt(cat_id));
+                    }
+            });
+            if(initialized && ($('#display_submited_check').attr("checked") == "checked" || $('#display_submited_check').attr("checked") == true)){
+                settings.display_submited = true;
+            }
+        },
+        zoom_to: function (bounds) {
+            settings.map.fitBounds(bounds);
+        },
+        zoom_to_subcategories: function (ids) {
+            // TODO add markers and check the subcategory, if not yet checked/displayed
+            var ids = ids.join('_');
+            if (!ids) ids = '0';
+            var uri = extra_url + "getGeoObjects/" + ids;
+            if (settings.display_submited) uri += "/A_S";
+            $.ajax({url: uri, 
+                    dataType: "json",
+                    success: function (data) {
+                        // Create a generic bounds
+                        var lon, lat, feature;
+                        var points = new Array();
+                        for (var i = 0; i < data.features.length; i++) {
+                            feature = data.features[i];
+                            if (feature.geometry.type == 'Point') {
+                                lat = feature.geometry.coordinates[1];
+                                lon = feature.geometry.coordinates[0];
+                                points.push(settings.map.latLngToLayerPoint([lat, lon]));
+                            } else if (feature.geometry.type == 'LineString') {
+                                // TODO
+                            }
+                        }
+                        var bound = L.Bounds(points);
+                        helpers.zoom_to(bounds);
+                   }
+               });
+        },
+        zoom_to_category: function (id) {
+            helpers.zoom_to_subcategories(helpers.getSubcategories(id));
+        },
+        zoom_to_area: function (coords) {
+            /* zoom to an area */
+            helpers.zoom_to([[coords[1], coords[0]],
+                             [coords[3], coords[2]]]);
+            if (settings.dynamic_categories) {
+                methods.loadCategories();
+            }
+        }
     }; // End of helpers
 
     $.fn.chimere = function (thing) {
diff --git a/chimere/static/chimere/js/jquery.chimere-ol.js b/chimere/static/chimere/js/jquery.chimere-ol.js
index 2e2d238..6660b2e 100644
--- a/chimere/static/chimere/js/jquery.chimere-ol.js
+++ b/chimere/static/chimere/js/jquery.chimere-ol.js
@@ -17,20 +17,22 @@ See the file COPYING for details.
 */
 
 /* Add OpenLayers MapQuest layer management */
-OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
-    name: "MapQuestOSM",
-    sphericalMercator: true,
-    url: ' http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png',
-    clone: function(obj) {
-        if (obj == null) {
-            obj = new OpenLayers.Layer.OSM(
-            this.name, this.url, this.getOptions());
-        }
-        obj = OpenLayers.Layer.XYZ.prototype.clone.apply(this, [obj]);
-        return obj;
-    },
-    CLASS_NAME: "OpenLayers.Layer.MapQuestOSM"
-});
+if (typeof(OpenLayers) != 'undefined'){
+    OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
+        name: "MapQuestOSM",
+        sphericalMercator: true,
+        url: ' http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png',
+        clone: function(obj) {
+            if (obj == null) {
+                obj = new OpenLayers.Layer.OSM(
+                this.name, this.url, this.getOptions());
+            }
+            obj = OpenLayers.Layer.XYZ.prototype.clone.apply(this, [obj]);
+            return obj;
+        },
+        CLASS_NAME: "OpenLayers.Layer.MapQuestOSM"
+    });
+};
 
 /*
 * Little hasattr helper
@@ -82,16 +84,13 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
             hide_popup_fx: null,
             // if leave to false every click on the map hide the pop-up
             explicit_popup_hide: false,
-            controls:[new OpenLayers.Control.Navigation(),
-                      new OpenLayers.Control.PanPanel(),
-                      new OpenLayers.Control.ZoomPanel(),
-                      new OpenLayers.Control.ScaleLine()],
-            popupClass: OpenLayers.Popup.FramedCloud,
+            controls: null,
+            popupClass: null,
             popupContentFull: false, // if true the detail is inside the popup
             category_accordion: true, // category opening behave like an accordion
             maxResolution: 156543.0399,
             units: 'm',
-            projection: new OpenLayers.Projection('EPSG:4326'),
+            projection: null,
             theme: null,
             enable_clustering: false,
             routing: false, // enable routing management
@@ -104,13 +103,10 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
             current_category: null, // To store the current category clicked in list
             current_route_feature: null, // To store the current route find by routing
             itinerary_step_number:0, // current step number
-            icon_offset: new OpenLayers.Pixel(0, 0),
+            icon_offset: null,
             edition: false, // edition mode
             edition_type_is_route: false, // route or POI edition
-            default_icon: new OpenLayers.Icon(
-                    'http://www.openlayers.org/dev/img/marker-green.png',
-                    new OpenLayers.Size(21, 25),
-                    new OpenLayers.Pixel(-(21/2), -25)),
+            default_icon: null,
             cluster_icon: null,
             marker_hover_id:'marker_hover',
             marker_hover_content_id:'marker_hover_content',
@@ -129,6 +125,27 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
         */
         init: function ( options ) {
             /* Manage parameters */
+            if (defaults.controls == null){
+                defaults.controls = [new OpenLayers.Control.Navigation(),
+                                     new OpenLayers.Control.PanPanel(),
+                                     new OpenLayers.Control.ZoomPanel(),
+                                     new OpenLayers.Control.ScaleLine()];
+            }
+            if (defaults.popupClass == null){
+                defaults.popupClass = OpenLayers.Popup.FramedCloud;
+            }
+            if (defaults.projection == null){
+                defaults.projection = new OpenLayers.Projection('EPSG:4326');
+            }
+            if (defaults.icon_offset == null){
+                defaults.icon_offset = new OpenLayers.Pixel(0, 0);
+            }
+            if (defaults.default_icon == null){
+                defaults.default_icon = new OpenLayers.Icon(
+                    'http://www.openlayers.org/dev/img/marker-green.png',
+                    new OpenLayers.Size(21, 25),
+                    new OpenLayers.Pixel(-(21/2), -25));
+            }
             // not staticaly in default because of STATIC_URL init
             if (defaults.cluster_icon == null && typeof STATIC_URL != 'undefined'){
                 defaults.cluster_icon = new OpenLayers.Icon(
diff --git a/chimere/templates/chimere/blocks/head_chimere.html b/chimere/templates/chimere/blocks/head_chimere.html
index 099a044..dea92ec 100644
--- a/chimere/templates/chimere/blocks/head_chimere.html
+++ b/chimere/templates/chimere/blocks/head_chimere.html
@@ -1,5 +1,5 @@
-{% for css_url in MAP_CSS_URLS %}
-<link rel="stylesheet" href="{{ css_url }}" />{% endfor %}
+{% for css_url, condition in MAP_CSS_URLS %}
+{% if condition %}<!--[if {{condition}}]>{%endif%}<link rel="stylesheet" href="{{ css_url }}" />{% if condition %}<![endif]-->{%endif%}{% endfor %}
 {% for js_url in MAP_JS_URLS %}
 <script src="{{ js_url }}" type="text/javascript"></script>{% endfor %}
 {% if routing %}<script src="{{ STATIC_URL }}chimere/js/routing-widget.js" type="text/javascript"></script>{% endif %}
@@ -13,11 +13,12 @@
 <script src="{{ STATIC_URL }}chimere/js/base.js" type="text/javascript"></script>
 <script type="text/javascript">
     var DEFAULT_ZOOM = {{ DEFAULT_ZOOM }};
+    {% ifequal CHIMERE_VIEW_RENDERER 'openlayers' %}
     var EPSG_DISPLAY_PROJECTION = epsg_display_projection = new OpenLayers.Projection('EPSG:{{ EPSG_DISPLAY_PROJECTION }}');
     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 }};*/
+    {% endifequal %}
     var restricted_extent;
     {% if area_name %}
     var area_name = '{{ area_name }}';{% endif %}
diff --git a/chimere/templates/chimere/blocks/map.html b/chimere/templates/chimere/blocks/map.html
index e00ff8b..6d4508d 100644
--- a/chimere/templates/chimere/blocks/map.html
+++ b/chimere/templates/chimere/blocks/map.html
@@ -36,8 +36,9 @@
     {% if p_routing_end_lon %}chimere_init_options["routing_end_lon"] = {{ p_routing_end_lon }};{% endif %}
     {% if p_routing_end_lat %}chimere_init_options["routing_end_lat"] = {{ p_routing_end_lat }};{% endif %}
     {% if p_routing_steps %}chimere_init_options["routing_steps_lonlat"] = [{{ p_routing_steps }}];{% endif %}
+    {% ifequal map_renderer 'openlayers' %}
     chimere_init_options["icon_offset"] = new OpenLayers.Pixel({{icon_offset_x}},
-                                                            {{icon_offset_y}});
+                                                            {{icon_offset_y}});{% endifequal %}
     chimere_init_options["dynamic_categories"] = {{ dynamic_categories }};
     {% if p_display_submited %}chimere_init_options["display_submited"] = {{ p_display_submited }};{% endif %}
     chimere_init_options["checked_categories"] = [{% for cc in checked_categories %}{% if forloop.counter0 > 0 %}, {% endif %}{{cc}}{% endfor %}];
diff --git a/chimere/templatetags/chimere_tags.py b/chimere/templatetags/chimere_tags.py
index f086251..90252a1 100644
--- a/chimere/templatetags/chimere_tags.py
+++ b/chimere/templatetags/chimere_tags.py
@@ -143,6 +143,7 @@ def head_chimere(context, view=True):
             "DEFAULT_CENTER": settings.CHIMERE_DEFAULT_CENTER,
             "DEFAULT_ZOOM": settings.CHIMERE_DEFAULT_ZOOM,
             "MAP_LAYER": settings.CHIMERE_DEFAULT_MAP_LAYER,
+            "CHIMERE_VIEW_RENDERER": settings.CHIMERE_VIEW_RENDERER,
             "MAP_CSS_URLS": settings.MAP_CSS_URLS[map_renderer],
             "MAP_JS_URLS": settings.MAP_JS_URLS[map_renderer],
             'routing': settings.CHIMERE_ENABLE_ROUTING \
@@ -183,7 +184,8 @@ def routing(context):
 @register.inclusion_tag('chimere/blocks/map.html', takes_context=True)
 def map(context, map_id='map'):
     context_data =  {'map_id':map_id,
-                     "STATIC_URL": settings.STATIC_URL}
+                     "STATIC_URL": settings.STATIC_URL,
+                     "map_renderer":settings.CHIMERE_VIEW_RENDERER}
     context_data['icon_offset_x'] = settings.CHIMERE_ICON_OFFSET_X
     context_data['icon_offset_y'] = settings.CHIMERE_ICON_OFFSET_Y
     context_data['icon_width'] = settings.CHIMERE_ICON_WIDTH