path: root/chimere/static/chimere/js/jquery.chimere-leaflet.js

/* Copyright (C) 2013  É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.
*/

/*
* Little hasattr helper
*/
(function ($) {
    $.hasattr = function (key, arr) {
        var v = arr[key];
        if (typeof v === "undefined")
            return false;
        else
            return v; };
})( jQuery );

(function ($) {
    /*
    * Chimere leaflet jQuery plugin
    */
        /*
        * Default settings
        */
        var defaults = {
            restricted_extent: false,
            permalink_label: null,
            permalink_div: null,
            permalink: null, // OL Control, could be overrided
            map_layers: null,
            map_layer_names: null,
            selected_map_layer: null,
            dynamic_categories: false,
            display_submited: false,
            display_feature: null,
            display_route: null,
            map_id: null,
            checked_categories: [],
            zoom: null,
            lat: null,
            lon: null,
            simple: false,
            routing_start_lat: null,
            routing_start_lon: null,
            routing_end_lat: null,
            routing_end_lon: null,
            routing_steps_lonlat: null,
            // Provide this function to make a custom click event on the marker
            on_marker_click: null,
            // Provide this function to override the feature detail display
            display_feature_detail_fx: null,
            // Provide this function for overriding the getSubcategories default
            get_subcategories_fx: null,
            hide_popup_fx: null,
            // if leave to false every click on the map hide the pop-up
            explicit_popup_hide: false,
            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: 4326,
            theme: null,
            enable_clustering: false,
            clustering_map: false, // weigth of items are added
            routing: false, // enable routing management
            routing_panel_open: function(){
                                    $('#chimere_itinerary_panel').dialog('open');
                                },
            current_feature: null, // To store the active POI
            current_control: null, // To store the current control
            current_popup: null, // To store the current POI popup displayed
            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: (0, 0),
            edition: false, // edition mode
            edition_type_is_route: false, // route or POI edition
            default_icon: ('http://www.openlayers.org/dev/img/marker-green.png',
                           (21, 25), (-(21/2), -25)),
            cluster_icon: null,
            marker_hover_id:'marker_hover',
            marker_hover_content_id:'marker_hover_content',
            marker_hover_offset: null,
            icon_start: null,
            icon_step: null,
            icon_end: null,
            weight_steps: new Array(10, 50, 100, 500, 1000),
            weight_icon_sizes: new Array(30, 34, 40, 44, 50, 54),
            weight_icon_classes: new Array('marker-cluster-xsmall',
                                           'marker-cluster-small',
                                           'marker-cluster-medium',
                                           'marker-cluster-large',
                                           'marker-cluster-xlarge',
                                           'marker-cluster-xxlarge'
                                            ),
            extra_json_data: null
        };
        var settings = {};
    /*
    * Publics methods
    */
    var methods = {
        /*
        * 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);
            map.addLayer(settings.map_layers[0]);
            var map_layers = {};
            for (idx=0 ; idx < settings.map_layers.length ; idx++){
                map_layers[settings.map_layer_names[idx]] = settings.map_layers[idx];
            }
            var layer_control_options = {};
            if (settings.simple){
                layer_control_options['position'] = 'topleft';
            }
            settings.layer_control = L.control.layers(map_layers, null, layer_control_options).addTo(map);
            if(settings.zoom && settings.lat && settings.lon){
                map.setView([settings.lat, settings.lon], settings.zoom);
            } else {
                map.fitWorld();
            }

            settings.icons = new Object();
            if (settings.clustering_map){
                settings.NumberedDivIcon = L.Icon.extend({
                    options: {
                        iconUrl: STATIC_URL + 'chimere/img/empty.png',
                        number: '',
                        shadowUrl: null,
                        iconSize: new L.Point(40, 40),
                        iconAnchor: new L.Point(20, 20),
                        popupAnchor: new L.Point(0, -20),
                        className: '',
                        numberClassName: settings.weight_icon_classes[0]+'-number',
                    },

                    createIcon: function () {
                        var div = document.createElement('div');
                        var img = this._createImg(this.options['iconUrl']);
                        var numdiv = document.createElement('div');
                        numdiv.setAttribute( "class", this.options['numberClassName']);
                        numdiv.innerHTML = this.options['number'] || '';
                        div.appendChild ( img );
                        div.appendChild ( numdiv );
                        this._setIconStyles(div, 'icon');
                    return div;
                    },
                    createShadow: function () {
                        return null;
                    }
                });

                settings.layerMarkers = new L.MarkerClusterGroup({
                    spiderfyOnMaxZoom: false, showCoverageOnHover: false,
                    maxClusterRadius:50,
                    iconCreateFunction : function (cluster) {
                        var markers = cluster.getAllChildMarkers();
                        var weight = 0;
                        for (idx=0;idx<markers.length;idx++){
                            weight += markers[idx].options.weight;
                        }
                        var idx = settings.weight_steps.length;
                        for (i=0; i < settings.weight_steps.length; i++){
                            if (weight < settings.weight_steps[i]) {
                                idx = i;
                                break;
                            }
                        }
                        return new L.DivIcon({
                                html: '<div><span>' + weight + '</span></div>',
                                className: 'marker-cluster ' + settings.weight_icon_classes[idx],
                                iconSize: new L.Point(settings.weight_icon_sizes[idx],
                                                      settings.weight_icon_sizes[idx])
                                });
                    }
                });
            } else {
                if (settings.enable_clustering){
                    settings.layerClusters = new L.MarkerClusterGroup({
                                                showCoverageOnHover: false});
                }
                settings.layerMarkers = L.geoJson(null, {
                    onEachFeature: function (feature, layer) {
                        if (feature.properties && feature.properties.name) {
                            layer.bindPopup(feature.properties.name);
                        }
                    },
                    pointToLayer: function (feature, latlng) {
                        var marker = null;

                        if (feature.properties.weight){
                            var fill_color = "#ff7800";
                            if (feature.properties.colors){
                                var idx = feature.properties.weight/5;
                                if (idx < feature.properties.colors.length){
                                    fill_color = feature.properties.colors[idx];
                                } else {
                                    fill_color = feature.properties.colors[feature.properties.colors.length-1];
                                }
                            }
                            var geojsonMarkerOptions = {
                                radius: feature.properties.weight*2,
                                fillColor: fill_color,
                                color: "#000",
                                weight: feature.properties.weight/2,
                                opacity: 1,
                                fillOpacity: 0.8
                            };
                            marker = L.circleMarker(latlng, geojsonMarkerOptions);
                        } else {
                            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
                                });
                            }
                            marker = L.marker(latlng,
                                            {icon: settings.icons[icon_path]});
                        }/*
                        if (settings.enable_clustering){
                            settings.layerClusters.addLayer(marker);
                            return settings.layerClusters;
                        } else {*/
                            marker.properties = feature.properties;
                            return marker;
                        //}
                    }
                }).addTo(map);
                map.on('popupopen', function(e) {
                    var marker = e.popup._source;
                    methods.display_feature_detail(marker.properties.pk);
                });
            }
            settings.layerMarkers.addTo(map);
            settings.layerVectors = L.geoJson().addTo(map);

            methods.loadCategories();
            methods.loadGeoObjects();
            if (settings.extra_json_data){
                for (idx=0;idx<settings.extra_json_data.length;idx++){
                    $.ajax({
                        dataType: "json",
                        url: settings.extra_json_data[idx]['url'],
                        context: settings.extra_json_data[idx],
                        success: function(data) {
                            var geojsonLayer = new L.GeoJSON(data,{
                                style:this['style']
                            });
                            settings.layer_control.addOverlay(geojsonLayer,
                                                              this['name']);
                        }
                    });
                }
            }
        },
        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.map_id) uri += settings.map_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.map.removeLayer(settings.layerMarkers);
                        settings.map.removeLayer(settings.layerVectors);
                        settings.layerMarkers.clearLayers();
                        settings.layerVectors.clearLayers();
                        if (settings.enable_clustering && !settings.clustering_map){
                            settings.map.removeLayer(settings.layerClusters);
                            settings.layerClusters.clearLayers();
                        }
                        if (settings.clustering_map){
                            for (var i = 0; i < data.features.length; i++) {
                                var feature = data.features[i];
                                if (feature.geometry.type == 'Point'){
                                    var weight = 1;
                                    if (feature.properties.weight){
                                        weight = feature.properties.weight;
                                    }
                                    var idx = 2;
                                    if (weight < settings.weight_steps[0]) {
                                        idx = 0;
                                    } else if (weight < settings.weight_steps[1]) {
                                        idx = 1;
                                    }
                                    var size = settings.weight_icon_sizes[idx];
                                    var icon = new settings.NumberedDivIcon({
                                        number: weight,
                                        iconSize: new L.Point(size, size),
                                        iconAnchor: new L.Point(size/2, size/2),
                                        popupAnchor: new L.Point(0, -size/2),
                                        iconUrl:STATIC_URL + "chimere/img/" + settings.weight_icon_classes[idx] + ".png",
                                        numberClassName:settings.weight_icon_classes[idx] + "-number"
                                    });
                                    var marker = new L.Marker(
                                        new L.LatLng(
                                            feature.geometry.coordinates[1],
                                            feature.geometry.coordinates[0]),
                                            { title: feature.properties.name,
                                              weight: weight,
                                              icon:icon});
                                    marker.bindPopup(feature.properties.name);
                                    settings.layerMarkers.addLayer(marker);
                                }
                                /*else if (feature.geometry.type == 'LineString') {
                                    methods.addRoute(feature);
                                } else if (feature.geometry.type == 'MultiLineString') {
                                    methods.addMultiLine(feature);
                                }*/
                            }
                        } else {
                            settings.layerMarkers.addData(data);
                        }
                        settings.map.addLayer(settings.layerMarkers);
                        settings.map.addLayer(settings.layerVectors);
                        if (settings.enable_clustering && !settings.clustering_map){
                            settings.map.addLayer(settings.layerClusters);
                        }
                    },
                    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"]);
            }
        },
        display_feature_detail: function (pk) {
            /*
            * update current detail panel with an AJAX request
            */
            var uri = extra_url
            if (settings.map_id) uri += settings.map_id + "/"
            uri += "getDetail/" + pk;
            var params = {}
            if (settings.simple) { params["simple"] = 1; }
            $.ajax({url: uri,
                    data: params,
                    dataType: "html",
                    success: function (data) {
                        if ( settings.display_feature_detail_fx ) {
                            // Custom function ?
                            settings.display_feature_detail_fx(data, settings);
                        }
                        else {
                            if (settings.popupContentFull || settings.simple) {
                                settings.map._popup.options.maxWidth = 550;
                                settings.map._popup.setContent("<div class='cloud'>" + data + "</div>");
                                settings.map._popup.update();
                            }
                            else {
                                $('#detail').html(data).show();
                            }
                        }
                    }
                   });
        },
    }; // 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) {
        // Method calling logic
        if ( methods[thing] ) {
            return methods[ thing ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        }
        else if ( typeof thing === 'object' || ! thing ) {
            return methods.init.apply( this, arguments );
        }
        else if ( thing === 'settings' ) {
            // Use $("#mydiv").chimere("settings", "key", "value") to change settings
            // from outside the plugin
            if (arguments.length == 3) {
                settings[arguments[1]] = arguments[2];
            }
            else if (arguments.length == 2) {
                return settings[arguments[1]];
            }
            else { // Use $("#mydiv").chimere("settings") to know the current settings
                return settings;
            }
        }
        else {
            $.error( 'Method ' +  thing + ' does not exist on jQuery.chimere' );
        }
        return this;
    };
})( jQuery );