ThinkGeo.com    |     Documentation    |     Premium Support

Adding a marker on client side on google map overlay

#1

Hi,


The attached code is used to add a marker on the client side on a google map overlay


I have the projection set up correctly at the server side for the google maps and at the server side if I add a marker at the server side its positioning fine


How do I set the marker to a decimal degrees lat long location i,e, 53.2, -2 .2222 at the client side.


 


I have tried this but it doesn't give me whats expected


        var point = new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat);

                    var srcProj = new OpenLayers.Projection('EPSG:900913');

                    var desProj = new OpenLayers.Projection('EPSG:4326');

                    var newPoint = OpenLayers.Projection.transform(point, srcProj, desProj);

 


Liam


 


 


 


 


 



var markerURL = 'localhost/sample.UI/i/lift_map.png';
var markerWidth = 16;
var markerHeight = 16;
var markerOffsetX = -20;
var markerOffsetY = -20;
var cloneLiftClientMarker = false;
var markerClientLayer = null;

function showMarkerOnMap(id, lat, long) {
    var vehMap = Map1.GetOpenLayersMap();
    if (markerClientLayer == null) {
        markerClientLayer = new OpenLayers.Layer.Markers('Markers');
        markerClientLayer.Id = 'Markers';
        vehMap.addLayer(markerClientLayer);
    }

    var size = new OpenLayers.Size(markerWidth, markerHeight);
    var offset = new OpenLayers.Pixel(markerOffsetX, markerOffsetY);
    var icon = new OpenLayers.Icon(markerURL, size, offset);

    // Move the map to the new marker to hightlight it
    Map1.PanToWorldCoordinate(long, lat)
    var newMarker = new OpenLayers.Marker(new OpenLayers.LonLat(long, lat));
    newMarker.Id = id;
    newMarker.icon = icon;

    if (cloneLiftClientMarker == false) {
        markerClientLayer.addMarker(newMarker, icon);
    }
    else {
        markerClientLayer.addMarker(newMarker, icon.clone());
    }
}


#2

Hi, 
  
 After a bit of diiging around the forum I found this and it works fine. 
     var pointInDMS = new OpenLayers.Geometry.Point(long, lat); 
     var pointInGoogle = pointInDMS.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")); 
  
 Rgds, 
 Liam 


#3

 


Hi, Liam
I guess the method you have provided in the first post is right. Please refer to the codes below for the Geometry Point:
    transform: function(source, dest) {
        if ((source && dest)) {
            OpenLayers.Projection.transform(
                this, source, dest); 
            this.bounds = null;
        }       
        return this;
    }
It’s very clear that it also call the OpenLayers.Projection.transform method internally. Anyway, if you have additional questions please let us know.
Thanks,
Khalil

 



#4

Hi Khalil,


Thanks for the info,


Liam


 



#5

Liam, Thanks for your feedback.  
  
 Any additional questions please let us know. 
  
 Thanks, 
  
 Khalil

#6

Hi Khalil,


Just an additional question wrt client side markers as above.


[Just to recap, the user of the web app selects records on a grid containing lat long points and on each row selected a client side marker is displayed on the map.]


Is it easy to add a context menu to the above client side marker above. [All still in client side code and also the plan is for the conext menu to only execute client side code atm]


Rgds,


Liam



#7

 


Hi Liam,


<divre style="line-height: 150%; background: ivory"></divre>
In that case, we need to change code that is used for creating markers. “var newMarker = new OpenLayers.Marker(new OpenLayers.LonLat(long, lat));


 

” is just used to create OpenLayers normal marker without popup and ContextMenu, because OpenLayers doesn’t provide a class to define the ContextMenu technically.  Please try the below:


 
                         var markerCreator = new Marker(markerJson);

                        markerCreator.overlayId = markerLayer.id;

                        markerCreator.mapUid = map.uniqueId;

                        markerCreator.mapCid = map.clientId;

                        markerCreator.currentZoom = map.getZoom();

   markerCreator.setContextMenu(markerJson);

                        marker.popupJson = markerJson.popup;

                        marker.popupDelay = markerJson.popupdelay;

                        marker.initializePopup(map); // Add the popup to map

                        markerLayer.addMarker(marker); // Add the marker to markerlayer
From the above, we can see that all the instances are created using JSON string which contains all the information of the marker, such as id, popup json, contextmenu json etc. Here is a demo for marker JSON string:
[{"id":"Markers", "markers":[{"popup":{"bgcolor":"White","bdcolor":"Black","bw":1,"html":"Minneapolis","popupType":"NormalPopup","id":"bc043784-3fb3-4292-aea5-87a72263e4b9","lonlat":{"x":0,"y":0},"w":180,"h":150,"visibility":false,"opacity":1,"autosize":true,"autopan":false,"closable":false,"ox":0,"oy":0},"popupdelay":500,"lonlat":{"x":-10382568.3085662,"y":5615928.96142624},"img":{"w":0,"h":0,"url":"../../theme/default/samplepic/circle.png","ox":0,"oy":0},"opacity":1,"id":"14","visible":true}]}]
 
Hope it helped, thanks.
Johnny

#8

Hi Johnny, 
  
 Very helpful, thanks - I’ll have a look at it later today. 
  
 Rgds, 
 Liam

#9

Hi Liam, 
  
 You are so welcome, the difficulty is how to create the right JSON string, any question please be free to post here. 
  
 Thanks, 
 Johnny