1. #11
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    409
    Vote Rating
    18
    digeridoopoo will become famous soon enough

      0  

    Default Downloading tiles...

    Downloading tiles...


    Hi,

    Thanks...but I can't get a custom popup to work properly.

    Do we have a simpler example, or can someone show me how I can get a normal popup from this example? I'm a little stuck after adding my own custom icons on the map how to do a custom popup. I'd like to have a popup with an image or video in.

    I've had some success downloading tiles locally, and referencing them so an internet connection is not needed. Need to do a bit more testing.
    Thanks,

    :-)

  2. #12
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    409
    Vote Rating
    18
    digeridoopoo will become famous soon enough

      0  

    Default Anyone?

    Anyone?


    Sorry to post again...but I'm still stuck on having a popup. I've been looking at the Geo Ext and Openlayers Sencha examples for inspiration but not having much luck adapting it.
    Thanks

    :-)

  3. #13
    Touch Premium Member hotdp's Avatar
    Join Date
    Nov 2010
    Location
    Denmark
    Posts
    603
    Vote Rating
    14
    hotdp will become famous soon enough

      0  

    Default


    I feel like a noob. But I can not get this to work. I only get af blank white screen. Can you show a working index.html with the correct import of js files.
    Its just what I need! So hope I can get this to work.

  4. #14
    Sencha User
    Join Date
    Sep 2011
    Location
    Italy
    Posts
    24
    Vote Rating
    0
    kermit136 is on a distinguished road

      0  

    Default


    #to hotdp

    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    
            <title>The Tiltle</title>
    
    
            <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
            <meta name="apple-mobile-web-app-capable" content="yes">
             <link rel="stylesheet" href="app/lib/App/css/app.css" type="text/css">
    		
    		<link rel="stylesheet" href="lib/leaflet/leaflet.css" type="text/css" media="screen" title="no title" charset="utf-8">
    		<link rel="stylesheet" href="lib/leaflet/leaflet-extension.css" type="text/css" media="screen" title="no title" charset="utf-8">
    	       
    
    
            
            
        <script src="lib/leaflet/leaflet.js" type="text/javascript" charset="utf-8"></script>
      		
        <script src="lib/leaflet/Ext.ux.Leaflet.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" src="lib/sencha-touch.js"></script>
        <script type="text/javascript" src="lib/ActiveSupport.js"></script>
        <script type="text/javascript" src="functions.js"></script>
        <script type="text/javascript" src="app.js"></script>
        <script type="text/javascript" src=controller.js"></script>
        <script type="text/javascript" src=model.js"></script>
        <script type="text/javascript" src=view.js"></script>
    <script type="text/javascript" charset="utf-8">
    
    
    	    	function onLoad()
    	    	{
    	        	document.addEventListener("deviceready", app.mainLaunch,false);
    	    	}
    	    
    	    	/* When this function is called Sencha has been initialized and is ready to roll */
    	    	function onDeviceReady()
    	    	{
    	        
    	        	// do your thing!
    	    	}
        
        	</script>
        </head>
    	<body style="background-color: black;" onload="onLoad()">
            
        </body>
    </html>
    My code is based on an MVC Pattern, you could paste the demo code (demo.js) for the view (view.js)
    and follow the pattern explained here http://www.sencha.com/learn/the-mvc-...-architecture/ orhttp://www.sencha.com/learn/a-sencha-touch-mvc-application-with-phonegap/

    s
    orry for mt english

  5. #15
    Touch Premium Member hotdp's Avatar
    Join Date
    Nov 2010
    Location
    Denmark
    Posts
    603
    Vote Rating
    14
    hotdp will become famous soon enough

      0  

    Default


    Code:
    <!DOCTYPE html><html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>The Tiltle</title>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
        <meta name="apple-mobile-web-app-capable" content="yes">
    
    
        <link rel="stylesheet" href="sencha-touch.css" type="text/css" media="screen" title="no title" charset="utf-8">
        <script type="text/javascript" src="sencha-touch.js"></script>
    
    
        <link rel="stylesheet" href="leaflet.css" type="text/css" media="screen" title="no title" charset="utf-8">
        <link rel="stylesheet" href="leaflet-extension.css" type="text/css" media="screen" title="no title" charset="utf-8">
    
    
        <script src="leaflet.js" type="text/javascript" charset="utf-8"></script>
        <script src="extension.js" type="text/javascript" charset="utf-8"></script>
    
    
        <script src="Ext.ux.Leaflet.js" type="text/javascript" charset="utf-8"></script>
    
    
        <script type="text/javascript">
            Ext.setup({
                icon: 'icon.png',
                glossOnIcon: false,
                tabletStartupScreen: 'tablet_startup.png',
                phoneStartupScreen: 'phone_startup.png',
                onReady: function() {
                    new Ext.Panel({
                        fullscreen: true,
                        layout  : 'fit',
                        items   : [
                            new Ext.ux.Leaflet()
                        ]
                    })
                }
            });
        </script>
    </head>
    </html>
    It gives me this error in the console:
    ReferenceError: Can't find variable: ActiveSupport Ext.ux.Leaflet.js:89

    What am I missing?

  6. #16
    Sencha User
    Join Date
    Sep 2011
    Location
    Italy
    Posts
    24
    Vote Rating
    0
    kermit136 is on a distinguished road

      0  

    Default


    Look at my code.
    You have to import the file ActiveSupport.js or insert the following code:

    Code:
    <script type="text/javascript" charset="utf-8">
    Ext.ns('Ext.ux');
    ActiveSupport = {
    	bind : function bind (func,object) {
    		if (typeof(object) == 'undefined') {
    			return func;
    		}
    		return function bound () {
    			return func.apply(object,arguments);
    		};
    	},
    	curry: function curry (func) {
    		if(arguments.length == 1) {
    			//console.log(func);
                return func;
    		}
            
            
    
    
    		var args = ActiveSupport.arrayFrom(arguments).slice(1);
    		return function curried() {
    			return func.apply(this,args.concat(ActiveSupport.arrayFrom(arguments)));
    		};
    	},
    	arrayFrom: function arrayFrom (object) {
    		if (!object) {
    			return [];
    		}
    		var length = object.length || 0;
    		var results = new Array(length);
    		while (length--) {
    			results[length] = object[length];
    		}
    		return results;
    	}
    };
    
    </script>
    this could fix things

  7. #17
    Touch Premium Member hotdp's Avatar
    Join Date
    Nov 2010
    Location
    Denmark
    Posts
    603
    Vote Rating
    14
    hotdp will become famous soon enough

      0  

    Default


    Quote Originally Posted by kermit136 View Post
    Look at my code.
    You have to import the file ActiveSupport.js or insert the following code:

    Code:
    <script type="text/javascript" charset="utf-8">
    Ext.ns('Ext.ux');
    ActiveSupport = {
        bind : function bind (func,object) {
            if (typeof(object) == 'undefined') {
                return func;
            }
            return function bound () {
                return func.apply(object,arguments);
            };
        },
        curry: function curry (func) {
            if(arguments.length == 1) {
                //console.log(func);
                return func;
            }
            
            
    
    
            var args = ActiveSupport.arrayFrom(arguments).slice(1);
            return function curried() {
                return func.apply(this,args.concat(ActiveSupport.arrayFrom(arguments)));
            };
        },
        arrayFrom: function arrayFrom (object) {
            if (!object) {
                return [];
            }
            var length = object.length || 0;
            var results = new Array(length);
            while (length--) {
                results[length] = object[length];
            }
            return results;
        }
    };
    
    </script>
    this could fix things

    Thanks, it works now.

  8. #18
    Sencha User
    Join Date
    Jan 2012
    Posts
    1
    Vote Rating
    0
    BeKindRewind is on a distinguished road

      0  

    Default Can't show more than one marker on each layer

    Can't show more than one marker on each layer


    I'm trying to show a Leaflet map with layers for different industries (Retail, Restaurant, Medical and Education). The markers are created from a store. The store contains 14 entries (5 retail, 5 restaurant, 2 medical and 2 education).

    I'm using the code from the demo-layers.js file, which had two markers (1 restaurant and 1 monument).

    Everything is working splendidly, except that only one entry of each industry is displayed on the map. So instead of 14 markers, only 4 show up (1 retail, 1 restaurant, 1 medical, and 1 education).

    I added a couple of screen shots to show the 4 markers that show up, and the layers that show up. The markers that aren't showing up should all be in this same vicinity.

    Any thoughts?

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
      
    <meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta charset="utf-8">
    <link href="lib/touch/resources/css/apple.css"rel="stylesheet"type="text/css" />
    <link href="lib/touch/resources/css/custom.css"rel="stylesheet"type="text/css" />
        
    <link rel="stylesheet"href="leaflet/leaflet.css"type="text/css"media="screen"title="no title"charset="utf-8">
    <link rel="stylesheet"href="leaflet/leaflet-extension.css"type="text/css"media="screen"title="no title"charset="utf-8">
    
    
    <script type="text/javascript"charset="utf-8"src="phonegap-1.3.0.js"></script>
    <script type="text/javascript"charset="utf-8"src="lib/touch/sencha-touch.js"></script>
        
    <script type="text/javascript"src="leaflet/leaflet.js"charset="utf-8"></script>
    <script type="text/javascript"src="leaflet/extension.js"charset="utf-8"></script>
    <script type="text/javascript"src="leaflet/Ext.ux.Leaflet.js"charset="utf-8"></script>
        
    <script type="text/javascript"charset="utf-8">
        Ext.ns('Ext.ux');
        ActiveSupport = {
            bind : function bind (func,object) {
                if (typeof(object) == 'undefined') {
                    return func;
                }
                return function bound () {
                    return func.apply(object,arguments);
                };
            },
            curry: function curry (func) {
                if(arguments.length == 1) {
    //console.log(func);
                    return func;
                }
                
                
                
                
                var args = ActiveSupport.arrayFrom(arguments).slice(1);
                return function curried() {
                    return func.apply(this,args.concat(ActiveSupport.arrayFrom(arguments)));
                };
            },
            arrayFrom: function arrayFrom (object) {
                if (!object) {
                    return [];
                }
                var length = object.length || 0;
                var results = new Array(length);
                while (length--) {
                    results[length] = object[length];
                }
                return results;
            }
        };
        
    </script>
    
    
    <script type="text/javascript">
    Ext.setup({
          icon: 'images/icon.png',
          phoneIcon: 'images/icon.png',
          tabletIcon: 'images/icon.png',
          tabletStartupScreen: 'images/splash.png',
          phoneStartupScreen: 'images/splash.png',
          glossOnIcon: true
          });
        
    // Creates the Database for Business Directory, with the following columns.
    Ext.regModel('Business', {
        fields: ['businessName', 'address', 'cityState', 'phone', 'website', 'industry', 'lat', 'lng', 'deal', 'description']
    });
    
    
    // Prepopulates Business Directory with business contact information    
    businessStore = new Ext.data.Store({
        model: 'Business',
        sorters: 'businessName',
        getGroupString : function(record) {
        return record.get('businessName')[0];
        },
        data: [
          { businessName: "Tacos Mexicos",                        address: "2117 E 12th St",              cityState: "Casper, WY",        phone: "3074725606",      website: "",                                      industry: "Restaurant",       lat: "42.838765",    lng: "-106.298940",    deal: "$0.50 Off Tacos Every Tuesday!",                                 description: "" },
          { businessName: "House of Sushi",                       address: "260 S Center St",             cityState: "Casper, WY",        phone: "3072341818",      website: "",                                      industry: "Restaurant",       lat: "42.847708",    lng: "-106.325081",    deal: "",                                                               description: "" },
          { businessName: "Karen and Jims",                       address: "520 S Ash St",                cityState: "Casper, WY",        phone: "3072664976",      website: "www.karenandjimsrestaurant.com",        industry: "Restaurant",       lat: "42.845465",    lng: "-106.327881",    deal: "$1 Draughts During Happy Hour!",                                 description: "" },
          { businessName: "Monsoon Indian Cuisine",               address: "232 E 2nd St, Ste 100B",      cityState: "Casper, WY",        phone: "3072375207",      website: "www.monsooncuisine.com",                industry: "Restaurant",       lat: "42.848565",    lng: "-106.323224",    deal: "Buy One, Get One Half Off Lunch Buffet on Tuesdays!",            description: "" },
          { businessName: "Poorboys Steakhouse",                  address: "739 N Center St",             cityState: "Casper, WY",        phone: "3072378325",      website: "www.poorboyssteakhouse.com",            industry: "Restaurant",       lat: "42.856605",    lng: "-106.325181",    deal: "Buy One Drink, Get One Half Off during Happy Hour!",             description: "In the Days of old, all that mattered to the western traveler was a hearty meal, a good drink, and a friendly face or two. Poor Boys Steakhouse in Casper, Wyoming, carries on that tradition today, with a relaxed atmosphere for both family and friends. Join us for our award winning U.S.D.A. hand-cut steaks, slow-roasted prime rib, or one of our many chicken, fish, or pasta entrees. We know you won’t leave hungry, just ask our friends! We’ve been making them happy for over ten years. And when your living in cattle country, that’s saying something." },     
          { businessName: "Market and More",                      address: "112 East 2nd Street",         cityState: "Casper, WY",        phone: "3075777777",      website: "www.themarketandmore.com",              industry: "Retail",           lat: "42.848565",    lng: "-106.324910",    deal: "$5 Off Purchase of $50 or More",                                 description: "With a diverse blend of products prepared on site, as well as high-end specialty grocery items, our customers find a wide variety of incredible products to make their dining experiences both fun and delicious." },
          { businessName: "Wind City Books",                      address: "152 South Center Street",     cityState: "Casper, WY",        phone: "3073156003",      website: "",                                      industry: "Retail",           lat: "42.849175",    lng: "-106.325128",    deal: "",                                                               description: "" },
          { businessName: "RW Taubert",                           address: "136 East 2nd Street",         cityState: "Casper, WY",        phone: "3072343333‎",      website: "",                                      industry: "Retail",           lat: "42.848565",    lng: "-106.324567",    deal: "",                                                               description: "" },
          { businessName: "Floral Rhino",                         address: "139 S Center St",             cityState: "Casper, WY",        phone: "3072650063",      website: "",                                      industry: "Retail",           lat: "42.849361",    lng: "-106.325142",    deal: "",                                                               description: "" },
          { businessName: "Fields Creek 104",                     address: "104 N Washington St",         cityState: "Casper, WY",        phone: "3072665388",      website: "",                                      industry: "Retail",           lat: "42.850014",    lng: "-106.309576",    deal: "",                                                               description: "Fields Creek 104 has a different and diverse selection of ever changing merchandise in the main shop as well as back shop with a large courtyard garden in between." },     
          { businessName: "Wyoming Medical Center",               address: "1233 East 2nd Street",        cityState: "Casper, WY",        phone: "3075772432",      website: "www.wmcnet.org",                        industry: "Medical",          lat: "42.848565",    lng: "-106.308794",    deal: "",                                                               description: "" },
          { businessName: "Rocky Mountain Family Medicine",       address: "2241 Farnum St, Ste 102",     cityState: "Casper, WY",        phone: "3073156133‎",      website: "www.rockymountainfamilymed.com",        industry: "Medical",          lat: "42.836924",    lng: "-106.297331",    deal: "",                                                               description: "" },
          { businessName: "Casper College",                       address: "125 College Drive",           cityState: "Casper, WY",        phone: "3072682100",      website: "www.caspercollege.edu",                 industry: "Education",        lat: "42.833965",    lng: "-106.324342",    deal: "",                                                               description: "" },
          { businessName: "Kelly Walsh High School",              address: "3500 East 12th Street",       cityState: "Casper, WY",        phone: "3072332000",      website: "www.kellywalsh.org",                    industry: "Education",        lat: "42.838865",    lng: "-106.280579",    deal: "",                                                               description: "" },
        ]
        });        
        
        
    // Starts the Application    
    new Ext.Application({
            launch: function() {
        
            
    // Holds the Details of the Business when selected from the list.
            businessDetailPanel = new Ext.Panel({
                id: 'businessInfo',
                tpl: '<div id="businessContactInfo"><div id="businessInfo"><p><span style="font-weight: bold; color: #e90026; font-size: 1.25em; text-transform: uppercase; text-shadow: rgba(0, 0, 0, 1) .05em .05em 0;">{businessName}</span><br />{address}<br />{cityState}</p></div><div id="businessCall"><p class="callButton"><a href="tel:{phone}"><img src="images/75-phone.png" style="width: 1.5em; height: 1.5em;" /></a></p></div></div><div id="businessDealInfo"><p>{deal}</p></div><div id="businessDescriptionInfo"><p>{description}</p></div>',
                                                scroll: 'vertical',
                                                dockedItems: [{
                   xtype: 'toolbar',
                      items: [{
                          text: 'Back',
                          ui: 'button',
                          handler: function() {
                            Viewport.setActiveItem('businessList', {type:'slide', direction:'right'});
                          }
                        
                      }]
                }]
            });
            
            
            wyomingMap = new Ext.ux.Leaflet({
                title: 'Map',
                iconCls: 'maps',
                mapOptions: {
                   center: [42.583, -107.403],
                   zoom: 6
                },
                markers: {
                   data: businessStore,
                   latField: 'lat',
                   lngField: 'lng',
                   titleField: 'businessName',
                   typeField: 'industry',
                   iconSize: { w: 32, h: 37 }
                },
                getMarkerImage : function (type) {
    if (type == 'Restaurant') return'leaflet/images/restaurant.png';
    elseif (type == 'Retail') return'leaflet/images/retail.png';
    elseif (type == 'Education') return'leaflet/images/education.png';
    elseif (type == 'Medical') return'leaflet/images/medical.png';
    elsereturn'leaflet/images/marker.png';
                }
            });
                                        
                                            
    // Holds the Application.                                            
            Viewport = new Ext.TabPanel({
                fullscreen: true,
                layout: 'card',
                tabBarDock: 'bottom',
                items: [
                    {
                            // Home Card
                            title: 'Home',
                            iconCls: 'home',
                            xtype: 'carousel',
                            items: [{
                                     html: '<div class="panelContent"><img src="images/page-1.png" style="width: 100%; height: 100%" /></div>',
                                     cls: 'card card1'
                                 },{
                                     html: '<div class="panelContent"><img src="images/page-2.png" style="width: 100%; height: 100%" /></div>',
                                     cls: 'card card2'
                                 },{
                                     html: '<div class="panelContent"><img src="images/page-3.png" style="width: 100%; height: 100%" /></div>',
                                     cls: 'card card3'
                                 },{
                                     html: '<div class="panelContent"><img src="images/page-4.png" style="width: 100%; height: 100%" /></div>',
                                     cls: 'card card4'
                                 },{
                                     html: '<div class="panelContent"><img src="images/page-5.png" style="width: 100%; height: 100%" /></div>',
                                     cls: 'card card5'
                            }]
                    }, {
                            title: 'List',
                            iconCls: 'bookmarks',
                            id: 'businessList',
                            store: businessStore,
                            xtype: 'list',
                            itemTpl: '<div class="business">{businessName}</div>',
                            grouped: true,
                            indexBar: true,
                            onItemSelect: function(record, btn, index) {
                                businessDetailPanel.update(record.data);
                                Viewport.setActiveItem('businessInfo');
                            }
                    }, wyomingMap, {
                            // About Us Card
                            title: 'About Us',
                            iconCls: 'info',
                            scroll: 'vertical',
                            html: '<div class="panelContent" style="padding: 1em;"><p>Simply put, 307 First is a new way of thinking local. We think of Wyoming as one big community, a community where we’re all in this together.</p><p>If we are active in supporting our in-state businesses, healthcare providers, contractors, etc., we can increase our tax base, hire more employees, and otherwise make Wyoming a better place to live, work, and play.</p><p>You can learn more, and become a member, at <a href="http://www.307first.com/" target="_blank">307first.com</a>.</p></div>'
                    }, businessDetailPanel]             
                             
                });
            }
        });
    </script>
    </head>
        
    <body></body>
    </html>
    Attached Images

  9. #19
    Sencha User
    Join Date
    Apr 2012
    Posts
    1
    Vote Rating
    0
    geospatialscott is on a distinguished road

      0  

    Default Updated Version

    Updated Version


    Do you have an updated version of this code? I'm very interested in being able to work with offline .mbtile files using phonegap and leaflet. Any direction would be appreciated.

  10. #20
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    409
    Vote Rating
    18
    digeridoopoo will become famous soon enough

      0  

    Default If you check github...

    If you check github...


    Hi,

    if you check Github, there are 2 versions of a Leaflet plugin that works with Sencha Touch 2. One works better than the other (I think from memory Vinyl Fox's one when placed in a Tab panel unloads itself when clicking on another tab and gives an error when clicking on it again). Try the other one it works well.

    I have successfully managed to download a nice map style (Blue Marble) from the Mapbox website in .mbtiles format. I then managed to unarchive it using mb-util. This gave a me a folder of .pngs that I was then able to reference locally in the leaflet link part. I'm assuming this will work great offline with Phonegap.

    My next problem (which I have not looked into yet) is how to get layers using this Leaflet Sencha Touch 2 plugin....and if it works in a similar way to the above plugin which worked for v1.

    Has anyone got layers working yet using Sencha Touch 2?

    Thanks