path: root/ishtar_common/static/js/ishtar-map.js

/* default variables */

var default_pointer = "/media/images/default-pointer.png";
var marker_cluster = "/media/images/marker-cluster.png";

var view_projection = 'EPSG:3857';
var animation_duration = 250;

var cluster_threshold_1 = 8;
var cluster_threshold_2 = 25;

var base_color_R = 111;
var base_color_V = 66;
var base_color_B = 193;
var base_color_rvb;

var map_default_center = 'SRID=4326;POINT (2.4397 46.5528)';
var map_default_zoom = '7';
var min_auto_zoom_on_cluster = 13;

/* base layers */

var source_osm = function(options){
    return new ol.layer.Tile({
        source: new ol.source.OSM()
    });
};

var default_map_layers = {
    'osm': source_osm
};

var get_layers = function(layers){
    if (!layers){
        layers = [{'type': 'osm', 'options': null}];
    }
    var ol_layers = [];
    for (idx in layers){
        var layer_attr = layers[idx];
        ol_layers.push(
            default_map_layers[layer_attr['type']](layer_attr['options'])
        );
    }
    return ol_layers;
};

/* styles */
var get_icon_style = function(feature){
    return new ol.style.Style({
        image: new ol.style.Icon({
            anchor: [17, 50],
            anchorXUnits: 'pixels',
            anchorYUnits: 'pixels',
            size: [35, 50],
            src: static_path + default_pointer
        })
    });
};

var get_vector_style = function(feature){
    return new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'rgba(' + base_color_rvb + ', 1)',
            width: 2
        }),
        fill: new ol.style.Fill({
            color: 'rgba(' + base_color_rvb + ', 0.2)'
        })
    });
};

var cluster_get_style = function(feature, resolution){
    feature.set('key', 'cluster');
    var cluster_features = feature.get('features');

    var size = cluster_features.length;
    feature.set('size', size);

    var style = _styleCache[size];

    if (!style && size == 1){
        style = _styleCache[size] = [get_icon_style()];
    } else if (!style && size > 1){
        var color = size > cluster_threshold_2 ? "192,0,0" : size > cluster_threshold_1 ? "255,128,0" : "0,128,0";
        var radius = Math.max(8, Math.min(size * 0.75, 20));
        var lbl = size.toString();
        style = _styleCache[size] = [
            new ol.style.Style({
                image: new ol.style.Circle({
                    radius: radius,
                    stroke: new ol.style.Stroke({
                        color:"rgba("+color+",0.5)",
                        width: 15
                    }),
                    fill: new ol.style.Fill({
                        color:"rgba("+color+",1)"
                    })
                }),
                text: new ol.style.Text({
                    text: lbl,
                    fill: new ol.style.Fill({
                        color: '#fff'
                    })
                })
            })
        ];
    }
    return style;
}

/* clustering */

var _styleCache;
var cluster_source = {};
var cluster_layer = {};

var enable_clustering = function(map_id){
    // cache for styles
    _styleCache = {};

    // cluster Source
    cluster_source[map_id] = new ol.source.Cluster({
        distance: 40,
        source: new ol.source.Vector()
    });
    // animated cluster layer
    cluster_layer[map_id] = new ol.layer.Vector({
        name: 'Cluster',
        source: cluster_source[map_id],
        // cluster style
        style: cluster_get_style
    });
    map[map_id].addLayer(cluster_layer[map_id]);
};

var reinit_clustering = function(map_id){
    cluster_source[map_id].getSource().clear();
    _styleCache = {};
};

/* manage clicks */

var current_feature;
var animate_in_progress = false;

var animate_end = function(){animate_in_progress = false};

var wait_animation_end = function(callback, retry){
    if (!retry) retry = 1;
    setTimeout(function(){
        retry += 1
        if (retry < 5 && animate_in_progress){
            wait_animation_end(callback)
        } else {
            callback();
        }
    }, 100);
};

var manage_click_on_map = function(map_id){
    return function(e) {
        var feature = map[map_id].forEachFeatureAtPixel(
            e.pixel,
            function(feature, layer) {
                return feature;
            }
        );
        click_on_feature(map_id, feature, e);
    };
};

var current_event;

