none
Place arrow Image to End of Polyline Point RRS feed

  • Question

  • Hi,

    Can any1 help me how to Place arrow image to end of Polyline point Dynamically using html5 canvas or other way??????

    Thanks

    Vinayak


    • Edited by Vinayak M Saturday, June 22, 2013 11:42 AM
    Saturday, June 22, 2013 4:47 AM

Answers

All replies

  • This has been answered several times on these forums. Take a look at this post: http://social.msdn.microsoft.com/Forums/en-US/b7f74060-ac25-41fd-ab91-1f9105db65ba/draw-an-arrow-of-middle-of-polyline

    http://rbrundritt.wordpress.com

    Saturday, June 22, 2013 12:00 PM
  • Hi Richard

    sorry i am again asking you,Please got through my code and let me know how to move canvas image to on top of polyline,it works if i hard code the 'translate 'values to (10,30 )but i need it dynamically,

    currently it is drawing canvas image slightly above the ploy line image.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
       <head>
          <title></title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
            <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
        
        <script>
            var earthRadius = 6367; //radius in km
            var map;
            //var point1 = new Microsoft.Maps.Location(40.02,-105.03);
            var point32 = new Microsoft.Maps.Location(15.3544,75.1376);
            var point33 = new Microsoft.Maps.Location(39.2894,-76.6384);
            
            //var point1 = new Microsoft.Maps.Location(42.2763,-83.7471);
            var point2 = new Microsoft.Maps.Location(40.734,-74.1852);
            var point3 = new Microsoft.Maps.Location(38.7749,-77.2142);


            var point22 = new Microsoft.Maps.Location(40.734,-74.1852);
            var point23 = new Microsoft.Maps.Location(39.2894,-76.6384);



            /*
            Some of the known locations in Lat and Lon order
            Hubli = 15.3544,75.1376
            Dharwad = 15.4541,74.9972
            Bangalore =12.983,77.583

            Chennai =13.0634,80.2207
            Mumbai = 19.0158,72.8599
            Boston = 42.3535,-71.0627

            Observations:
            - For the forthest points the arrow direction is not proper,even as we zoom in, the line between two points starts shifting/oscilating
            
            Data from report:
            "nomineLat":"40.734","nominelang":"-74.1852","resoLat":"40.734","resoLang":"-74.1852"
            "nomineLat":"40.734","nominelang":"-74.1852","resoLat":"39.2894","resoLang":"-76.6384"
            nomineLat":"40.5228","nominelang":"-74.4313","resoLat":"38.7749","resoLang":"-77.2142"
            
            */
            

            function GetMap()
            {
                map = new Microsoft.Maps.Map(document.getElementById('mymap'),{
                    credentials: "Ah_C8OJJu8wnNX50rGHf8_OYKonuhZ-CfLQ-kXS-4tI-QsTN9pkLPPfgZgKigwa8"
                });

    map.setView({ zoom:4, center: new Microsoft.Maps.Location(15.3544,75.1376) })
            //map.setView( {zoom:5});
             var pin, img;
              //Register and load the Canvas Pushpin Module
                  Microsoft.Maps.registerModule("CanvasPushpinModule", "js.js");
                  Microsoft.Maps.loadModule("CanvasPushpinModule", {
                      callback: function () {
                          //Create Canvas Entity Collection
                          canvasLayer = new CanvasLayer();
                          map.entities.push(canvasLayer);

                          //Create the canvas pushpins
                          createCanvasPins();
                  }});

            }

            function createCanvasPins(){
                var pinInfoBox;  //the pop up info box
                var infoboxLayer = new Microsoft.Maps.EntityCollection();
                var pinLayer = new Microsoft.Maps.EntityCollection();
                var mycars = new Array();
                mycars[0] = Array(15.3544,75.1376);
                mycars[1] =  Array(12.983,77.583);


                for (var i = 0; i <1; i++) {

                    
                    //Create a canvas pushpin at a random location
                    pin = new CanvasPushpin(new Microsoft.Maps.Location(mycars[i][0],mycars[i][1]), function (pin, context) {
                        img = new Image();
                        img.src = 'images/redarrow.png';
                        img.onload = function () {
                            if (context) {
                                var angle = calculateBearing();
                                //Calculate the new dimensions of the the canvas after the image is rotated
                                var dx = Math.abs(Math.cos(angle * Math.PI / 180));
                                var dy = Math.abs(Math.sin(angle * Math.PI / 180));                              
                                var width = Math.round(img.width * dx + img.height * dy);
                                var height = Math.round(img.width * dy + img.height * dx);
                                
                                console.log("Width: "+width);
                                console.log("height: "+height);
                                //Set the dimensions of the canvas
                                context.width = width;
                                context.height = height;
        
                                //Offset the canvas such that we will rotate around the center of our arrow
                                //context.translate(width * 0.5, height * 0.5);
                                //context.translate(width * 0.5, height * 0.5);
                                //Rotate the canvas by the desired heading
                                //alert(pin.Metadata.heading * Math.PI / 180);
                                //context.rotate(90* Math.PI / 180);

                                //Return the canvas offset back to it's original position
                            //    context.translate(-img.width * 0.5, -img.height * 0.5);

                                //Draw the arrow image
                            //    context.drawImage(img, -15,23);
                                //context.drawImage(img,0,0);

                                //context.translate(10,35);


                                //context.translate(img.width/2, img.height/2);
                                //var angle = calculateBearing();
                                //context.translate(-img.width/2, -img.height/2);
                                //context.rotate(angle * Math.PI / 180);
                                //context.drawImage(img,0,0);
                                //var  co=convert();
                                //alert(co.x);
                                //alert(co.y);
                                //context.save();
                                //context.translate(co.x,co.y);
                                //context.translate(10,35);
                                //context.translate(img.width/2, img.height/2);
                                
                                
                                //alert(angle);
                                //context.rotate(angle * Math.PI / 180);
                            //    context.drawImage(img, -img.width/2, -img.height/2);
                                context.drawImage(img, 0,0);
                                //context.drawImage(img, co.x, co.y);
                                //context.drawImage(img,0,0);
                                context.restore();

                                                            //context.drawImage(img,0,35);
                            }
                        };
                    });

                    //Give the pushpin a random heading
                    pin.Metadata = {
                        heading: Math.random() * 360
                    };

                    canvasLayer.push(pin);
                }

                    var polyline = new Microsoft.Maps.Polyline([new Microsoft.Maps.Location(mycars[0][0], mycars[0][1]),new Microsoft.Maps.Location(mycars[1][0], mycars[1][1])], {strokeThickness:1.5,strokeColor:new Microsoft.Maps.Color(200, 100, 0, 100)},null);
                                        
                                        
                    map.entities.push(polyline);
                                        
                    var latLon = new Microsoft.Maps.Location(mycars[0][0],mycars[0][1]);
                    var pin2 = new Microsoft.Maps.Pushpin(latLon);
                         
                          
                     pinLayer.push(pin2);
                
                

                    var latLon1 = new Microsoft.Maps.Location(mycars[1][0],mycars[1][1]);
                    var pin1 = new Microsoft.Maps.Pushpin(latLon1);
                                 
                                   
                                       
                    //pinLayer.push(pin1); //add pushpin to pinLayer
                    //map.entities.push(pinLayer);
                    //map.entities.push(infoboxLayer);    

            }

            

            function calculateBearing(){    
                var latlong1={};
    var latlong2={};

    latlong1.Latitude = 12.983;
    latlong1.Longitude =77.583;

    latlong2.Latitude = 15.3544;
    latlong2.Longitude =75.1376;



             var lat1 = DegtoRad(latlong1.Latitude);    
             var lon1 = latlong1.Longitude;    
             var lat2 = DegtoRad(latlong2.Latitude);    
             var lon2 = latlong2.Longitude;    
             var dLon = DegtoRad(lon2-lon1);    
             var y = Math.sin(dLon) * Math.cos(lat2);    
             var x = Math.cos(lat1)*Math.sin(lat2) - Math.sin(lat1)*Math.cos(lat2)*Math.cos(dLon);

            var brng = (RadtoDeg(Math.atan2(y, x))+360)%360;    
            return brng;
            }

            function DegtoRad(x){
     return x*Math.PI/180;
    }

    function RadtoDeg(x){
     return x*180/Math.PI;
    }
    MAP_WIDTH = 800;
    MAP_HEIGHT = 400;

    function convert(lat=12.983, lon=77.583){
        var y = ((-1 * lat) + 90) * (MAP_HEIGHT / 180);
        var x = (lon + 180) * (MAP_WIDTH / 360);
     
        return {x:x,y:y};
    }
          </script>
      </head>
       <body onload="GetMap();">
            <div id="mymap" style="; height:400px; width:800px;"></div>
       </body>
    </html>

    Thanks

    Vinayak

    Monday, June 24, 2013 10:55 AM