114 lines
2.8 KiB
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 %}
|