Wait! Looks like we don't have enough information to add this to bug database. Please follow this template bug format.
  1. #1
    Sencha User
    Join Date
    Feb 2012
    Location
    Norwalk, CT
    Posts
    8
    Vote Rating
    0
    punchy is on a distinguished road

      0  

    Question How to capture Tap events on Ext.Map?

    How to capture Tap events on Ext.Map?


    Are there any Sencha2 examples of setting listeners for Google Maps events (in Sencha2, Ext.Map).

    This is how we do it without Sencha2
    Code:
    google.maps.event.addListener( [MAP_DOM_ID], 'click', function (event) {
         [MAP_DOM_ID].draggableCursor = 'wait'
         //Do something with the returned event.latLng
    })
    We have tried various ways of doing this, but no luck as of yet.
    here are the relevant portions of our map (special thanks to Jamie Avins for fixing our last question about mapOptions so quickly
    Code:
    //Fix by Jamie Avins @ Sencha for MapOptions
    Ext.define('Ext.overrides.Map', {
        override: 'Ext.Map',
        constructor: function() {
            Ext.Map.superclass.constructor.apply(this, arguments);
            this.element.setVisibilityMode(Ext.Element.OFFSETS);
            if (!(window.google || {}).maps) {
                this.setHtml('Google Maps API is required');
            }
        },
        getMapOptions: function() {
            return Ext.merge({}, this.options || this.getInitialConfig('mapOptions'));
        }
    });
    
    Ext.application({
        name: "TestSenchaMap",
        launch: function(){
            //special mapOptions
            var myMapOptions = {
                zoom: 14,
                draggableCursor: 'crosshair',
                mapTypeId : google.maps.MapTypeId.HYBRID
            }
            //Create our Map Panel
            var mapPanel = Ext.create('Ext.Map', {
                title: "TestMap",
                iconCls: "search",
                mapOptions: myMapOptions,
                useCurrentLocation: true
            });
         //These Don't seem to do anything.
           //Not even trying to fire anything back at google.maps yet
          mapPanel.on({
             delegate:'map',
              tap: function(){console.log("map tapped")},
              click: function(){console.log("map clicked")},
             swipe: function(){console.log("map swiped")}
          });
    
            var myTabPanel = Ext.create("Ext.tab.Panel", {
                //[standard tab panel stuff]
            }
    
            if (Ext.device.Connection.isOnline()) {
                myTabPanel.add(mapPanel);
            } else { 
                Ext.device.Notification.show({
                    title: 'Network Unavailable',
                    message: 'No internet connection detected. Map disabled'
                });
            }
        } 
    }
    Last edited by punchy; 28 Feb 2012 at 2:28 PM. Reason: adjusted pseudo-code formatting

  2. #2
    Sencha - Sencha Touch Dev Team Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    21
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Google maps are a bit of a special beast. They need to let more events up through the document which we normally prevent. I'm not sure if this is the event you need, but I've added tap along with touchstart here.

    Try this override:

    Code:
    Ext.define('Ext.overrides.Map', {
        override: 'Ext.Map',
        initialize: function() {
            this.callParent();
            this.on({
                painted: 'doResize',
                scope: this
            });
            this.element.on('touchstart', 'onTouchStart', this);
            this.element.on('tap', 'onTouchStart', this);
        }

    Sencha Inc

    Jamie Avins

    @jamieavins

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Location
    Norwalk, CT
    Posts
    8
    Vote Rating
    0
    punchy is on a distinguished road

      0  

    Default Noting seems to have changed... here's more detail

    Noting seems to have changed... here's more detail


    Seeing no response, perhaps I didn't put your code in the correct spot - could you take a look below?


    Basically, what we are trying to do is drop a marker on the map, right where the user clicks (I mean taps). Firing directly at goog.maps api via javascript, we can do this by adding the listener described previously - when we get the event, with the coordinates, we add a marker, also via the goog.maps api (with a custom infoWindow) at that exact spot.


    Here's our complete sample case source:


    the Base HTML:
    HTML Code:
    <!DOCTYPE html><html>    <head>        <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript" language="javascript"></script>        <link href="app/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />        <script src="app/touch/sencha-touch-debug.js" type="text/javascript" language="javascript"></script>        <script src="app/map.js" type="text/javascript"></script>    </head>    <body>    </body></html>

    and here's the map.js:
    Code:
    Ext.Loader.setConfig({enabled:true});
    Ext.require('Ext.device.Connection');  	
    Ext.require('Ext.device.Notification');  
    Ext.require('Ext.tab.Panel'); 
    Ext.require('Ext.Map');
    
    
    Ext.define('Ext.overrides.Map', {
    	override: 'Ext.Map',
    	constructor: function() {
    		Ext.Map.superclass.constructor.apply(this, arguments);
    		this.element.setVisibilityMode(Ext.Element.OFFSETS);
    		if (!(window.google || {}).maps) {
    			this.setHtml('Google Maps API is required');
    		}
    	},
    	getMapOptions: function() {
    		return Ext.merge({}, this.options || this.getInitialConfig('mapOptions'));
    	},
    	initialize: function() {
    		this.callParent();
    		this.on({
    			painted: 'doResize',
    			scope: this
    		});
    		this.element.on('touchstart', 'onTouchStart', this);
    		this.element.on('tap', 'onTouchStart', this);
    	}
    });
    
    
    Ext.application({
    	name: "Sencha2MapDropMarker",
    	launch: function(){
    		console.log("mapOptions")
    		//special mapOptions
    		var myMapOptions = {
    			zoom: 14,
    			backgroundColor: '#000000',
    			draggableCursor: 'crosshair',
    			mapTypeId : google.maps.MapTypeId.HYBRID
    		}
    	       //Create our Map Panel
    		var mapPanel = Ext.create('Ext.Map', {
    			title: "Location",
    			iconCls: "search",
    			style:"background-color:#000000;",
    			showAnimation : 'flip',
    			hideAnimation : 'flip',
    			mapOptions: myMapOptions,
    			useCurrentLocation: true
    		});
    		//These Don't seem to do anything.
    		//Not even trying to fire anything back at google.maps yet
    		mapPanel.on({
    			delegate:'map',
    			tap: function(){console.log("map tapped")},
    			click: function(){console.log("map clicked")},
    			swipe: function(){console.log("map swiped")}
    		});
    		//Create Tab Panel
    		var myTabPanel = Ext.create("Ext.tab.Panel", {
    			fullscreen: true, 
    			tabBarPosition: 'bottom',
    			layout: 'card',	 
    			defaults: {
    				style:"background-color:#EAF2FF;",
    				showAnimation : 'fadeIn',
    				hideAnimation : 'fadeOut',
    				styleHtmlContent: true
    			},
    			items: [ 
    				{				
    					extend: 'Ext.Panel',
    					title: "Home",
    					iconCls: "home",
    					html: "Home"
    				}, {				
    					extend: 'Ext.Panel',
    					title: "About",
    					iconCls: "team",
    					style:"background-color:#000000;color:#ffffff;",
    					html: "About" 
    				}
    			]
    		});
    		if (Ext.device.Connection.isOnline()) {
    			//if device is online, add the map
    			myTabPanel.add(mapPanel);
    		} else {
    			//otherwise, no map
    			Ext.device.Notification.show({
    				title: 'Network Unavailable',
    				message: 'No internet connection detected. Map disabled'
    			});
    		}
    	}
    });

    For background, we initially tried just putting our current full-web-browser version of within your standard "html:" property, but we were struggling to get that element to get to full screen.


    We have quickly become big fans of your team's efforts, and would like to rely on Sencha2 as much as possible to keep our footprint down.


    Thanks in advance for any guidance you can offer.

  4. #4
    Sencha User
    Join Date
    Feb 2012
    Location
    Norwalk, CT
    Posts
    8
    Vote Rating
    0
    punchy is on a distinguished road

      0  

    Default forgot this in there too...

    forgot this in there too...


    Code:
     function onTouchStart(event){	console.log("onTouchStart"+event.latLng);
     }

Thread Participants: 1

Tags for this Thread