none
Bing maps AJAX V7 pushpin visibility and zoom level (setminzoomlevel) RRS feed

  • Question

  • Hi,

    is there an equivalent method to the pushpin.setminzoomlevel or pushpin.setmaxzoomlevel ?

    I'd like certain pins to be hidden when the map loads then reveal them as the user zooms in.

    i've read that there should be a way by attaching a 'viewchange' event but i'm not sure how to implement this in practice.

    Here's my code:  How could I modify my code to make pin1 and pin2 come up only at >  zoom level 16 ?

    thanks in advance,

    jeff

    Lower Trent Conservation Authority ontario canada

    <html>
    		<head>
    		<title>Load map with navigation bar module</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 type="text/javascript">
    		var map = null;
        function getMap()       
        {
            Microsoft.Maps.loadModule('Microsoft.Maps.Themes.BingTheme', { callback: function() 
            {
                map = new Microsoft.Maps.Map(document.getElementById('myMap'), 
                { 
                      credentials: 'credentials', 
                      
    					center: new Microsoft.Maps.Location(44.249, -77.536),
    					zoom: 15,
    					enableSearchLogo: false,
    					mapTypeId: Microsoft.Maps.MapTypeId.birdseye,
    					showBreadcrumb: false,
    					theme: new Microsoft.Maps.Themes.BingTheme()
    									 
                						
    						});
           
    			 			 
    	//Add pushpins to map     
    						
    	    var pin1 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(44.2502, -77.5392),{icon: 'http://www.ltc.on.ca/icons/Binoculars.png', width: 32, height:37} ); 
                map.entities.push(pin1); 
                map.entities.push(new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(44.2502, -77.5392), {
    	    title: '<img border="0" src="http://www.ltc.on.ca/icons/Binoculars.png" alt="Sager Tower" width="32" height="37">&nbspLookout Tower', 
    	    description: 'This new lookout tower is three stories tall and offers a near-panoramic view of the area. <br/> <a href="http://www.ltc.on.ca/images/webmaps/sager/web-Sager_tower.jpg" target="_blank"><font size="1">View Image</font></a>',pushpin: pin1})); 
                
    	    var pin2 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(44.24830985, -77.539686865), {icon: 'http://www.ltc.on.ca/icons/toilets.png', width: 32, height:37}  ); 
                map.entities.push(pin2); 
                map.entities.push(new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(44.24830985, -77.539686865), {
    	    title: '<img border="0" src="http://www.ltc.on.ca/icons/toilets.png" alt="Vault Toilet" width="32" height="37">&nbspPermanent Vault Toilet', 
    	    description: 'Like all of our permanent toilets at our Conservation Areas, this one is clean and routinely maintained. <br/> <a href="http://www.ltc.on.ca/images/webmaps/sager/web-Sager_privy.jpg" target="_blank"><font size="1">View Image</font></a>',pushpin: pin2})); 
    						 
      	    var pin3 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(44.248389197, -77.5393734578), {icon: 'http://www.ltc.on.ca/icons/picnic_shelter.png', width: 32, height:37} ); 
                map.entities.push(pin3); 
                map.entities.push(new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(44.248389197, -77.5393734578), {
                title: '<img border="0" src="http://www.ltc.on.ca/icons/picnic_shelter.png" alt="Picnic Shelter" width="32" height="37">&nbspPicnic Shelter', 
    	    description: 'Contact us to book group picnics and other large events. <br/> <a href="http://www.ltc.on.ca/images/webmaps/sager/web-Sager_picnic-shelter.jpg" target="_blank"><font size="1">View Image</font></a>',pushpin: pin3}));
    	
    	    var pin4 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(44.24768061180, -77.54024709800), {icon: 'http://www.ltc.on.ca/icons/entrance.png', width: 32, height:37}  ); 
                map.entities.push(pin4); 
                map.entities.push(new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(44.24768061180, -77.54024709800), {
    	    title: '<img border="0" src="http://www.ltc.on.ca/icons/entrance.png" alt="Entrance" width="32" height="37">&nbspEntrance', 
    	    description: '<a href="http://www.ltc.on.ca/images/webmaps/sager/web-Sager_entrance.jpg" target="_blank"><font size="1">View Image</font></a>',pushpin: pin4}));
    	
    	    var pin5 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(44.24843311640, -77.54024610930),{icon: 'http://www.ltc.on.ca/icons/parking.png', width: 32, height:37}  ); 
                map.entities.push(pin5); 
                map.entities.push(new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(44.24843311640, -77.54024610930), {
    	    title: '<img border="0" src="http://www.ltc.on.ca/icons/parking.png" alt="Parking Area" width="32" height="37">&nbspParking Area', 
    	    description: 'This parking lot is well maintained and offers parking for many vehicles.  It is closed during the winter months.<br/><a href="http://www.ltc.on.ca/images/webmaps/sager/web-Sager_parking-lot.jpg" target="_blank"><font size="1">View Image</font></a>',pushpin: pin5}));
    	
    	    var pin6 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(44.25015,-77.54093),   {icon: 'http://www.ltc.on.ca/icons/hiking_green.png'}); 
                map.entities.push(pin6); 
                map.entities.push(new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(44.25015,-77.54093), {
    	    title: '<img border="0" src="http://www.ltc.on.ca/icons/hiking_green.png" alt="Hiking Trail" width="32" height="37">&nbspHiking Trail (0.5 km)', 
    	    description: 'This trail is currently unmarked, and should be approached with caution.',pushpin: pin6}));
    	
    	    var pin7 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(44.24930,-77.540046601100002),   {icon: 'http://www.ltc.on.ca/icons/hiking_orange.png'}); 
                map.entities.push(pin7); 
                map.entities.push(new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(44.24930,-77.540046601100002), {
    	    title: '<img border="0" src="http://www.ltc.on.ca/icons/hiking_orange.png" alt="Hiking Trail" width="32" height="37">&nbspHiking Trail (0.3 km)', 
                description: 'Trail with 96 steps to the base of the lookout tower.',pushpin: pin7}));
    					
    	
    	//Add polylines to the map
    
    var poly1options = {strokeColor: new Microsoft.Maps.Color(255,0,255,0), strokeThickness: 2, strokeDashArray: "1 1 1 1" }; 
    	
    var polyline1 = new Microsoft.Maps.Polyline([new Microsoft.Maps.Location(44.249976795800002,-77.539248874999998),
    new Microsoft.Maps.Location(44.250045791799998,-77.539370122700007),
    new Microsoft.Maps.Location(44.250102500899999,-77.539420587199999),
    new Microsoft.Maps.Location(44.250221241699997,-77.539534079099994),
    new Microsoft.Maps.Location(44.2502903237,-77.539605034100006),
    new Microsoft.Maps.Location(44.250503392799999,-77.539709774499997),
    new Microsoft.Maps.Location(44.250557229899997,-77.539751014000004),
    new Microsoft.Maps.Location(44.2506074844,-77.539814619300003),
    new Microsoft.Maps.Location(44.250653648799997,-77.539896668899999),
    new Microsoft.Maps.Location(44.250668924199999,-77.539989281000004),
    new Microsoft.Maps.Location(44.2507031735,-77.540092594499995),
    new Microsoft.Maps.Location(44.250720835199999,-77.540218883799994),
    new Microsoft.Maps.Location(44.250694142599997,-77.540316386499995),
    new Microsoft.Maps.Location(44.250681547200003,-77.540367599000007),
    new Microsoft.Maps.Location(44.250615766099997,-77.540541784400006),
    new Microsoft.Maps.Location(44.250482221200002,-77.540672608500003),
    new Microsoft.Maps.Location(44.250265020999997,-77.540913076899997),
    new Microsoft.Maps.Location(44.249890502600003,-77.541169449500003),
    new Microsoft.Maps.Location(44.249858885599998,-77.541166670199999),
    new Microsoft.Maps.Location(44.2498016065,-77.541097342599997),
    new Microsoft.Maps.Location(44.2496900923,-77.541080338200004),
    new Microsoft.Maps.Location(44.249729662100002,-77.541017686199993),
    new Microsoft.Maps.Location(44.249696076100001,-77.540994825499993),
    new Microsoft.Maps.Location(44.249576458,-77.540942640799997),
    new Microsoft.Maps.Location(44.249547012699999,-77.540972054700006),
    new Microsoft.Maps.Location(44.249496041100002,-77.540950411599994),
    new Microsoft.Maps.Location(44.249430910000001,-77.540955059300003),
    new Microsoft.Maps.Location(44.249368535800002,-77.540925629100002),
    new Microsoft.Maps.Location(44.249288124000003,-77.540812252500004),
    new Microsoft.Maps.Location(44.249315185900002,-77.540765905399994),
    new Microsoft.Maps.Location(44.249301158199998,-77.540703136199994),
    new Microsoft.Maps.Location(44.249264543199999,-77.540708571799996),
    new Microsoft.Maps.Location(44.249270303899998,-77.540713087699999),
    new Microsoft.Maps.Location(44.249160844999999,-77.540651267000001),
    new Microsoft.Maps.Location(44.2491572745,-77.540573076100003),
    new Microsoft.Maps.Location(44.249055862200002,-77.540532066599994),
    new Microsoft.Maps.Location(44.248949291700001,-77.5404671278)], poly1options);
         
    map.entities.push(polyline1);
    
    var poly2options = {strokeColor: new Microsoft.Maps.Color(255,255, 187, 0), strokeThickness: 2, strokeDashArray: "1 1 1 1" }; 
    	
    var polyline2 = new Microsoft.Maps.Polyline([new Microsoft.Maps.Location(44.249976795800002,-77.539248874999998),
    new Microsoft.Maps.Location(44.249976795800002,-77.5392488751),
    new Microsoft.Maps.Location(44.249401646300001,-77.539976525499995),
    new Microsoft.Maps.Location(44.249387513199999,-77.540046601100002),
    new Microsoft.Maps.Location(44.249285409300001,-77.540161335999997),
    new Microsoft.Maps.Location(44.249228233399997,-77.540208631100001),
    new Microsoft.Maps.Location(44.249177860499998,-77.540253475200004),
    new Microsoft.Maps.Location(44.249115627800002,-77.540319702700003),
    new Microsoft.Maps.Location(44.248982349199999,-77.5404511176),
    new Microsoft.Maps.Location(44.248963265500002,-77.540464392399997),
    new Microsoft.Maps.Location(44.248949291700001,-77.5404671278),
    new Microsoft.Maps.Location(44.248885944900003,-77.5405202245),
    new Microsoft.Maps.Location(44.248840314600002,-77.540548686799994),
    new Microsoft.Maps.Location(44.248791771699999,-77.540567661699995),
    new Microsoft.Maps.Location(44.248736432699999,-77.5405757937),
    new Microsoft.Maps.Location(44.2486810937,-77.540578504400003),
    new Microsoft.Maps.Location(44.2486199294,-77.5405744384),
    new Microsoft.Maps.Location(44.248554881700002,-77.540558174200001),
    new Microsoft.Maps.Location(44.248392747399997,-77.540497183499994)
    ], poly2options);
         
    map.entities.push(polyline2);
    	
    	//Add polygon to map
    			
    
            		var options = {fillColor: new Microsoft.Maps.Color(0,0,0,0), strokeColor: new Microsoft.Maps.Color(255,0,0,0), strokeThickness: 3 }; 
    						var polygon = new Microsoft.Maps.Polygon([new Microsoft.Maps.Location(44.25166600040, -77.53737620030),
                                                    new Microsoft.Maps.Location(44.25152789970, -77.53730889950),
                                                    new Microsoft.Maps.Location(44.24717820050, -77.53518930060),
                                                    new Microsoft.Maps.Location(44.24661960040, -77.53816380040),
                                                    new Microsoft.Maps.Location(44.24716620040, -77.53842290030),
    																								new Microsoft.Maps.Location(44.24701860040, -77.53920900010),
    																								new Microsoft.Maps.Location(44.24686280000, -77.54002449960),
    																								new Microsoft.Maps.Location(44.24685979970, -77.54005470020),
    																								new Microsoft.Maps.Location(44.25055719980, -77.54177599950),
    																								new Microsoft.Maps.Location(44.25056920010, -77.54172929970),
    																								new Microsoft.Maps.Location(44.25166600040, -77.53737620030)]
    																								, options);  
          																					map.entities.push(polygon);
    	
    	
            }});
    				
    				
    				
        }
    		</script>
    		</head>
    		<body onload="getMap();"> 
    		<div id='myMap' style="; width:100%; height:300px;"></div>
    		</body>
    </html>
    

    Monday, October 29, 2012 7:54 PM

Answers

  • There isn't. you will have to add an viewchangeend event to the pushpins and handle the visibility this way.

    http://rbrundritt.wordpress.com

    Friday, November 9, 2012 9:48 AM

All replies

  • There isn't. you will have to add an viewchangeend event to the pushpins and handle the visibility this way.

    http://rbrundritt.wordpress.com

    Friday, November 9, 2012 9:48 AM
  • Thank you Richard,

    if you come across any code examples for this approach please let me know !

    thanks again.

    Jeff Meyer

    Lower Trent Region Conservation Authority.

    Monday, November 12, 2012 4:26 PM
  • For anyone else like me that might come across this i've come up with the following solution; it's not perfect though. On map load the pin will flash for a moment until the viewchangeend event fires at which point the pin disappears.

             mapviewchangeend=Microsoft.Maps.Events.addHandler(map, 'viewchangeend', function(e)
    {

    var zoom=map.getZoom();

        if (zoom >= 16)
        {
        pin1.setOptions({visible: true});
        
        }
        if (zoom < 16)
        {
        pin1.setOptions({visible: false});
        
        }

    Wednesday, November 14, 2012 9:25 PM