Added Markers on web map but not able to move them

Topics: Web Controls
Aug 12, 2009 at 9:52 PM

Hi,

I am able to add markers to the map, however am not able to figure out a way to move them or show/hide them on the map based on dynamic zooming. i.e once teh marker is added at a particular point , and then teh user zooms in/zooms out or pans the marker should move correspondingly. Am not able to figure out a way how to move the makaer and by what amount.

below is the JS code that I wrote to redraw the marker at new location, can some one please verify if this is correct. The code has been written in AjaxMap.js

function SharpMap_RedrawMarkers(obj)
{
    var markerID;
    for (x=0;x<obj.markerCount;x++)
    {
        markerID = "marker" + x;
        var mkrCtrl = WebForm_GetElementById(markerID);
        var pos = SharpMap_PixelToMap(mkrCtrl.style.left,mkrCtrl.style.top,obj)
        var center = SharpMap_PixelToMap(obj.container.offsetWidth,obj.container.offsetHeight,obj)
        
        var minX=center.x-obj.zoom*0.5;
        var maxY=center.y+obj.zoom/obj.container.offsetWidth*obj.container.offsetHeight*0.5;
        var maxX=center.x+obj.zoom*0.5;
        var minY=center.y-obj.zoom/obj.container.offsetWidth*obj.container.offsetHeight*0.5;
        
        var round = Math.floor(-Math.log(obj.zoom/obj.container.offsetWidth));
        var zoom = obj.zoom;
        if(round>0)
        {
            round = Math.pow(10,round);
            pos.x = Math.round(pos.x*round)/round;
            pos.y = Math.round(pos.y*round)/round;
        }
        else
        {
            pos.x = Math.round(pos.x);
            pos.y = Math.round(pos.y);
        }
        
        if ((pos.x > minX && pos.x < maxX) &&(pos.y > minY && pos.y < maxY))
        {
            var newLoc = SharpMap_MapToPixel(pos.x,pos.y,obj);
            mkrCtrl.style.top = newLoc.y;
            mkrCtrl.style.left = newLoc.x;
        }
        else
        {
            mkrCtrl.style.display = 'block';
        }
    }
}

function SharpMap_MapToPixel(x,y,obj){
     var p=new Object();
     p.x = ((x - obj.minX) * obj.container.offsetWidth)/obj.zoom;
     p.y = ((obj.minX-y) * obj.container.offsetWidth)/obj.zoom;
     return p;
}

Aug 14, 2009 at 8:37 PM
Edited Aug 26, 2009 at 5:13 PM

Finally made it to work... Added maker popup as well : )

Aug 26, 2009 at 5:17 PM

/* function to add marker*/

function SharpMap_Marker(loc,obj)
{
    var latlong = SharpMap_PixelToMap(loc.x,loc.y,obj)
    var imgHTML = "<img src='images/marker/marker-red.png' style=\"position:absolute;Top:";
    var x = loc.x - 10;
    var y = loc.y - 21;
    imgHTML += y+ "px;left:" + x+ "px\" id='marker" + obj.markerCount + "'";
    imgHTML += " Lat=" + latlong.x.toFixed(2) + " Long=" + latlong.y.toFixed(2);
    imgHTML += " MinX=" + obj.minX.toFixed(2) + " MaxY=" + obj.maxY.toFixed(2);
    imgHTML += " Zoom=" + obj.zoom ;
    imgHTML += " oncontextmenu=\"show_contextmenu(event,'marker" + obj.markerCount+"');return false;\">";
    return imgHTML;
}

/*function to redraw marker on map zoom in zoom out*/

