I have a map displaying postcodes, using the
FeatureSource_CustomColumnFetch
callback to set the value, and classbreaks to make the map colour the regions according to the value.
How do I code it such that when the user moves the mouse over a feature that value is displayed. either as a popup/tooltip, or in a separate panel?
Fergus,
I have to warn you form the outset that I am a bit weak on the web side of things and my counterpart is out for the week. I will try and give you some ideas though.
1.You can use our markers layer. What you would do here is to get the centroid of the postal codes and store them in a separate file. You could then add these as a separate overlay with an information type icon. When the user moves the mouse over that icon then they can get the popup / tool tip.
2.You can always draw the text on the feature itself with the labeling system. This way the data is there and there is no need for a tool tip. You could if you wanted do the drawing on a seperate Overlay that your user could toggle. If he wants to see it then turn it on and if not then it won’t much up the screen.
3.You may be able to use the highlight layer but I am not sure how to use this. If you want a few days I can get you more info on that.
4.You can add a mode to you application so that when a user clicks on the area then you do a spatial query and create the popup yourself. This isn’t as good as the hover but is much easier.
The main problem as I understand it is that if you want an area to highlight dynamically or have a hover or tool-tip then we have to send all the screen coordinates of all of the areas on the screen. This could be allot of data if you have complex polygons and it is usually slow as JavaScript is slow in general and with lots of data it’s even worse.
David
Hi, thanks for this.
I’ve implemented #4 above, but it causes the whole map to redraw which is not very nice.
I tried the #3 version - highlight layer - myself first, but couldn’t discover any way to do anything but change the colour. This would be best if it we could get it to work.
1&2 would be too cluttered I fear.
cheers
Fergus,
You can implement this with client part events (onSelect and onUnselect). Here is the codes for that.
Server Side Code:
Feature feature = new Feature(new RectangleShape(-110.22, 50, -80.03, 30));
feature.ColumnValues.Add("description", "this is description message.");
Map1.HighlightOverlay.Columns.Add(new FeatureSourceColumn("description"));
Map1.HighlightOverlay.HighlightStyle = Map1.HighlightOverlay.Style;
Map1.HighlightOverlay.Features.Add("feature", feature);
Client Side Code:
var OnMapCreated = function(map) {
var control = map.getControlsByClass("OpenLayers.Control.SelectFeature")[0];
// Implement its onSelect events, it occurs whenever mouse over the features.
control.onSelect = function(feature) {
SelectedFeature = feature;
// Here is custom implement code for select event.
onCustomFeatureSelect(feature);
}
// Here is custome implement code for unSelect event.
control.onUnselect = onCustomFeatureUnSelect;
}
var onCustomFeatureSelect = function(feature) {
var columnValues = '';
// feature.values is corresponding to the columnValues of the feature on the server side.
for (var key in feature.values) {
var columValue = feature.values[key];
columnValues = key + ':' + columValue + ';';
}
alert(columnValues);
}
var onCustomFeatureUnSelect = function(feature) {
alert("Feature Unselected");
}
Let me know for more queries.
Ben
Hi,
I can’t quite get it to work.
The event attaching is working, but nothing happens when I click on or mouseover a region.
Are there any ‘mgic words’ in the server code I need to change? I’ve tried some bu to no avail
cheers
Fergus,
I’m sorry the above code doesn’t work well with the current version. Please try the attached demo instead.
Thanks,
Ben
342-Post5180.zip (98.6 KB)
Thanks, that’s fixed it. Embarassingly I just think I had my rectangle coordinates wrong.
Unfortunately, however, it still doesn’t do what I need to do. If I create a feature for each of my regions (9500 of them) it times out in the browser. I think I’ll have to stick wth the click-to-select technique.
cheers
Fergus,
Yes, it will download all the features to your client part which is not used for huge data. Here we made another sample for you using callback, I’m sure you will like it.
Ben.
350-Tooltips.zip (95.7 KB)
That’s fabulous. Thankyou v.much
My pleasure, just let us know if we can make your coding easier.
Ben