I am looking for ideas or example applications on how to create markers and have popups associated with each. I looked at the SetTheHoverPopupOfAMarker example but that is setting the content on the default marker style which is not acceptable as I need to have different popup content per marker.
What is the best way to go about doing this? Do I have to do it via javascript and the OpenLayers API or is there another way to do it?
Thanks.
Curtis
Hi, Curtis
I guess the SimpleMarkerOverlay is what you want. You can see that it let you add maker to the Markers collection of it freely and also you could define CustomPopup object for every marker. The code likes below:
SimpleMarkerOverlay markerOverlay = new SimpleMarkerOverlay("MarkerOverlay");
Marker marker = new Marker(-8922952.93266, 2984101.58384, new WebImage(21, 25, -10.5f, -25f));
CustomPopup popup = new CustomPopup("p1", marker.Position, "MyContent");
popup.AutoPan = true;
popup.AutoSize = true;
popup.HasCloseButton = true;
popup.IsVisible = false;
marker.Popup = popup;
markerOverlay.Markers.Add(marker);
If you don't familar with SimpleMarkerOverlay, please refer to the "UseDraggableMarkers" sample which you could find its source code at "Samples\Markers\UseDraggableMarkers.aspx" in our installer samples.
Thanks,
Khalil
Khalil,
Are you sure this will work if we add 1000 to 10000 markers ? I hope simpleMarkerOverlay will not support more than 400 - 600 markers based on the content we put into the popup html.
Is there any workaround to accomadate 10,000-20,000 markers using simplerMarkerOverlay with popup.
Thanks
Raja
Raja,
I agree that SimpleMakerOverlay will run into performance issue with huge markers with huge Popup information. But I think many ways we can manage to improve it:
1. We just set the basic information for the maker without any popup information on server side, such as position, icon image etc. In this way, we can decrease the size transported between client and server side.
To get the popup information, we can add a httphandler to get the information based on marker’s id from client side AJAX request.
2. The SimpleMarkerOverlay loads all the markers from server side for the first time. To make sure it always loads the markers in current viewing area, we can overwrite the client method “SendMarkerRequest” to make sure it works fine for SimpleMarkerOverlay’s AJAX request. Here is the sample code:
[code]
<script language="javascript" type="text/javascript">
var OnMapCreating = function(map) {
var mapParser = Map1.GetMapParser();
mapParser.sendMarkersRequest = function() {
for (var i = 0; i < this.simpleMarkerOverlayIds.length; i++) {
var markerOverlayId = this.simpleMarkerOverlayIds[i];
var overlay = this.map.getLayer(markerOverlayId);
var url = this.getMarkerRequestUrl(markerOverlayId, 0);
if (url) {
CurrentMapClientId = this.map.clientId;
var httpRequest = new OpenLayers.Ajax.Request(url, { 'method': 'get', 'onComplete': function(transport) {
if (transport.status == 200) {
var map = eval('parser' + CurrentMapClientId + '.map');
AddMarkersByAjax(map, transport.responseText);
}
}
});
}
}
},
mapParser.getMarkerRequestUrl = function(markerOverlayId, gridSize) {
var url = null;
if (this.simpleMarkerOverlayIds.length != 0) {
url = 'markers_GeoResource.axd?';
url += 'overlayIds=' + markerOverlayId;
url += '&extent=' + ConvertBoundsToString(this.map.getExtent());
url += '&level=' + (parseInt(this.map.getZoom()) + 1);
url += '&pageName=' + this.pageName;
url += '&clientId=' + this.json.cid;
url += '&scale=' + this.map.getScale();
url += '&gridSize=' + gridSize;
url += '&extra=' + Math.random().toString();
}
return url;
},
mapParser.createMap = function() {
this.onMapCreating(this.map);
this.initOverlays(this.json);
this.initBaseOverlay(this.json.baselayerid);
this.initExtent(this.json);
// this.addSimpleMarkers();
this.initPopups(this.json);
this.initControls(this.json);
this.initHighlightOverlay(this.json.highlightOverlay);
this.initEditOverlay(this.json.editOverlay);
this.initMapMode();
this.initMeasureMode();
this.registerChangeBaseLayerEvent(this.json);
this.releasePageLoad();
this.onMapCreated(this.map);
this.onMapRefresh(this.map);
this.map.panByPopup = false;
}
</script>
</Code>
3. Besides the ways above, we also can add the cluster strategy for the SimpleMarkerOverlay based on screen distance between each other.
The above are the ways we can try to improve the SimpleMarkerOverlay performance. Any questions please let us know.
Thanks,
Johnny
Dear Johnny,
Thank you very much for your reply.
I will work on that and get you back.
Thanks
Raja
Raja,
Any questions please let us know, i think we can give you more information about it. It’s a little complex.
Thanks,
Johnny
Hi ,
Thanks Johnny.
When I try to add more no of lines ( around 12000) using customOverlay with InMemoryFeatureLayer, I am getting the script error as I faced in simpleMarkerOverlay.
Is InMemoryFeatureLayer layer also work like simpleMarkerOverlay.
Is there any workaround to solve this issue.
Thanks
Raja
Raja,
The InMemoryFeatureLayer are used in the Marker/Popup httphandler, right? I think that will not give you that script error. The issue is caused that you added 12000 marker on the server side, That’s a huge number, we can image that the marker DOM tree need long time to create, so the error happened. Besides using httphanlder to get popup information on the fly, we also need to create another MarkerManager to filter the markers based on the ZoomLevel and make sure the Brower gets an acceptable number of markers, right?
I think the MarkerManager can filter the markers based on the screen distance between each other based on zoom levels. For instance, we can define there should be no other markers around it in 10 pixel distance.
Thanks,
Johnny