function SharpMap_RedrawMarkers(obj)
            {
                var markerID;
                for (x=0;x<obj.markerCount;x++)
                {
                    markerID = "marker" + x;
                    var mkrCtrl = WebForm_GetElementById(markerID);
                    var center = SharpMap_GetCenter(obj);
                    
                    var minX=(center.x-obj.zoom*0.5).toFixed(2);
                    var maxY=(center.y+obj.zoom/obj.container.offsetWidth*obj.container.offsetHeight*0.5).toFixed(2);
                    var maxX=(center.x+obj.zoom/obj.container.offsetWidth*obj.container.offsetHeight*0.5).toFixed(2);
                    var minY=(center.y-obj.zoom*0.5).toFixed(2);
                              
                    var newLoc=new Object();
                    newLoc.x = Math.round(((parseFloat(mkrCtrl.getAttribute('Lat')) - minX) * obj.container.offsetWidth)/obj.zoom);
                    newLoc.y = Math.round(((maxY - parseFloat(mkrCtrl.getAttribute('Long'))) * obj.container.offsetWidth)/obj.zoom);
                    mkrCtrl.style.top = newLoc.y-21;
                    mkrCtrl.style.left = newLoc.x-10;
                         
                    if ((parseFloat(mkrCtrl.getAttribute('Lat')) > minX && parseFloat(mkrCtrl.getAttribute('Lat')) < maxX) && (parseFloat(mkrCtrl.getAttribute('Long')) > minY && parseFloat(mkrCtrl.getAttribute('Long')) < maxY))
                    {
                        mkrCtrl.style.display = 'block';
                    }
                    else
                    {
                        mkrCtrl.style.display = 'none';
                    }
                }
                
            }

/* JS to display popup onmouseover event of marker*/

<script type="text/javascript">
            <!--
            Xoffset=-60;    // modify these values to ...
            Yoffset= 20;    // change the popup position.

            var old,skn,iex=(document.all),yyy=-1000;

            var ns4=document.layers
            var ns6=document.getElementById&&!document.all
            var ie4=document.all

            if (ns4)
            skn=document.dek
            else if (ns6)
            skn=document.getElementById("dek").style
            else if (ie4)
            skn=document.all.dek.style
            if(ns4)document.captureEvents(Event.MOUSEMOVE);
            else{
            skn.visibility="visible"
            skn.display="none"
            }
            document.onmousemove=get_mouse;

            function popup(msg,bak)
            {
                var content="<TABLE  WIDTH=100 BORDER=1 BORDERCOLOR=black CELLPADDING=2 CELLSPACING=0 "+
                "BGCOLOR="+bak+"><TD ALIGN=center><FONT COLOR=black SIZE=2>"+msg+"</FONT></TD></TABLE>";
                yyy=Yoffset;
                if(ns4){skn.document.write(content);skn.document.close();skn.visibility="visible"}
                if(ns6){document.getElementById("dek").innerHTML=content;skn.display=''}
                if(ie4){document.all("dek").innerHTML=content;skn.display=''}
            }

            function get_mouse(e){
            var x=(ns4||ns6)?e.pageX:event.x+document.body.scrollLeft;
            skn.left=x+Xoffset;
            var y=(ns4||ns6)?e.pageY:event.y+document.body.scrollTop;
            skn.top=y+yyy;
            }

            function kill(){
            yyy=-1000;
            if(ns4){skn.visibility="hidden";}
            else if (ns6||ie4)
            skn.display="none"
            }

            //-->
        </script>

Aug 26, 2009 at 5:19 PM

forgot to list the below code:

Add teh blow code to GenerateMapBox() at the bottom in AjaxMapControl.cs

divMarker= new HtmlGenericControl("div");
divMarker.ID = "marker";
divMarker.Style.Clear();
divMarker.Style.Add("z-index", "100");
divMarker.Style.Add("position", "absolute");
this.Controls.Add(divMarker);

 

Oct 7, 2010 at 9:46 AM

 

Hi rinkurajat,

Just want to know how I can put markers on map. I mean one Image based upon latitude and longitude.

Please let me know any code sample. I want in windows forms.

Thanks for your time.

Vivek Kumar