Adding Marker on Client Side

[GNak]

I am trying to add marker - images on client side. For eg:Once the shapes are drawn I want to be able to draw markers to display if the shape is located near a power pole, light pole, fire hydrant etc.. I have a set of images that will be used as markers on the map.

To improve performance the markers have to be added on to Client side and then processed on the server side. 

I checked all the samples but looks like the samples are geared for the Server side processing. 

I was wondering how I can add the marker on Client side -

1. Does the map control have anything for the marker for Client side as it does for the shapes DrawMode - Map1.SetDrawMode(‘ShapeType’);

 2. Once the markers are added on the client side, how will I retrieve the information on the server side? 

Any assistance, samples would be truly appreciated.

 

[Ben]

GNak, 



Here is one sample how to add a marker on client side. We used "Map.OnClinetDrawEnd" property in this sample: 




// Server side:  
SimpleMarkerOverlay markerOverlay = new SimpleMarkerOverlay("FlagMarkers"); 
Map1.CustomOverlays.Add(markerOverlay); 
Map1.OnClientDrawEnd = "AddMarkerOnClientDrawEnd"; 




//Client side:
function AddMarkerOnClientDrawEnd(feature) { 
var map = Map1.GetOpenLayersMap();
var markerLayer = map.getLayer('FlagMarkers');
var size = new OpenLayers.Size(25, 25);
var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
var icon = new OpenLayers.Icon('boston.openguides.org/markers/AQUA.png', size, offset);
var marker = new OpenLayers.Marker(feature.geometry.bounds.getCenterLonLat(), icon.clone());
marker.id = NewGuid().toString();
markerLayer.addMarker(marker);
// Store some marker information to the Hidden,such as Id,position,imageUri,imageWidth,imageHeight
var markerStorage = document.getElementById('_MarkerStatusStorage'); 
markerStorage.value += "some markerInfo";
}



Note: The marker needs to be added to a hidden field otherwise it will gone after a postback. 



Hope that helps. 



Thanks, 



Ben

[GNak]

Hey Ben,

Thank-you for the sample. I am able to add the markers to the client side.  As you mentioned in the sample I am adding the image information into the hidden field. (instead of the SimpleMarkerOverlay I am adding the marker to the InMemoryMarkerOverlay)
 
On Postback – I have following questions
* I get the information from the hidden field and add it to the InMemoryMarkerLayer then I add the feature from the Map1.EditOverlay.Features. However, on postback the image information is lost. 
* The marker that I added on the client side – Which overlay does it gets added to? I am not able to find it on Map1.EditOverlay or Map1.MarkerOverLay or InMemoryMarkerLayer on a debug mode.
 
I truly appreciate if you could provide me some information or sample on how I can handle the markers added on the client side on the server side so that the information is not lost.

Thanks,

Gowri

 

 

 

 

[GNak]

I have a follow-up question as well. For performance reasons we want to maintain adding markers on the client side. If a user adds multiple markers on the client side.  
 How would I access those markers on the server side when a post back happens?  
 eg: if a user adds 3 markers with 3 different images, on post back how do I access the marker information? 
  

[Howard]

GNak,



Here is a better solution for you to work around the issue that misses markers after PostBack.
var OnMapCreating = function(map) {
        OpenLayers.Layer.Vector = OpenLayers.Class(OpenLayers.Layer.Vector, {
            onFeatureInsert: function(feature) {
                var map = Map1.GetOpenLayersMap();
                var markerLayer = map.getLayer('FlagMarkers');
                var size = new OpenLayers.Size(25, 25);
                var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
                var icon = new OpenLayers.Icon('boston.openguides.org/markers/AQUA.png', size, offset);
                var marker = new OpenLayers.Marker(feature.geometry.bounds.getCenterLonLat(), icon.clone());
                marker.id = new Date().toTimeString();
                markerLayer.addMarker(marker);
            }
        });
}

An EditOverlay is OpenLayers layer whose type is OpenLayers.Layer.Vector.



We can’t synchronize the ViewState with custom JavaScript creating stuffs such as the markers added dynamically by the script above. But you still can handle this custom status.



For example, save the marker information such as serialized markers string in a hidden field named “_MarkerStatus”, this field will be Posted to the server, you can access it by Request.Form[“_MarkerStatus”] on server side code, then de-serialize it and add into your marker overlay.



Hope it helps.



If you have any queries, please let me know,



Thanks,



Howard

[GNak]

