Refactor feature styling

 map.js

@@ -15,7 +15,6 @@
var stop_points_layer = null;

var feature_clicked = null;
var feature_selected = [];
var feature_xhr = null;
var feature_timer = null;

@@ -94,92 +93,102 @@
    return new ol.geom.Point(ol.proj.fromLonLat([object.longitude / 3600000.0, object.latitude / 3600000.0]));
}

function styleVehicle(vehicle, selected) {
    var color_type = 'black';
    if(vehicle.get('vehicle_type')) {
        switch(vehicle.get('vehicle_type').low) {
            case 0:
                color_type = 'orange';
var Style = {
    specialSelection: 2,
    selectedFeatures: [],
	
    getStyleForVehicle: function(vehicleFeature, isSelected) {
        var color_type = 'black';
        if(vehicleFeature.get('vehicle_type')) {
            switch(vehicleFeature.get('vehicle_type').low) {
                case 0:
                    color_type = 'orange';
                break;
                case 1:
                    color_type = 'blue';
                break;
                case 2:
                    color_type = 'green';
                break;
            }
        }
		
        var fill = (isSelected ? '#a00' : '#3399ff');
		
        var image = '<svg xmlns="http://www.w3.org/2000/svg" height="30" width="20"><polygon points="10,0 20,23 0,23" style="fill:'+fill+';stroke:'+color_type+';stroke-width:2" /></svg>';
		
        return new ol.style.Style({
            image: new ol.style.Icon({
                src: 'data:image/svg+xml;base64,' + btoa(image),
                rotation: Math.PI * parseFloat(vehicleFeature.get('heading')) / 180.0,
            }),
            text: new ol.style.Text({
                font: 'bold 10px sans-serif',
                text: vehicleFeature.get('line'),
                fill: new ol.style.Fill({color: 'white'}),
            }),
        });
    },
	
    getStyleForStop: function(stopFeature, isSelected) {
        var fill = 'orange';
        var stroke = 'red';
        var stroke_width = 1;
        var radius = 3;
		
        if(isSelected == this.specialSelection) {
            radius = 5;
        } else if(isSelected) {
            fill = 'red';
            stroke = '#900';
            stroke_width = 2;
            radius = 5;
        }
		
        return new ol.style.Style({
            image: new ol.style.Circle({
                fill: new ol.style.Fill({color: fill}),
                stroke: new ol.style.Stroke({color: stroke, width: stroke_width}),
                radius: radius,
            }),
        });
    },
	
    getStyleForStopPoint: function(stopFeature, isSelected) {
        return this.getStyleForStop(stopFeature, isSelected);
    },
	
    feature: function(feature, isSelected) {
        if(!feature) return;
        if(!feature.getId()) return;
		
        var style = null;
		
        switch(feature.getId().substr(0, 1)) {
            case 'v':
                style = this.getStyleForVehicle(feature, isSelected);
            break;
            case 1:
                color_type = 'blue';
            case 's':
                style = this.getStyleForStop(feature, isSelected);
            break;
            case 2:
                color_type = 'green';
            case 'p':
                style = this.getStyleForStopPoint(feature, isSelected);
            break;
        }
    }
	
    var fill = (selected ? '#a00' : '#3399ff');
	
    var image = '<svg xmlns="http://www.w3.org/2000/svg" height="30" width="20"><polygon points="10,0 20,23 0,23" style="fill:'+fill+';stroke:'+color_type+';stroke-width:2" /></svg>';
	
    return new ol.style.Style({
        image: new ol.style.Icon({
            src: 'data:image/svg+xml;base64,' + btoa(image),
            rotation: Math.PI * parseFloat(vehicle.get('heading')) / 180.0,
        }),
        text: new ol.style.Text({
            font: 'bold 10px sans-serif',
            text: vehicle.get('line'),
            fill: new ol.style.Fill({color: 'white'}),
        }),
    });
}

function styleStop(stop, selected) {
    var fill = 'orange';
    var stroke = 'red';
    var stroke_width = 1;
    var radius = 3;
	
    if(selected == 2) {
        radius = 5;
    } else if(selected) {
        fill = 'red';
        stroke = '#900';
        stroke_width = 2;
        radius = 5;
    }
	
    return new ol.style.Style({
        image: new ol.style.Circle({
            fill: new ol.style.Fill({color: fill}),
            stroke: new ol.style.Stroke({color: stroke, width: stroke_width}),
            radius: radius,
        }),
    });
}

function styleFeature(feature, selected) {
    if(!feature) return;
    if(!feature.getId()) return;
	
    var style = null;
	
    switch(feature.getId().substr(0, 1)) {
        case 'v':
            style = styleVehicle(feature, selected);
        break;
        
        case 's':
        case 'p':
            style = styleStop(feature, selected);
        break;
    }
        feature.setStyle(style);
        if(isSelected) {
            this.selectedFeatures.push(feature);
        }
    },
    
    feature.setStyle(style);
    if(selected) {
        feature_selected.push(feature);
    unstyleSelected: function() {
        for(var i = 0; i < this.selectedFeatures.length; i++) {
            this.feature(this.selectedFeatures[i]);
        }
        this.selectedFeatures = [];
    }
}

function unstyleSelectedFeatures() {
    for(var i = 0; i < feature_selected.length; i++) {
        styleFeature(feature_selected[i]);
    }
    feature_selected = [];
}
};

function updateVehicles() {
    if(vehicles_timer) clearTimeout(vehicles_timer);
@@ -221,7 +230,7 @@
                vehicle_feature = new ol.Feature(vehicle);
                vehicle_feature.setId('v' + vehicle.id);
                
                styleFeature(vehicle_feature);
                Style.feature(vehicle_feature);
                vehicles_source.addFeature(vehicle_feature);
            } else {
                vehicle_feature.setProperties(vehicle);
@@ -249,7 +258,7 @@
        var stop_feature = new ol.Feature(stop);
        
        stop_feature.setId(prefix + stop.id);
        styleFeature(stop_feature);
        Style.feature(stop_feature);
        
        source.addFeature(stop_feature);
    }
@@ -303,15 +312,15 @@
            table.appendChild(tr);
        }
        
        unstyleSelectedFeatures();
        styleFeature(feature_clicked, true);
        Style.unstyleSelected();
        Style.feature(feature_clicked, true);
        
        for(var i = 0, il = data.actual.length; i < il; i++) {
            var tr = document.createElement('tr');
            addCellWithText(tr, data.actual[i].actualTime || data.actual[i].plannedTime);
            addCellWithText(tr, data.actual[i].stop_seq_num + '. ' + data.actual[i].stop.name);
            
            styleFeature(stops_source.getFeatureById('s' + data.actual[i].stop.id), 2);
            Style.feature(stops_source.getFeatureById('s' + data.actual[i].stop.id), 2);
            
            if(data.actual[i].status == 'STOPPING') {
                tr.className = 'success';
@@ -402,7 +411,7 @@
function featureClicked(feature) {
    if(feature && !feature.getId()) return;
    
    unstyleSelectedFeatures();
    Style.unstyleSelected();
    route_source.clear();
    
    if(!feature) {
@@ -490,7 +499,7 @@
    
    div.appendChild(table);
    
    styleFeature(feature, true);
    Style.feature(feature, true);
    
    setTimeout(function () {map.getView().animate({
        center: feature.getGeometry().getCoordinates(),
@@ -505,7 +514,7 @@
            window.location.hash = '';
            
            feature_clicked = null;
            unstyleSelectedFeatures();
            Style.unstyleSelected();
            route_source.clear();
            
            if(feature_xhr) feature_xhr.abort();