rollerverbrauch/app/static/js/fillingstations.js

// initially display germany
var lat = 50.75653081787912,
    lon = 9.262980794432847,
    zoom = 5;

var map;

var filling_stations = {};
var filling_station_markers;

query_location = function(updater) {
    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            lat = position.coords.latitude;
            lon = position.coords.longitude;
            zoom = 11;
            if(updater){
                updater(lat, lon);
            }
        });
    }
}

update_map = function() {
    var lonLat = new OpenLayers.LonLat( lon, lat )
        .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
        );
    map.setCenter (lonLat, zoom);
}

load_filling_stations = function() {
    var url = '/filling_stations?latitude=' + lat + '&longitude='+ lon + '&type=all&radius=5&sort=dist';
    $.ajax({
        type: 'GET',
        url: url,
        success: function(data) {
            data.stations.forEach(function(station) {
                if (!(station.id in filling_stations)) {
                    filling_stations[station.id] = station;
                    filling_stations[station.id].marker = false;
                }
            });
            update_filling_station_markers();
        }
    });
}

clicked_on_filling_station_marker = function(station, marker) {
    return function(data) {
        $.ajax({
            type: 'GET',
            url: '/filling_stations/favourites/toggle/'+station.id,
            dataType: 'json',
            timeout: 1000,
            success: function(data) {
                if (data.state == 'favourite') {
                    marker.setUrl('/static/img/filling_station_favourite_marker.png');
                } else {
                    marker.setUrl('/static/img/filling_station_marker.png');
                }
            },
            contentType : 'application/json'
        });
    }
}

display_station_information = function(station) {
    return function(event) {
        var info = $('#station_info');
        info.empty();
        info.addClass('filling_station_info');

        var cell1 = $('<div>', {'class':'col-md-8'})
        var cell2 = $('<div>', {'class':'col-md-4'})

        var img = $('<img>', {'src': '/static/logos/'+station.brand.toLowerCase()+'.png'});
        // hide if the brand icon loads with error
        img.error(function(){
            $(this).hide();
        });

        var name = $('<div>').text(station.name);

        var street_number = $('<div>').text(station.street + ' ' + station.houseNumber);

        var postcode_place = $('<div>').text(station.postCode + ' ' + station.place);

        info.append(cell1
                .append(name)
                .append(street_number)
                .append(postcode_place))
            .append(cell2
                .append(img));

        cell2.height(cell1.height());
    };
}

update_filling_station_markers = function() {
    for(id in filling_stations) {
        var station = filling_stations[id];
        if(!station.marker) {
            var lonLat = new OpenLayers.LonLat(station.lng, station.lat)
                            .transform(new OpenLayers.Projection('EPSG:4326'), map.getProjectionObject());
            if (station.state == 'favourite') {
                var icon = new OpenLayers.Icon('/static/img/filling_station_favourite_marker.png');
            } else {
                var icon = new OpenLayers.Icon('/static/img/filling_station_marker.png');
            }
			var marker = new OpenLayers.Marker(lonLat, icon);
			marker.events.register('click', marker, clicked_on_filling_station_marker(station, marker));
			marker.events.register('mouseover', null, display_station_information(station));
			filling_station_markers.addMarker(marker);
            station.marker = true;
        }
    }
}

activate_map = function(map_div_id, button_ids, home_lat, home_long, home_zoom, init_stations) {

    // resize to reasonable height
    $('#' + map_div_id).css('height',0.75*($('#' + map_div_id).css('width')));

    // init map
    map = new OpenLayers.Map(map_div_id);
    map.addLayer(new OpenLayers.Layer.OSM());
    map.events.register('moveend', null, function(e){
        var p = e.object.center.clone();
        var p = p.transform(map.getProjectionObject(), 'EPSG:4326');
        lon = p.lon;
        lat = p.lat;
        zoom = e.object.zoom;
    });
    filling_station_markers = new OpenLayers.Layer.Markers('Filling Stations');
    map.addLayer(filling_station_markers);

    // handle initial / favourite stations
    filling_stations = init_stations;
    update_filling_station_markers();

    update_map();
    if ((home_lat == 0) && (home_long == 0)) {
        query_location(update_map);
    } else  {
        lat = home_lat;
        lon = home_long;
        zoom = home_zoom;
        update_map();
    }

    // get button
    $('#'+button_ids[0]).click(function(e){
        load_filling_stations();
    });
    // set home button
    $('#'+button_ids[1]).click(function(e){
        $.ajax({
            type: 'POST',
            url: '/account/home',
            data: JSON.stringify({'long': lon, 'lat': lat, 'zoom': zoom}),
            dataType: 'json',
            timeout: 1000,
            contentType : 'application/json'
        });
    });
    // go home button
    $('#'+button_ids[2]).click(function(e){
        $.ajax({
            type: 'GET',
            url: '/account/home',
            dataType: 'json',
            timeout: 1000,
            success: function(data) {
                lat = data.lat;
                lon = data.long;
                zoom = data.zoom;
                update_map();
            },
            contentType : 'application/json'
        });
    });
}