CAMP/chaloBEST
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

highlight stop name when you hover over location on map

Browse Source
This commit is contained in:
Sanj 2012-02-21 15:27:41 +05:30
parent 5dfad354ff
commit c918ef2cfc
2 changed files with 40 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
chaloBEST/static/css/editstops.css
View File

@ -73,3 +73,8 @@ ul {
list-style-type: none; list-style-type: none;
padding-left: 4px; padding-left: 4px;
} }
.highlightedStop {
background-color: #FFFF00;
}

29
chaloBEST/static/js/editstops.js
View File

@ -93,7 +93,9 @@ var API_BASE = "/1.0/",
}); });
function getStopsList(stops) { function getStopsList(stops) {
var $ul = $('<ul />').addClass("stopsList").click(function(e) { var $ul = $('<ul />')
.addClass("stopsList")
.click(function(e) {
var $target = $(e.target); var $target = $(e.target);
if ($target.hasClass("selectedStop")) { if ($target.hasClass("selectedStop")) {
return; return;
@ -105,10 +107,22 @@ var API_BASE = "/1.0/",
$('#formCol').empty(); $('#formCol').empty();
$('#formCol').append($form); $('#formCol').append($form);
}); });
$.each(stops, function(i,v) { $.each(stops, function(i,v) {
var props = v.properties; var props = v.properties;
var geom = v.geometry; 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); var $li = $('<li />')
.addClass("stopItem")
.data("slug", props.slug)
.addClass(props.slug) //FIXME: please dont set data AND addClass AND include slug in properties.
.data("properties", props).data("geometry", geom)
.text(props.display_name)
.hover(function() {
//TODO: when hover over a stop name in list, it should set some styleMap stuff on the map to colour the moused-over location.
}, function() {
});
.appendTo($ul);
$.isEmptyObject(geom) ? $li.addClass("no_has_point") : $li.addClass("has_point"); $.isEmptyObject(geom) ? $li.addClass("no_has_point") : $li.addClass("has_point");
}); });
return $ul; return $ul;
@ -141,7 +155,7 @@ var API_BASE = "/1.0/",
map.addLayers(layers); map.addLayers(layers);
map.setCenter(center, 12); map.setCenter(center, 12);
mapControl = new OpenLayers.Control.SelectFeature(layers[1]); mapControl = new OpenLayers.Control.SelectFeature(layers[1], {hover: true});
zoomControl = new OpenLayers.Control.ZoomToMaxExtent(); zoomControl = new OpenLayers.Control.ZoomToMaxExtent();
map.addControl(mapControl); map.addControl(mapControl);
// map.addControl(zoomControl); // map.addControl(zoomControl);
@ -154,10 +168,15 @@ var API_BASE = "/1.0/",
} }
function onFeatureSelect(feature) { function onFeatureSelect(feature) {
console.log("selected", feature); var slug = feature.attributes.slug;
var matchedStops = $('.' + slug);
matchedStops.addClass('highlightedStop');
} }
function onFeatureUnselect(feature) { function onFeatureUnselect(feature) {
console.log("unselected", feature); var slug = feature.attributes.slug;
var matchedStops = $('.' + slug);
matchedStops.removeClass('highlightedStop');
} }
})(); })();