none
Touch Events Not Getting Called

    Question

  • I am trying to create some clickable shapes and pushpins that will allow a user to navigate to the respective 'territory' editor with ease.  I have been able to get it to work using most any browser and pc (primary click events).  However, I need the map to work on telephones and mobile devices too, many running android.  I am using V7 of the ajax control. Below is a sample/demo of the code.  It seems to work fine on the SDK interactive site as well, however it does not work when I run the code on my server, remember, only when using mobile devices.  An odd phenominon is that one 'territory' (2x) does work, the others though do no respond the touch events, yet they are all created the same way.   I have roughly 600 or so of these 'territories' that will eventually get placed on the map.  Can anyone explain why all the touch events are not getting called, but a few in the middle are?

    I have the code set right now to run in the SDK interactive at http://www.bingmapsportal.com/isdk/ajaxv7#CreateMap1 it can be modified pretty easy to run in asp.net page if you need to see it.

    <script type="text/javascript">
    
    //unrem these lines and a few lines at the top of the GetMapSuccess function if you choose to run this in a website and not the bing maps sdk interactive
        //assign our variables
    	//var map = null;
    	//var searchManager = null;
    	
        // Load the Map after the page loads
        //Sys.Application.add_load(GetMap);
    
    //Rem the following line if you load this for your site.
    	GetMapSuccess();
    
    	// *****************************************************
        // Map Events
        // *****************************************************
    	function Shape_Click(e)
    	{
    		alert('Hello World Shape_Click');
    		var isTouch = false;
    		var isPrimary = false;
    		if (e.isTouchEvent === 'undefined' || e.isTouchEvent === 'null' )
    		{
    			isTouch = false;
    			
    		}
    		else
    		{
    			isTouch = e.isTouchEvent;
    		}
    		
    		if (e.isPrimary == 'undefined' || e.isPrimary === 'null')
    		{
    			isPrimary = true;
    		}
    		else
    		{
    			isPrimary = e.isPrimary;
    		}
    		
    	
    		if (isTouch || isPrimary)
    		{
    			alert('Touch Event Triggered P: ' + isPrimary + ' T:' + isTouch);
    			
            	if (e.target.Name != 'null')
            	{
    	            alert(e.target.Name + '\n' + e.target.MyUrl);
    	            //window.location.href = e.target.MyUrl;
                }
            }
    	}
    	
    	function Shape_DblClick(e)
    	{
    		var isTouch = false;
    		var isPrimary = false;
    		if (e.isTouchEvent === 'undefined' || e.isTouchEvent === 'null' )
    		{
    			isTouch = false;
    			
    		}
    		else
    		{
    			isTouch = e.isTouchEvent;
    		}
    		
    		if (e.isPrimary == 'undefined' || e.isPrimary === 'null')
    		{
    			isPrimary = true;
    		}
    		else
    		{
    			isPrimary = e.isPrimary;
    		}
    	
    		if (isTouch)
    		{
    		
    			// alert("Touch Event Triggered P: " + isPrimary.toString() + " T:" + isTouch.toString());
    
            	if (e.target.Name != 'null')
            	{
    	            // alert(e.target.Name + '\n' + e.target.MyUrl);
    	            
                }
            }
    	}
    
    	function Shape_MouseOver(e)
    	{
    		var isTouch = false;
    		var isPrimary = false;
    		if (e.isTouchEvent === 'undefined' || e.isTouchEvent === 'null' )
    		{
    			isTouch = false;
    			
    		}
    		else
    		{
    			isTouch = e.isTouchEvent;
    		}
    		
    		if (e.isPrimary == 'undefined' || e.isPrimary === 'null')
    		{
    			isPrimary = true;
    		}
    		else
    		{
    			isPrimary = e.isPrimary;
    		}
    	
    		if (!isTouch)
    		{
    	    	if (e.target.Name != 'null')
    	    	{
    				//alert(e.target.Name + '\n' + e.target.MyUrl);
    	        }
            }
    	}
    	
    	
    	function clearMap(totalClear, clearTerritories)
    	{
    		if (totalClear)
    		{
    			map.entities.clear();
    		}
    		else
    		{
    	
    			if (map.entities.getLength() > 0)
    			{
    				var entCount = map.entities.getLength();
    				var entity = null;
    				for (i = 1; i <= map.entities.getLength() ; i++)
    				{
    					entity =  map.entities.get(i);
    					
    					if (entity != null)
    					{
    						if (typeof entity === 'Microsoft.Maps.EntityCollection')
    						{		
    							if (entity.getLength() > 20)
    							{
    								if (clearTerritories == false)
    								{
    									map.entities.remove(entity);
    									i = i-1;
    								}
    							}
    							else						
    							{
    								if (clearTerritories)
    								{
    									map.entities.remove(entity);
    									i = i-1;
    								}
    							}
    						}
    						else
    						{
    							if (clearTerritories == false)
    							{
    								map.entities.remove(entity);
    								i = i-1;
    							}
    						}
    						
    					}
    				
    				}
    			}
    		}
    	}
    
        // *****************************************************
        // Map Setup Code
        // *****************************************************
        function GetMap()
        {
            PageMethods.GetMapKey(GetMapSuccess, GetMapFail);
        }
        function GetMapSuccess(result)
        {           
    //unrem these lines if you choose to run this in an asp.net page:
                //var MapKey = result;
    	        //var mapOptions ={
    	        //    credentials: MapKey,
    	        //    mapTypeId: Microsoft.Maps.MapTypeId.road
    	        //}
    	        
    	        //if (map==null)
    	        //{
    	        //	map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions);
    	        //}
        
        
            	map.setView({ zoom: 14, center: new Microsoft.Maps.Location(39.648, -104.908) })
    
    		    // *************************************
    		    // Configure Map Shapes
    		    // *************************************
    	    
    
    	       	// -------------------------------------
    	       	// Build Shapes
    	       	// -------------------------------------
    			clearMap(true, false);
    			var latlon = new Microsoft.Maps.Location(39.6705309860408, -104.907313780859)
    			
    			var territoryOptions = {bubble: true, visible: true};
    			var territory = new Microsoft.Maps.EntityCollection(territoryOptions);
    
    
    			var shapeOptions6 = {bubble: true, visible: true};
    			var shape6 = new Microsoft.Maps.EntityCollection(shapeOptions6);
    			var shapeOptions6 = {bubble: true, visible: true};
    			var shape6 = new Microsoft.Maps.EntityCollection(shapeOptions6);
    			var polygonOptions6 = {fillColor: new Microsoft.Maps.Color(15,255,0,0), strokeColor: new Microsoft.Maps.Color(255,0,0,0), strokeThickness: 1, visible: true};
    			var polygon6 = new Microsoft.Maps.Polygon([new Microsoft.Maps.Location(39.678269578144, -104.907614355907), new Microsoft.Maps.Location(39.6782627049834, -104.906193623319), new Microsoft.Maps.Location(39.6781125012785, -104.905606219545), new Microsoft.Maps.Location(39.6776821743697, -104.904950587079), new Microsoft.Maps.Location(39.677381599322, -104.904568037018), new Microsoft.Maps.Location(39.6772040706128, -104.904458737001), new Microsoft.Maps.Location(39.6770606562495, -104.904260672629), new Microsoft.Maps.Location(39.6765859052539, -104.903755243868), new Microsoft.Maps.Location(39.6706163138151, -104.903803104535), new Microsoft.Maps.Location(39.6701894234866, -104.903721129522), new Microsoft.Maps.Location(39.6676896046847, -104.903659606352), new Microsoft.Maps.Location(39.6677100565284, -104.905032478273), new Microsoft.Maps.Location(39.6683555468917, -104.905134988949), new Microsoft.Maps.Location(39.6723238751292, -104.907375304028), new Microsoft.Maps.Location(39.6756945736706, -104.908269988373), new Microsoft.Maps.Location(39.6771562099457, -104.907614355907)], polygonOptions6);
    			polygon6.MyUrl = 'Editor/EditTerritories.aspx?name=3B;3B;3Tel2;3Tel3;&category=0&showoption=6';
    			polygon6.Name = '3B;3B;3Tel2;3Tel3;';
    			polygon6.ShapeID = 6;
    			shape6.push(polygon6);
    			attachclick6 = Microsoft.Maps.Events.addHandler(polygon6, 'click', Shape_Click);
    			attachdblclick6 = Microsoft.Maps.Events.addHandler(polygon6, 'dblclick', Shape_DblClick);
    			
    			var shapeOptions12 = {bubble: true, visible: true};
    			var shape12 = new Microsoft.Maps.EntityCollection(shapeOptions12);
    			var infoboxOptions12 = {title: '3B', description: '3B',  visible: false};
    			var infobox12 = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(39.6704728994519, -104.90476610139), infoboxOptions12);
    			infobox12.Name = '3B';
    			infobox12.ShapeID = 12;
    			shape12.push(infobox12);
    			var shapeOptions12 = {bubble: true, visible: true};
    			var shape12 = new Microsoft.Maps.EntityCollection(shapeOptions12);
    			var pushpinOptions12 = {icon: '/Images/lblTerritory3B.jpg', infobox: infobox12, visible: true};
    			var pushpin12 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(39.6704728994519, -104.90476610139),pushpinOptions12)
    			pushpin12.MyUrl = 'Editor/EditTerritories.aspx?name=3B&category=0&showoption=6';
    			pushpin12.Name = '3B';
    			pushpin12.ShapeID = 12;
    			shape12.push(pushpin12);
    			attachclick12 = Microsoft.Maps.Events.addHandler(pushpin12, 'click', Shape_Click);
    			attachdblclick12 = Microsoft.Maps.Events.addHandler(pushpin12, 'dblclick', Shape_DblClick);
    			attachmouseover12 = Microsoft.Maps.Events.addHandler(pushpin12, 'mouseover', Shape_MouseOver);
    
    
    			var shapeOptions15 = {bubble: true, visible: true};
    			var shape15 = new Microsoft.Maps.EntityCollection(shapeOptions15);
    			var shapeOptions15 = {bubble: true, visible: true};
    			var shape15 = new Microsoft.Maps.EntityCollection(shapeOptions15);
    			var polygonOptions15 = {fillColor: new Microsoft.Maps.Color(15,255,0,0), strokeColor: new Microsoft.Maps.Color(255,0,0,0), strokeThickness: 1, visible: true};
    			var polygon15 = new Microsoft.Maps.Polygon([new Microsoft.Maps.Location(39.6783344540745, -104.925939710811), new Microsoft.Maps.Location(39.6783583424985, -104.9330977723), new Microsoft.Maps.Location(39.6768045052886, -104.931957079098), new Microsoft.Maps.Location(39.674553964287, -104.93022906594), new Microsoft.Maps.Location(39.6740177739412, -104.929764624685), new Microsoft.Maps.Location(39.6737650595605, -104.929648535326), new Microsoft.Maps.Location(39.6719857491553, -104.928398625925), new Microsoft.Maps.Location(39.6760804764926, -104.923221291974), new Microsoft.Maps.Location(39.6769342571497, -104.923214502633), new Microsoft.Maps.Location(39.6777846012264, -104.923214502633), new Microsoft.Maps.Location(39.6783275809139, -104.923214502633)], polygonOptions15);
    			polygon15.MyUrl = 'Editor/EditTerritories.aspx?name=1A;1APT2;1APT1;1BUS1;&category=0&showoption=6';
    			polygon15.Name = '1A;1APT2;1APT1;1BUS1;';
    			polygon15.ShapeID = 15;
    			shape15.push(polygon15);
    			attachclick15 = Microsoft.Maps.Events.addHandler(polygon15, 'click', Shape_Click);
    			attachdblclick15 = Microsoft.Maps.Events.addHandler(polygon15, 'dblclick', Shape_DblClick);
    			
    			var shapeOptions43 = {bubble: true, visible: true};
    			var shape43 = new Microsoft.Maps.EntityCollection(shapeOptions43);
    			var shapeOptions43 = {bubble: true, visible: true};
    			var shape43 = new Microsoft.Maps.EntityCollection(shapeOptions43);
    			var polygonOptions43 = {fillColor: new Microsoft.Maps.Color(15,255,0,0), strokeColor: new Microsoft.Maps.Color(255,0,0,0), strokeThickness: 1, visible: true};
    			var polygon43 = new Microsoft.Maps.Polygon([new Microsoft.Maps.Location(39.6783275809139, -104.923221291974), new Microsoft.Maps.Location(39.6760600246489, -104.923173515126), new Microsoft.Maps.Location(39.6760429255664, -104.9222582113), new Microsoft.Maps.Location(39.6760326996446, -104.922169446945), new Microsoft.Maps.Location(39.6759301889688, -104.922148995101), new Microsoft.Maps.Location(39.6756877843291, -104.921691343188), new Microsoft.Maps.Location(39.6749364305288, -104.920803448185), new Microsoft.Maps.Location(39.6749329939485, -104.917545402423), new Microsoft.Maps.Location(39.674915978685, -104.913057982922), new Microsoft.Maps.Location(39.6783344540745, -104.913057982922)], polygonOptions43);
    			polygon43.MyUrl = 'Editor/EditTerritories.aspx?name=2APT1;2BUS1;2TEL1;2TEL2;&category=0&showoption=6';
    			polygon43.Name = '2APT1;2BUS1;2TEL1;2TEL2;';
    			polygon43.ShapeID = 43;
    			shape43.push(polygon43);
    			attachclick43 = Microsoft.Maps.Events.addHandler(polygon43, 'click', Shape_Click);
    			attachdblclick43 = Microsoft.Maps.Events.addHandler(polygon43, 'dblclick', Shape_DblClick);
    			
    			var shapeOptions44 = {bubble: true, visible: true};
    			var shape44 = new Microsoft.Maps.EntityCollection(shapeOptions44);
    			var infoboxOptions44 = {title: '2APT1', description: '2APT1',  visible: false};
    			var infobox44 = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(39.6762990765274, -104.921698216349), infoboxOptions44);
    			infobox44.Name = '2APT1';
    			infobox44.ShapeID = 44;
    			shape44.push(infobox44);
    			var shapeOptions44 = {bubble: true, visible: true};
    			var shape44 = new Microsoft.Maps.EntityCollection(shapeOptions44);
    			var pushpinOptions44 = {icon: '/Images/lblTerritory2APT1.jpg', infobox: infobox44, visible: true};
    			var pushpin44 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(39.6762990765274, -104.921698216349),pushpinOptions44)
    			pushpin44.MyUrl = 'Editor/EditTerritories.aspx?name=2APT1&category=0&showoption=6';
    			pushpin44.Name = '2APT1';
    			pushpin44.ShapeID = 44;
    			shape44.push(pushpin44);
    			attachclick44 = Microsoft.Maps.Events.addHandler(pushpin44, 'click', Shape_Click);
    			attachdblclick44 = Microsoft.Maps.Events.addHandler(pushpin44, 'dblclick', Shape_DblClick);
    			attachmouseover44 = Microsoft.Maps.Events.addHandler(pushpin44, 'mouseover', Shape_MouseOver);
    			
    			var shapeOptions328 = {bubble: true, visible: true};
    			var shape328 = new Microsoft.Maps.EntityCollection(shapeOptions328);
    			var infoboxOptions328 = {title: '1A', description: '1A',  visible: false};
    			var infobox328 = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(39.672566363588, -104.928125375882), infoboxOptions328);
    			infobox328.Name = '1A';
    			infobox328.ShapeID = 328;
    			shape328.push(infobox328);
    			var shapeOptions328 = {bubble: true, visible: true};
    			var shape328 = new Microsoft.Maps.EntityCollection(shapeOptions328);
    			var pushpinOptions328 = {icon: '/Images/lblTerritory1A.jpg', infobox: infobox328, visible: true};
    			var pushpin328 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(39.672566363588, -104.928125375882),pushpinOptions328)
    			pushpin328.MyUrl = 'Editor/EditTerritories.aspx?name=1A&category=0&showoption=6';
    			pushpin328.Name = '1A';
    			pushpin328.ShapeID = 328;
    			shape328.push(pushpin328);
    			attachclick328 = Microsoft.Maps.Events.addHandler(pushpin328, 'click', Shape_Click);
    			attachdblclick328 = Microsoft.Maps.Events.addHandler(pushpin328, 'dblclick', Shape_DblClick);
    			attachmouseover328 = Microsoft.Maps.Events.addHandler(pushpin328, 'mouseover', Shape_MouseOver);
    
    			territory.push(shape6);
    			territory.push(shape12);
    			territory.push(shape15);
    			territory.push(shape43);
    			territory.push(shape44);
    			territory.push(shape328);			
    			
    			map.entities.push(territory);
    			map.setView( {center: latlon, zoom:14});
    }
    
    function GetMapFail(result)
    {
    	alert('Sorry, The Interactive Map Could Not Be Loaded:' + result);
    }
    
    </script>

    Friday, November 01, 2013 2:43 PM

Answers

All replies