Daily Archives: April 28, 2012

Determining distance in kilometers between two geocoded positions using JavaScript


 function toRad(num) {
   return num * Math.PI / 180
 }
 
 function calcDistance(lat1,lng1,lat2,lng2) {
  var R = 6371; // km
  var dLat = toRad((lat2-lat1));
  var dLon = toRad(lng2-lng1);
  var lat1 = toRad(lat1);
  var lat2 = toRad(lat2);

  var a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(lat1) * Math.cos(lat2); 
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
  var d = R * c;
		  
  return d
}

Getting Started with the Sencha Charts 2 DrawComponent

One of my Sencha Touch 2 students asked about extending the types of charts that ship with Sencha Touch Charts 2 (currently in beta) – so I helped her cobble together this little proof-of-concept:

Ext.define("Charts.view.MyDrawComponent", {
    xtype: 'mydrawcomponent',
    extend: 'Ext.draw.Component',
    requires: ['Ext.Container'],
    config: {
        viewBox: false,
        store: 'SampleStore'
    },
    initialize: function() {
        this.callParent();
        var chartObjects = [ ];
        var myStore = Ext.getStore(this.getStore());
        this.createSurface();

        /* build config object */
        var me = this;
            var mySprite = Ext.getStore(this.getStore());
            //console.log(this.getStore());
            //simultaneously load the store.
            mySprite.load({
               callback: function(records,op, success) {
                   for(var i=0; i < records.length; i++) {
                      me.surface.add({
                           type: 'circle',
                           fill: '#79BB3F',
                           radius: mySprite.getAt(i).get('wasteml'),
                           x: 100+i*100,
                           y: 100
                   });

               }
            }
            });

    }
});

Sencha Touch 2 – Implementing a Gratuitous Ext.List Tap Animation

A student in my Sencha Touch 2 class asked me recently how to trigger an animation on a list item that had been tapped by a user.

The solution is relatively straightforward (for iOS). Add the following style to your CSS:

  .rotateListViewItem {
	-webkit-transform-style: preserve-3d;
	-webkit-transition: 2s;
	-webkit-transform: rotateX(720deg);
  }

Then modify your Ext.List definition to refer to that class through the selectedCls property:

Ext.define("CrimeFinder.view.news.confess.List", {
 extend : 'Ext.dataview.List',
 xtype : 'confesslist',
 requires : ['Ext.plugin.PullRefresh', 'Ext.plugin.ListPaging'],
 config : {
   itemTpl : '{lname},{fname}',
   store : 'Confessions',
   selectedCls: 'rotateListViewItem',
   onItemDisclosure : true,
   clearSelectionOnDeactivate : true,
   plugins : [
    {
     xclass : 'Ext.plugin.PullRefresh',
     pullRefreshText : 'Pull down to see recent confessions!'
    }, 
    {
     xclass : 'Ext.plugin.ListPaging',
     autoPaging : true
    }
   ]
  }
});

Android webkit produces a whackier result that I haven’t had time to troubleshoot.