none
Pushpin width setting is moving the pin away from the map location RRS feed

  • Question

  • Hello there,

    I am using BingMaps, javascript to show map points on worldmap.

    The issue I am facing is, if the label (MapPoints[i].city) text is more than 9 characters(pushpin width; 60), it is truncating the text. 

    If I increase the width from 60 to 160. The label shows completely, but the mappoint is moving to the left of the actual location.

    I have tried different combinations, but it does not help. I want to show the complete label, but dont want the pushpin to move away from actual location on the map.

    How do I do that?

    Thanks

    Nate


     img = MapPoints[i].group + '.png';
            var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(parseFloat(MapPoints[i].lat), parseFloat(MapPoints[i].lon))
                , {
                    icon: img,
                    height: 50, width: 60, text: MapPoints[i].city, typeName: 'clrval'
    
                });
    
            pushpin.Title = MapPoints[i].name;
            pushpin.description = MapPoints[i].desc;
            pushpin.cityID = MapPoints[i].cityID;
            pushpin.city = MapPoints[i].city;
            pushpin.typeName = 'clr';
         
    dataLayer.push(pushpin);
    

    The CSS class used is  as follows

    .clrval div { color: blue !important; 
        left: 5px !important;  
        text-shadow: 1px 0px white, -1px 0px white, 0px -1px white, 0px 1px white;  
        font: 12px arial,sans-serif !important; 
    }

    Wednesday, March 25, 2015 4:13 PM

Answers

All replies

  • You want to use the anchor property of the pushpin to set which pixel of the pushpin should be bound to the coordinate on the map. Also, since your text is likely to be different lengths, be sure to center them. Here is a blog post about using the anchor property: https://rbrundritt.wordpress.com/2014/10/02/correcting-anchoring-pushpins-to-the-map/

    http://rbrundritt.wordpress.com

    • Proposed as answer by Ricky_Brundritt Thursday, March 26, 2015 4:11 PM
    • Marked as answer by SPTQs Thursday, March 26, 2015 5:19 PM
    Thursday, March 26, 2015 4:11 PM
  • .clrval div { color: blue !important; left: 20px !important; text-shadow: 1px 0px white, -1px 0px white, 0px -1px white, 0px 1px white; font: 12px arial,sans-serif !important; text-align:center; }

    Hi Ricky,

    I have added the text-align:center to the style

    and changed the label textOffset:(0,0)

    var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(parseFloat(MapPoints[i].lat), parseFloat(MapPoints[i].lon))
                , {
                    icon: img,
                    height: 50, width: 120, text: MapPoints[i].city, typeName: 'clrval', anchor: new Microsoft.Maps.Point(12, 36)
                    , textOffset:(0,0)
    
    
                });

    Even after these changes, it is aligning the the text to right.

    The Salvador text is right aligned.

    Friday, March 27, 2015 3:35 PM
  • Ok, you are showing the pushpin in addition to the label. If you want to do this then you need to make your pushpin image large enough so that the point of it is at 60 pixels in the x direction. You then need to set the anchor to (60, 36).  If your pushpin is smaller, add some white space to the left of the image. Here is a code sample that does this using CSS:

    <!DOCTYPE html>
    <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&mkt=en-US&ur=SA"></script>
      
      <script type="text/javascript">
    	var map;
    	
    	function GetMap()
    	{	
    		map = new Microsoft.Maps.Map(document.getElementById("myMap"), { 
    			credentials: "YOUR_BING_MAPS_KEY"
    		});
    		
    		var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), {			
                    height: 39, 
    				width: 120, 
    				text: 'Hello World', 
    				typeName: 'clrval', 
    				anchor: new Microsoft.Maps.Point(60, 39)
                });
    			
    		map.entities.push(pushpin);
    	}
    	</script>	
    	<style>
    	.clrval img {
    		;
    		left:48px;
    	}
    	
    	.clrval div { 
    		color: blue !important; 
    		text-shadow: 1px 0px white, -1px 0px white, 0px -1px white, 0px 1px white;  
    		font: 12px arial,sans-serif !important; 
    		text-align:center;
    	}
    	</style>
    </head>
    <body onload="GetMap();">
    	<div id='myMap' style=";width:800px;height:600px;"></div>
    </body>
    </html>
    Note that the forums removes position values. the clrval img style should have position of absolute, and the map position relative.


    http://rbrundritt.wordpress.com


    Friday, March 27, 2015 4:15 PM