lets put a map in there
This commit is contained in:
Sanj
parent
7829f6828b
commit
06f75c9f0b
|
|
@ -1,110 +1,160 @@
|
|||
var API_BASE = "/1.0/"
|
||||
$(function() {
|
||||
$('.tabButton').click(function() {
|
||||
if ($(this).hasClass("selected")) {
|
||||
return;
|
||||
}
|
||||
var $that = $(this);
|
||||
var name = $that.attr("data-name");
|
||||
var $listWrapper = $('#' + name);
|
||||
if ($that.data("loaded")) {
|
||||
$.noop(); //dont load data
|
||||
} else {
|
||||
$that.data("loaded", true);
|
||||
var $list = $('#' + name + 'List');
|
||||
var url = API_BASE + name + "/";
|
||||
var $loadingLi = $('<div />').text("Loading...").appendTo($list);
|
||||
$.getJSON(url, {}, function(items) {
|
||||
$loadingLi.remove();
|
||||
$.each(items, function(i,v) {
|
||||
var $li = $('<div />')
|
||||
.addClass("listItem")
|
||||
.appendTo($list);
|
||||
var $txt = $('<span >').addClass("listItemText").text(v).appendTo($li);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
$('.listWrapper').hide();
|
||||
$listWrapper.show();
|
||||
$('.selected').removeClass("selected");
|
||||
$that.addClass("selected");
|
||||
});
|
||||
|
||||
$('.list').click(function(e) {
|
||||
var name = $(this).attr("id").replace("sList", ""); //FIXME: stick name in a data attr or so?
|
||||
var $target = $(e.target).parent();
|
||||
if (!$target.hasClass('listItem')) {
|
||||
return;
|
||||
}
|
||||
if ($target.data("loading")) {
|
||||
return;
|
||||
}
|
||||
$('.selectedListItem').removeClass("selectedListItem");
|
||||
$target.addClass("selectedListItem");
|
||||
if ($target.data("hasList")) {
|
||||
$target.find(".stopsList").toggle();
|
||||
return;
|
||||
}
|
||||
var url = API_BASE + name + "/" + $target.find(".listItemText").text();
|
||||
$target.data("loading", true);
|
||||
var $loading = $('<span />').addClass("loadingSpan").text("Loading...").appendTo($target);
|
||||
$.getJSON(url, {}, function(obj) {
|
||||
$loading.remove();
|
||||
var stopsGeojson = obj.stops; //TODO: render filtered geojson with known geometries on map
|
||||
var stops = stopsGeojson.features;
|
||||
var $stopsList = getStopsList(stops);
|
||||
$target.append($stopsList);
|
||||
$target.data("hasList", true);
|
||||
$target.data("loading", false);
|
||||
});
|
||||
});
|
||||
|
||||
$('.listSearch').keyup(function(e) {
|
||||
var val = $(this).val();
|
||||
var name = $(this).attr("id").replace("Search", "");
|
||||
var $list = $('#' + name + "List");
|
||||
$list.find(".listItem").each(function() {
|
||||
var $that = $(this);
|
||||
var txt = $that.find(".listItemText").text();
|
||||
if (txt.indexOf(val) == -1) {
|
||||
$that.hide();
|
||||
} else {
|
||||
$that.show();
|
||||
var API_BASE = "/1.0/",
|
||||
map;
|
||||
(function() {
|
||||
$(function() {
|
||||
initMap();
|
||||
$('.tabButton').click(function() {
|
||||
if ($(this).hasClass("selected")) {
|
||||
return;
|
||||
}
|
||||
var $that = $(this);
|
||||
var name = $that.attr("data-name");
|
||||
var $listWrapper = $('#' + name);
|
||||
if ($that.data("loaded")) {
|
||||
$.noop(); //dont load data
|
||||
} else {
|
||||
$that.data("loaded", true);
|
||||
var $list = $('#' + name + 'List');
|
||||
var url = API_BASE + name + "/";
|
||||
var $loadingLi = $('<div />').text("Loading...").appendTo($list);
|
||||
$.getJSON(url, {}, function(items) {
|
||||
$loadingLi.remove();
|
||||
$.each(items, function(i,v) {
|
||||
var $li = $('<div />')
|
||||
.addClass("listItem")
|
||||
.appendTo($list);
|
||||
var $txt = $('<span >').addClass("listItemText").text(v).appendTo($li);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
$('.listWrapper').hide();
|
||||
$listWrapper.show();
|
||||
$('.selected').removeClass("selected");
|
||||
$that.addClass("selected");
|
||||
});
|
||||
|
||||
$('.list').click(function(e) {
|
||||
var name = $(this).attr("id").replace("sList", ""); //FIXME: stick name in a data attr or so?
|
||||
var $target = $(e.target).parent();
|
||||
if (!$target.hasClass('listItem')) {
|
||||
return;
|
||||
}
|
||||
if ($target.data("loading")) {
|
||||
return;
|
||||
}
|
||||
$('.selectedListItem').removeClass("selectedListItem");
|
||||
$target.addClass("selectedListItem");
|
||||
if ($target.data("hasList")) {
|
||||
$target.find(".stopsList").toggle();
|
||||
return;
|
||||
}
|
||||
var url = API_BASE + name + "/" + $target.find(".listItemText").text();
|
||||
$target.data("loading", true);
|
||||
var $loading = $('<span />').addClass("loadingSpan").text("Loading...").appendTo($target);
|
||||
$.getJSON(url, {}, function(obj) {
|
||||
$loading.remove();
|
||||
var stopsGeojson = obj.stops;
|
||||
var stops = stopsGeojson.features;
|
||||
var $stopsList = getStopsList(stops);
|
||||
var stopsWithGeom = [];
|
||||
$.each(stopsGeojson.stops, function(i,v) {
|
||||
if (!$.isEmptyObject(v.geometry)) {
|
||||
stopsWithGeom.push(v);
|
||||
}
|
||||
});
|
||||
stopsGeojson.stops = stopsWithGeom;
|
||||
var currFeatures = jsonLayer.features;
|
||||
jsonLayer.removeFeatures(currFeatures);
|
||||
jsonLayer.addFeatures(geojson_format.read(stopsGeojson));
|
||||
var maxExtent = jsonLayer.getDataExtent();
|
||||
map.zoomToExtent(maxExtent);
|
||||
$target.append($stopsList);
|
||||
$target.data("hasList", true);
|
||||
$target.data("loading", false);
|
||||
});
|
||||
});
|
||||
|
||||
$('.listSearch').keyup(function(e) {
|
||||
var val = $(this).val();
|
||||
var name = $(this).attr("id").replace("Search", "");
|
||||
var $list = $('#' + name + "List");
|
||||
$list.find(".listItem").each(function() {
|
||||
var $that = $(this);
|
||||
var txt = $that.find(".listItemText").text();
|
||||
if (txt.indexOf(val) == -1) {
|
||||
$that.hide();
|
||||
} else {
|
||||
$that.show();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
function getStopsList(stops) {
|
||||
var $ul = $('<ul />').addClass("stopsList").click(function(e) {
|
||||
var $target = $(e.target);
|
||||
if ($target.hasClass("selectedStop")) {
|
||||
return;
|
||||
}
|
||||
$('.selectedStop').removeClass("selectedStop");
|
||||
$target.addClass("selectedStop");
|
||||
var props = $target.data("properties");
|
||||
var $form = getStopForm(props);
|
||||
$('#formCol').empty();
|
||||
$('#formCol').append($form);
|
||||
});
|
||||
$.each(stops, function(i,v) {
|
||||
var props = v.properties;
|
||||
var geom = v.geometry;
|
||||
var $li = $('<li />').addClass("stopItem").data("slug", props.slug).data("properties", props).data("geometry", geom).text(props.display_name).appendTo($ul);
|
||||
$.isEmptyObject(geom) ? $li.addClass("no_has_point") : $li.addClass("has_point");
|
||||
});
|
||||
return $ul;
|
||||
}
|
||||
|
||||
function getStopsList(stops) {
|
||||
var $ul = $('<ul />').addClass("stopsList").click(function(e) {
|
||||
var $target = $(e.target);
|
||||
if ($target.hasClass("selectedStop")) {
|
||||
return;
|
||||
}
|
||||
$('.selectedStop').removeClass("selectedStop");
|
||||
$target.addClass("selectedStop");
|
||||
var props = $target.data("properties");
|
||||
var $form = getStopForm(props);
|
||||
$('#formCol').empty();
|
||||
$('#formCol').append($form);
|
||||
});
|
||||
$.each(stops, function(i,v) {
|
||||
var props = v.properties;
|
||||
var geom = v.geometry;
|
||||
var $li = $('<li />').addClass("stopItem").data("slug", props.slug).data("properties", props).data("geometry", geom).text(props.display_name).appendTo($ul);
|
||||
$.isEmptyObject(geom) ? $li.addClass("no_has_point") : $li.addClass("has_point");
|
||||
});
|
||||
return $ul;
|
||||
}
|
||||
function getStopForm(stop) {
|
||||
// console.log(stop);
|
||||
var $div = $('<div />');
|
||||
var $displayName = $('<div />').text(stop.display_name).appendTo($div);
|
||||
var $routes = $('<div />').text("Routes: " + stop.routes).appendTo($div);
|
||||
// var $form = $('<form />').apendTo($div);
|
||||
return $div;
|
||||
}
|
||||
|
||||
function getStopForm(stop) {
|
||||
// console.log(stop);
|
||||
var $div = $('<div />');
|
||||
var $displayName = $('<div />').text(stop.display_name).appendTo($div);
|
||||
var $routes = $('<div />').text("Routes: " + stop.routes).appendTo($div);
|
||||
// var $form = $('<form />').apendTo($div);
|
||||
return $div;
|
||||
}
|
||||
function initMap() {
|
||||
var center = new OpenLayers.LonLat(72.855211097628413, 19.010775291486027);
|
||||
map = new OpenLayers.Map("mapCol", {});
|
||||
var layers = [];
|
||||
layers[0] = new OpenLayers.Layer.Google(
|
||||
"Google Streets", // the default
|
||||
{numZoomLevels: 20, isBaseLayer: true}
|
||||
);
|
||||
geojson_format = new OpenLayers.Format.GeoJSON();
|
||||
//yes, jsonLayer is global. Yes, I know it's wrong.
|
||||
jsonLayer = layers[1] = new OpenLayers.Layer.Vector({'geometryType': 'Point'});
|
||||
// map.addLayer(vector_layer);
|
||||
map.addLayers(layers);
|
||||
map.setCenter(center, 12);
|
||||
|
||||
mapControl = new OpenLayers.Control.SelectFeature(layers[1]);
|
||||
zoomControl = new OpenLayers.Control.ZoomToMaxExtent();
|
||||
map.addControl(mapControl);
|
||||
// map.addControl(zoomControl);
|
||||
mapControl.activate();
|
||||
// zoomControl.activate();
|
||||
layers[1].events.on({
|
||||
'featureselected': onFeatureSelect,
|
||||
'featureunselected': onFeatureUnselect
|
||||
});
|
||||
}
|
||||
|
||||
function onFeatureSelect(feature) {
|
||||
console.log("selected", feature);
|
||||
}
|
||||
|
||||
function onFeatureUnselect(feature) {
|
||||
console.log("unselected", feature);
|
||||
}
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
{% block head %}
|
||||
<link rel="stylesheet" href="/static/css/editstops.css" />
|
||||
<script type="text/javascript" src="/static/js/editstops.js"></script>
|
||||
<script type="text/javascript" src="http://openlayers.org/dev/OpenLayers.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user