chaloBEST/chaloBEST/templates/databrowse_base.html

114 lines
2.8 KiB
HTML

{% extends 'base.html' %}
{% block title %} {% endblock %}
{% block head %}
<style type="text/css">
.has_point {
color: #0f0;
}
.no_point {
color: #f00;
}
a:hover {
color: #00f;
}
#map {
float: left;
width: 600px;
height: 400px;
}
</style>
<script type="text/javascript">
{% block api_url %}
var API_BASE = "/1.0/";
var API_URL = API_BASE + 'route/' + "{{ route.alias }}";
{% endblock %}
$(document).ready(function() {
// initMap();
var url = API_URL;
$.getJSON(url, {'srid': 3857}, function(obj) {
initMap();
{% block geojson_callback %}
var stopsGeoJSON = obj.stops;
var stops = stopsGeoJSON.features;
var stopsWithGeom = [];
$.each(stops, function(i,v) {
if (!$.isEmptyObject(v.geometry)) {
stopsWithGeom.push(v);
}
});
stopsGeoJSON.features = stopsWithGeom;
//console.log(jsonLayer);
jsonLayer.addFeatures(geojson_format.read(stopsGeoJSON));
var maxExtent = jsonLayer.getDataExtent();
map.zoomToExtent(maxExtent);
{% endblock %}
});
});
function initMap() {
var center = new OpenLayers.LonLat(8110203.9998955, 2170000.4068373);
map = new OpenLayers.Map("map", {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
});
var layers = [];
// layers[0] = new OpenLayers.Layer.OSM();
layers[0] = new OpenLayers.Layer.OSM();
layers[1] = new OpenLayers.Layer.Bing({
name: "Bing Aerial",
type: "Aerial",
key: "AqGpO7N9ioFw3YHoPV3C8crGfJqW5YST4gGKgIOnijrUbitLlgcAS2A0M9SJrUv9",
});
geojson_format = new OpenLayers.Format.GeoJSON();
//
//yes, jsonLayer is global. Yes, I know it's wrong.
jsonLayer = layers[2] = new OpenLayers.Layer.Vector("Bus Stops");
map.addLayers(layers);
jsonLayer.events.on({
'featureselected': onFeatureSelect,
'featureunselected': onFeatureUnselect
});
// Feature selection control
mapControl = new OpenLayers.Control.SelectFeature(jsonLayer, {
clickout: false,
toggle: true
});
//map.addControl(new OpenLayers.Control.ZoomPanel());
map.addControl(mapControl);
mapControl.activate();
// Add a LayerSwitcher since we now have Bing
map.addControl(new OpenLayers.Control.LayerSwitcher());
// Add a permalink that opens the relevant view in OSM.org in a different window
var permalink = new OpenLayers.Control.Permalink({base: "http://www.openstreetmap.org/"});
map.addControl(permalink);
}
function onFeatureSelect(obj) {
window.location = obj.feature.attributes.url;
}
function onFeatureUnselect(obj) {
$.noop();
}
</script>
{% endblock %}
{% block body %}
{% endblock %}