Howard,  
  
 I have detailed out the current process in my application. This sample is good, but I still not able to get hold of the markers from the EditOverlay during the Postback.  
  
 * I see it being added as feature but how can I access the marker added from Client side, during postback on the serverside using the marker.ID.  
 * Once I get hold of the Marker on the server side using the marker.ID, do I need to add it to my Markeroverlay (InMemoryMarkerOverlay or SimpleMarkerOverlay)?  
  
 Description: 
 I am adding the markers as follows – 
 Web application has a panel with a list of images (each image acts as a marker on the map). 
  
 When a user clicks on the image to add as a marker, Map1.SetDrawMode(‘Point’); is triggered and on ClientDrawend the specific marker is added to the marker layer (I am currently using the code sample you sent). The Marker image sits over a point (this somewhat works like a push pin).  
  
 A user can add different images as a marker – say 5 images. Once the drawing process is complete and user click on submit the Postback happens. During the postback all the markers – 5 images that were added on the client side need to be added/maintained on the server side.  
  
 As of now I am not able to retain that information on the server side. 
  
 I was initially trying to readd the marker information on the server side in InMemoryMarkerOverlay but that did not seem to work (maybe I am not doing it right). Now I am using SimpleMarkerOverlay. 
  
 I would truly appreciate if you could provide me some sample/insight to show how the above code can be accessed on the Server side.  
  
 Thanks, 
 Gowri 

[Howard]

Hi GNak,



As I mentioned in the last reply, we can’t maintain the custom JavaScript creating things which needs to be maintained by you. The attached sample specifies one method to synchronize your markers between client and server side.



The key point is to serialize the markers you added on client side to String, and set it into a hidden field before the page posting back. On the Server-Side, you need to get the String and de-serialize to server markers. 



Any questions please let me know.



Thanks,



Howard

673-Post5675.zip (101 KB)

[GNak]

Thank-you Howard. 
 The samples were very helpful. I assumed that I could access the basic marker information from EditOverlay. But  later realized that the manipulation to marker overlay needs to be done on a Postback.

[Howard]

Hi GNak, 
  
 That’s right. There are two situations when you manipulate server objects; one is on Postback while another one is on Callback; when you manipulate the marker overlay in the sample, it’s on a Postback. 
  
 If you have more queries please let me know. 
  
 Thanks, 
  
 Howard

[GNak]

One last question specific to Markers - 
  
 I am trying to getBitmap() for the overlay and I wanted to add my SimpleMarkeroverlay as a part of the bitmap.  
 As of now I am able to get the bitmap image for map, shapes and text as they are part of one overlay.  
 But I am unable to add my markers to get the bitmap. I tried making it the activeBaseOverlay but that did not work.  
  
 I was wondering how I can get the Markers to be a part of my bitmap image along with Shape and text.  
 The Final Image when I do Map1.GetBitmap() should have - Map, Shapes, Text and Markers. Is there a way to do this?

[Howard]

Hi GNak, 
  
 Marker is client creating thing which has nothing to do with the server rendering, so we don’t support it currently. 
  
 It’s a good suggestion for us and it’s already on our schedule, we’ll integrate in our product in the further version. 
  
 Please let me know if you have more queries. 
  
 Thanks, 
  
 Howard 

[GNak]

Hey Howard, 
  
 We need a way to get the bitmap image for the Markers as well. Like getting an image just for the markers and then combining it with the original image. Is there any work around for this?  
  
 I truly appreciate your response. 

[Howard]

Hi GNak, 
  
 I have a temporary solution for you:  
  
 Use InMemoryFeatureLayer instead of SimpleMarkerOverlay when you synchronize the markers on the server-side. GetBitMap() renders the markers to image in this solution. But it’s a little complex to implement the click event and displaying hover popup. 
  
 Callback is a good solution here which to implement these features. First of all, get the click point at client-side by the OnMapClientClick event; raise a callback to the client and buffer the point to a Multipolygon; then use the QueryTools to get the features which are intersected with the Multipolygon which you buffered just now; then you can create the Popup on the client-side by the feature information which you transferred by the callback. 
  
 If you have any questions please let me know. 
  
 Thanks, 
  
 Howard 

[GNak]

Hey Howard, 
  
 Did you mean InMemoryMarkerOverlay or InMemoryFeatureLayer?? 
  
 I tried with InMemoryMarkerOverlay but looks like I can have only one image file and all the markers are added as features within it. Is there a way to have multiple image files associated for InMemoryFeatureLayer just like we do in SimpleMarkerOverlay ? I tried to look into the ThinkGeo Sample files for Markers, but all of them are for SimpleMarkerOverlay. 
  
 As far as InMemoryFeatureLayer for Marker, I have not tried it. Let me know how I can associate the Image files in a InMemoryFeatureLayer to display it as a marker. 
  
 The callback… I am not sure I understand the solution. Can you provide me some sample so that I understand the working of the callback ? 
  
 I truly appreciate your assistance.

[Howard]

Hi GNak,



What I mean using callback is just for some special action in marker, such as marker click event and hover popup; please ignore it in your scenario.



On the other hand, InMemoryFeatureLayer can simulate the same image as MarkerOverlay looks like, so please see my sample below.



If you have any questions please let me know.



Thanks,



Howard

695-Post5675_2.zip (104 KB)