ThinkGeo.com    |     Documentation    |     Premium Support

Adding client-side markers: JS bug

#1

I was investigating the adding of markers on the map through Javascript, and found a topic on the forums that offered code to do it:


        var markerUrl = "Images/marker_blue.gif";

        var markerWidth = 21;

        var markerHeight = 25;

        var markerOffsetX = -10.5;

        var markerOffsetY = -25;



        var OnMapCreating = function (map) {

            OpenLayers.Layer.Vector = OpenLayers.Class(OpenLayers.Layer.Vector, {

            onFeatureInsert: function (feature) {

            var markerLayer = map.getLayer('SomeMarkers');

            var size = new OpenLayers.Size(markerWidth, markerHeight);

            var offset = new OpenLayers.Pixel(markerOffsetX, markerOffsetY);

            var icon = new OpenLayers.Icon(markerUrl, size, offset);

            var marker = new OpenLayers.Marker(feature.geometry.bounds.getCenterLonLat(), icon.clone());

            marker.id = new Date().toTimeString();

            //markerLayer.addMarker(marker);

            }

            })

        };


This is used in combo with "Map1.SetDrawMode('Point')". Now, this works...almost.


I was getting a syntax error, which I finally tracked down to the "AddMarkersByAjax" method, in helper_geoResource.axd. The first line of that method reads:


var markerOverlays = eval('(' + json + ')');


Assuming this was trying to parse the JSON object that holds the list of overlays, I corrected this to the follow:


var markerOverlays = eval('[' + json + ']');


This solved the syntax error, and clicking on the map now adds my image as a marker, as expected. Could this be fixed in the daily build? I have an overwritten version of that method in my code right now, but obviously I'd prefer to remove it.



#2

Janet, 
  
 I am not sure whether the error exists. We have tested it and it works well.  
 Also there is no need to override the onFeatureInsert method if you just want to add markers on map through JavaScript. I guess that the offered code is just suited to some special conditions for some users. Please provide us with the scenario for you. So we could give the best suggestion for you. 
 If this error still exists in your web app, please provide us the solution so that we could address it quickly. 
  
 Thanks, 
 Khalil

#3

 Can someone explain the usage of this example if it works?  


I looked at the js API here: gis.thinkgeo.com/Support/Dis...x#HowToUse


I do not see anyone using js to create markers anywhere in that thread, but maybe I am missing something?


All I want to do is create a marker on the client-side with a mouse click (at the point of click), preferably in SimpleMarkerOverlay so my user has the ability to drag it,  and then save it to the database InMemoryMarkerLayer.


Thanks



#4

Hi Chad,


I think these two topics maybe helpful for your requirement.


gis.thinkgeo.com/Support/Dis...fault.aspx

gis.thinkgeo.com/Support/Dis...fault.aspx


Regards,


Don



#5

Don, 
  
 Thank you for your response. I have managed to do most everything I want given the examples you provided. 
  
 There are 2 things I am still struggling with.   
  
 First, I can’t figure out how to make the markers draggable from the client side.  I have set the layer to allow them to drag on the server side, but any click creates a marker, even if  it is “on” an existing marker.  This is before the save, so they should still be in the SimpleMarkerOverlay, which means I should be able to drag them, right? 
  
 Second, I am having trouble with saving a marker and having the cursor in “Create Marker mode” directly after.   
  
 I pop up a modal after ever marker creation (mouse click).  There are two buttons, one is “Save” and the other is “Save and Add Another Marker”.  “Save” works as it should.    “Save and Add Another Marker” saves the markers, but I cannot get it to be in “Create Marker mode” after the save. 
  
 To troubleshoot I just put Map1.SetDrawMode(‘Point’); right after setting the baselayer of the map in the initial js.  This did not work either.   
  
 I.e. 
  
<script type=“text/javascript”>
            Map1.SetBaseLayer(“BING”);
            Map1.SetDrawMode(‘Point’)
</script>
 
  
 I appreciate any help you can provide. 
  
 Chad

#6

BTW, I also tried this at the end of the "AddMarker" server side method: 
  
  
if (((Button)sender).Text.ToUpper().Contains("ANOTHER"))
            {
                ClientScript.RegisterStartupScript(GetType(), "AddAnotherMarker", "openMarker();", true);
            }
 
  
 When I do this, it looks like there is a js error as the map turns grey.

#7

Also, since I have implemented the feature of adding the markers from the client side, any time I try to draw a shape, it now wants to add a marker in addition to boundary point for each mouse click.   
  
 How can I manage this so that it "knows" that I want to draw a shape as opposed to set a marker?

#8

Chad, 
  
 Thanks for the question. 
  
 You can find out what mode you are in by checking controls collection off of the OpenLayers Map.  For example this function will pop up a message box if you are in Polygon Draw Mode. 
  
             var Map = Map1.GetOpenLayersMap(); 
  
             for (key in Map.controls)  
             { 
                 var control = Map.controls[key]; 
                 if (control.id == ‘Polygon’ && control.active)  
                 { 
                     alert(‘In Draw Polygon Mode’); 
                 } 
             } 
  
 Hope this helps. 
  
 Thanks!

#9

Clint, 
  
 Thanks for the reply.  I managed to remove the markers from the shape files with the provided code. 
  


#10

Hello Chad, 
  
 Please feel free to let us know your questions. 
  
 Regards, 
  
 Gary

#11

Gary, I have asked my questions in separate threads to make it easier for those in the future to quickly find their answers.

#12

Hello Chad, 
  
 Thanks for your help. 
  
 And please check your another post, I have answered it, I hope it can help you. 
  
 Regards, 
  
 Gary