var click_on_feature = function(map_id, feature, e){
    // console.log("click_on_feature");
    current_event = e;

    if (!$(e.target).is($(popup_item[map_id]))
        && !$.contains($(popup_item[map_id])[0], e.target) ) {
        $(popup_item[map_id]).hide();
    }

    if (typeof feature == 'undefined'){
        current_feature = null;
        return;
    }
    current_feature = feature;
    if (!feature) return;

    var timeout = 10;
    setTimeout(function(){
        // zoom on aggregated
        var key = feature.get('key');
        if (feature.get('name') || feature.get('key')){
            feature = click_on_cluster(map_id, feature);
        }
    }, timeout);
};

var auto_zoom = false;

var click_on_cluster = function(map_id, feature, zoom_level, duration, nb_zoom,
                                current_nb_items){
    // console.log("click_on_cluster");
    if (!duration){
        // zoom animation must be slower
        duration = animation_duration * 2;
    }

    if (!nb_zoom) nb_zoom = 0;

    var props = feature.getProperties();
    if (!'features' in props) return feature;

    if (!auto_zoom || props['features'].length == 1){
        return display_cluster_detail(map_id, feature);
    }

    if (!current_nb_items){
        current_nb_items = props['features'].length;
    } else if(current_nb_items != props['features'].length) {
        // stop zooming there less item in the cluster
        return feature;
    }

    var v = map[map_id].getView();
    if (!zoom_level) zoom_level = v.getZoom() + 1;

    // center
    var new_center = feature.getGeometry().getCoordinates();
    // max zoom reached
    if (zoom_level >= min_auto_zoom_on_cluster){
        animate_in_progress = true;
        v.animate({center: new_center, duration: duration}, animate_end);
        return display_cluster_detail(map_id, feature);
    }

    // zoom
    animate_in_progress = true;
    v.animate({center: new_center, zoom: zoom_level, duration: duration},
              animate_end);

    nb_zoom += 1;
    // something wrong stop zoom!
    if (nb_zoom > v.getMaxZoom()) return feature;

    // wait for the animation to finish before rezoom
    return setTimeout(
        function(){
            // our cluster must be at the center (if it exists after zoom)
            var pixel = map[map_id].getPixelFromCoordinate(v.getCenter());
            var new_feature;
            map.forEachFeatureAtPixel(
                pixel, function(feat, layer){
                    if (layer == cluster_layer[map_id]){
                        new_feature = feat;
                        return true
                    }
                }
            );
            if (new_feature){
                if (zoom_level < min_auto_zoom_on_cluster){
                    return display_cluster_detail(map_id, new_feature);
                }
                return click_on_cluster(
                    map_id, new_feature, zoom_level + 1, duration, nb_zoom,
                    current_nb_items);
            }
            // no more cluster feature here or min auto zoom reach: stop zooming
            return feature;
        }, duration + 200);
};

/* display info */

var display_cluster_detail = function(map_id, cluster){
    // console.log("display_cluster_detail");
    var features = cluster.getProperties()['features']

    var offset_x = 0;
    var offset_y = -21;
    if (!features){
        features = [cluster];
        offset_y = -7;
    } else if (features.length == 1){
        offset_y = -54;
    }
    display_items(map_id, features, offset_x, offset_y);
};

var display_items = function(map_id, features, offset_x, offset_y){
    wait_animation_end(function() {_display_items(map_id, features, offset_x, offset_y)});
};

var open_map_window = function(map_id){
    return function(){
        $('#ishtar-map-window-' + map_id).show();
    };
};

var complete_list_label = "complete list...";

var _display_items = function(map_id, features, offset_x, offset_y){
    // console.log("display_items");
    var feature = features[0];
    var geom = feature.getGeometry();
    var ul_class = "map-list-" + map_id;
    var popup_content = "<ul class='" + ul_class + "'>";
    var window_content = "<ul>";
    var has_extra = false;
    for (idx_feat in features){
        if (idx_feat == 5){
            popup_content += "<li class='text-center'><a href='#' class='map-list-detail'>";
            popup_content += complete_list_label;
            popup_content += "</a></li>";
        }
        var feat = features[idx_feat];
        var properties = feat.getProperties();
        var link = link_template[map_id].replace("<pk>", properties["id"]);
        var txt = "<li>" + link + " " + properties['name'] + "</li>";
        window_content += txt;
        if (idx_feat < 5){
            popup_content += txt;
        }
    }
    popup_content += "</ul>";
    window_content += "</ul>";
    $("#ishtar-map-window-" + map_id + " .modal-body").html(window_content);
    $(popup_item[map_id]).html(popup_content);
    $("." + ul_class + " .map-list-detail").click(open_map_window(map_id));

    if (geom.getType() == "Point"){
        popup[map_id].setPosition(geom.getCoordinates());
    } else {
        popup[map_id].setPosition(current_event.coordinate);
    }
    popup[map_id].setOffset([offset_x, offset_y]);
    $(popup_item[map_id]).css({opacity: 0});
    $(popup_item[map_id]).show(0, function(){
        setTimeout(function(){
            popup[map_id].setOffset([offset_x, offset_y]);
            $(popup_item[map_id]).css({opacity: 1});
        }, 200);
    });
};

