Ext.ux.Leaflet (with offline tiles)

**digeridoopoo** · 19 Jan 2012 4:05 AM

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,

:-)

**digeridoopoo** · 24 Jan 2012 8:50 AM

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

:-)

**hotdp** · 25 Jan 2012 11:45 PM

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.

**kermit136** · 26 Jan 2012 12:51 AM

#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/

sorry for mt english

**hotdp** · 26 Jan 2012 4:31 AM

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?

**kermit136** · 27 Jan 2012 12:32 AM

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

**hotdp** · 27 Jan 2012 2:33 AM

Originally Posted by kermit136

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.

**BeKindRewind** · 12 Feb 2012 12:16 PM

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>

**geospatialscott** · 3 Apr 2012 7:47 PM

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.

**digeridoopoo** · 22 May 2012 5:13 AM

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

Ext.ux.Leaflet (with offline tiles)

Thread Tools

Search Thread

Display

Downloading tiles...

Downloading tiles...

Anyone?

Anyone?

Can't show more than one marker on each layer

Can't show more than one marker on each layer

Updated Version

Updated Version

If you check github...

If you check github...