put common js stuff into template, make map work across databrowse pages

This commit is contained in:
Sanj 2012-06-03 18:35:28 +05:30
parent 05df67105a
commit 42787bd6f7
6 changed files with 139 additions and 122 deletions

View File

@ -20,7 +20,7 @@ def csvToJSON():
# print a
if routeNo != '':
if atlasDict.has_key(routeNo):
atlasDist[routeNo].append(a)
atlasDict[routeNo].append(a)
else:
atlasDict[routeNo] = [a]
previousRoute = routeNo

View File

@ -55,9 +55,8 @@ class UniqueRouteForm(forms.ModelForm):
def __init__(self,*args, **kwargs):
super(UniqueRouteForm,self).__init__(*args,**kwargs)
self.fields['from_stop'].queryset = Stop.objects.filter(pk__in=[rd.stop.id for rd in RouteDetail.objects.filter(route=self.instance.route).order_by('serial')])
self.fields['to_stop'].queryset = Stop.objects.filter(pk__in=[rd.stop.id for rd in RouteDetail.objects.filter(route=self.instance.route).order_by('serial')])
self.fields['from_stop'].queryset = Stop.objects.filter(routedetail__route=self.instance.route).order_by('routedetail')
self.fields['to_stop'].queryset = Stop.objects.filter(routedetail__route=self.instance.route).order_by('routedetail')
class UniqueRouteAdmin(admin.ModelAdmin):

View File

@ -1,22 +1,10 @@
{% extends 'base.html' %}
{% extends 'databrowse_base.html' %}
{% block title %} Area: {{ area.name }} {% endblock %}
{% block head %}
<style type="text/css">
.has_point {
color: #0f0;
}
.no_point {
color: #f00;
}
a:hover {
color: #00f;
}
</style>
{% block api_url %}
var API_BASE = "/1.0/";
var API_URL = API_BASE + 'area/' + "{{ area.slug }}";
{% endblock %}
{% block body %}

View File

@ -0,0 +1,114 @@
{% 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 %}

View File

@ -1,107 +1,10 @@
{% extends 'base.html' %}
{% extends 'databrowse_base.html' %}
{% block title %} Route {{ route.alias }} {% 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">
var ROUTE_ALIAS = "{{ route.alias }}",
API_BASE = "/1.0/";
$(document).ready(function() {
// initMap();
var url = API_BASE + "route/" + ROUTE_ALIAS;
$.getJSON(url, {'srid': 3857}, function(obj) {
initMap();
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);
});
});
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>
{% block api_url %}
var API_BASE = "/1.0/";
var API_URL = API_BASE + 'route/' + "{{ route.alias }}";
{% endblock %}
{% block body %}

View File

@ -1,4 +1,17 @@
{% extends 'base.html' %}
{% extends 'databrowse_base.html' %}
{% block api_url %}
var API_BASE = "/1.0/";
var API_URL = API_BASE + 'stop/' + "{{ stop.slug }}";
{% endblock %}
{% block geojson_callback %}
jsonLayer.addFeatures(geojson_format.read(obj));
var maxExtent = jsonLayer.getDataExtent();
map.zoomToExtent(maxExtent);
{% endblock %}
{% block body %}
<div id="stopListWrapper" class="listColumn">