/* hover */

var manage_hover = function(map_id){
    return function(e) {
        var pixel = map[map_id].getEventPixel(e.originalEvent);
        var feature = map[map_id].forEachFeatureAtPixel(
            e.pixel,
            function(feature, layer) {
                return feature;
            }
        );
        var hit = map[map_id].hasFeatureAtPixel(pixel);
        var target = map[map_id].getTarget();
        target = typeof target === "string" ?
            document.getElementById(target) : target;
        target.style.cursor = hit ? 'pointer' : '';
    }
};

/* popup */

var popup = {};
var popup_item = {};

var init_popup = function(map_id){
    popup_item[map_id] = document.getElementById("ishtar-map-popup-" + map_id);
    var popup_options = {
        element: popup_item[map_id],
        positioning: 'bottom-center'
    }
    popup[map_id] = new ol.Overlay(popup_options);
    map[map_id].addOverlay(popup[map_id]);
};


/* display map */

var center;
var point_features = {};
var map = {};
var map_view = {};
var map_layers = {};
var proj_options = {
    dataProjection:'EPSG:4326', featureProjection: view_projection
}
var geojson_format = new ol.format.GeoJSON(proj_options);
var wkt_format = new ol.format.WKT(proj_options);
var link_template = {};
var vector_source = {};
var vector_layer = {};
var vector_features = {};

var initialize_base_map = function(map_id, layers){
    center = wkt_format.readGeometry(map_default_center).getCoordinates();

    map_layers[map_id] = get_layers(layers);

    map_view[map_id] = new ol.View({
        projection: view_projection,
        center: ol.proj.fromLonLat([center[0], center[1]]),
        zoom: map_default_zoom
    });

    map[map_id] = new ol.Map({
        target: map_id,
        layers: map_layers[map_id],
        view: map_view[map_id]
    });

}

var redraw_map = function(map_id, layers){
    map[map_id].setTarget(null);
    map[map_id] = null;
    initialize_base_map(map_id, layers);
    reinit_clustering(map_id);
    current_feature = null;
};


var display_map = function(map_id, points, lines_and_polys, layers){

    base_color_rvb = base_color_R + ', ' + base_color_V + ', ' + base_color_B;

    if (points){
        link_template[map_id] = points['link_template'];
    } else {
        link_template[map_id] = lines_and_polys['link_template'];
    }
    if (map[map_id]){
        redraw_map(map_id, layers);
    } else {
        initialize_base_map(map_id, layers);
    }
    display_points(map_id, points);
    display_lines_and_polys(map_id, lines_and_polys);

    init_popup(map_id);

    map[map_id].on('click', manage_click_on_map(map_id));
    map[map_id].on('pointermove', manage_hover(map_id));
};

var display_points = function(map_id, points){
    if (!points) return;
    point_features[map_id] = geojson_format.readFeatures(points);
    enable_clustering(map_id);
    cluster_source[map_id].getSource().addFeatures(point_features[map_id]);
    if (points.features.length){
        map_view[map_id].fit(cluster_source[map_id].getSource().getExtent());
        if (map_view[map_id].getZoom() > 12){
            map_view[map_id].setZoom(12);
        }
    }
};

var display_lines_and_polys = function(map_id, lines_and_polys){
    if (!lines_and_polys) return;
    vector_features[map_id] = geojson_format.readFeatures(lines_and_polys);
    vector_source[map_id] = new ol.source.Vector();
    vector_source[map_id].addFeatures(vector_features[map_id]);
    vector_layer[map_id] = new ol.layer.Vector({
        source: vector_source[map_id],
        style: get_vector_style
    });

    map[map_id].addLayer(vector_layer[map_id]);
    if (lines_and_polys.features.length){
        map_view[map_id].fit(vector_source[map_id].getExtent());
        if (map_view[map_id].getZoom() > 12){
            map_view[map_id].setZoom(12);
        }
    }
};