Phil Leggetter – Software Consultant

Latest Updates: JavaScript RSS

• Geo Grandfather ESRI Makes Strides on the Web

  Phil Leggetter 1:30 pm on August 23, 2010 | 0 Permalink | Reply
  Tags: iPhone, JavaScript, Mapping, silverlight (10)

  Most of the time we write about mapping, it admittedly includes Google Maps (we list over 2000 Google Maps mashups). However, ESRI, the biggest supplier of geographic tools for the enterprise, has made huge strides this year with its tools, including its own web mapping platform, ESRI ArcGIS JavaScript API.

  Earlier this year ESRI released ArcGIS Server 10 and in the the past few months a stream of associated updates and new releases have been announced including version 2.0 of their JavaScript, Flex and Silverlight/WPF APIs. ESRI has also announced the release of a compact ArcGIS for JavaScript version designed for building applications where slower Internet speeds and network latency is an issue, such as mobile phones. They also plan to release a native iPhone API (ArcGIS API for iOS), which is slated for the third quarter of 2010, and an ArcGIS for Windows Phone API down for mid-August as part of version 2.1 API releases.

  

  “It’s exciting to hear news of ArcGIS Server instances in the cloud, coupled with the new mappings APIs,” Rob Dunfey, who has previously worked at ESRI and now works at Shell, said of the new tools. “We can start to deliver easy to use apps which answer business problems with a geo component. For example, the iPhone app for the CEO which downloads local sales stats as they move from site to site.”

  The version 2.0 API release adds new functionality and exposes a number of new features available in ArcGIS Server 10:

  • A features service which expose access to vector feature geometries and attributes.
  • Geometry service updates to facilitate Web editing.
  • Time aware layers to allow you to query or display time-aware layers using a particular slice of time.
  • Network analysis.
  • Bing Maps support updates.
  • Geocoding updates.
  • Mapping enhancements.
  • Built-in support for touch gestures in the JavaScript API.

  For a full list of features see the What’s New sections of the guides for ArcGIS Server 10, ArcGIS for JavaScript, ArcGIS API for Flex and ArcGIS API for Microsoft Silverlight / WPF.

  The ESRI mapping APIs, which are freely available, differentiate themselves from the plethora of consumer focused mapping APIs out there in their depth of GIS analysis they support, their ability to ask complex questions of spatial proximity and topology. However, to access this extra functionality on your own data you need to buy a license.

  The implications of all these APIs means that the accessibility to commercial-grade GIS technology is much greater and as developers become more familiar with GIS they could potentially start bidding for development projects that were previously only accessible to GIS development houses. It also means that platforms and devices that were previously only used by consumers can potentially be used in the field.

  With platforms such as the Web (JavaScript, Silverlight and Flex), desktop (WPF and Flex using Air) and mobile (JavaScript, Silverlight for Windows Phone and iOS) covered, and with an extra level of GIS functional, ESRI appears to have everything in place to continue being the go-to company for GIS map-based application development.

  Sponsored by

  

  

  Related ProgrammableWeb Resources

  ESRI ArcGIS JavaScript API Profile, 6 mashups

  
  

  
  
  
  
  
   

  Reply Click here to cancel reply.

  Name (required)

  Email (required)

  Web Site

  Want to paste some code here? Why not paste your code into Pastie and then paste the link here? We'll then fetch the code from there.

  Notify me of followup comments via e-mail

   

• Plotting tweets in real-time using Smoothie Charts and Kwwika

  Phil Leggetter 1:35 am on August 13, 2010 | 0 Permalink | Reply
  Tags: JavaScript, real-time web (29), Smoothie

  I noticed a tweet today about real-time JavaScript charts and couldn’t resist having a play. The charts are call Smoothie Charts and have been developed by Joe Walnes. You can read the blog post where he announced the release of them here.

  The demos that I’ve seen don’t use real-time data so I thought I would create a small demo using real-time tweets being pushed through Kwwika. I updated the Kwwika TweetStreamer component (which I must get around to putting in GitHub) to push through updates from some popular hashtags including #nowplaying, #news, #tech and a few others and then wrote a bit of code to count the number of tweet updates over an interval and push that value into a Smoothie chart. The result looks like this (Smoothie charts use Canvas so only work in some browsers. I’ve tested this demo in Firefox and Chrome):

  

  You can see the Smoothie Twitter Real-Time Charting demo using Kwwika here: http://kwwika.com/Standalone/Demos/javascript-examples/smoothie-twitter-charting/

  I’ve got the Smoothie chart showing the number of updates for each twitter hashtag, a table showing the count and a list of the tweets at the bottom.

  The code is in GitHub so feel free to fork/download and have a play yourself. You can run the code on http://localhost but in order to get the code to work on your own website you’ll need to register with Kwwika and get in touch to let us know you want access to the real-time Twitter hashtag topics.

  Update: We found a bug in the Smoothie library which Joe Walnes promptly fixed.

  One thing we’ve noticed is that the Smoothie chart stops working and throws an exception and as yet we’ve not been able to work out what the problem is due to lack of time. It’s probably something to do with not getting any updated values in a TimeSeries. This is what the exception look like in Firebug:

  
  

  If anybody can work out what the problem is please let us know. Failing that we’ll look into it when we can.

  Permalink

  | Leave a comment  »

  
  

  
  
  
  
  
   

• Kwwika Silverlight API - Chat Example

  Phil Leggetter 6:30 pm on May 10, 2010 | 0 Permalink | Reply
  Tags: API (2), Chat, Example, JavaScript, Kwwika (13), real-time data (9), real-time web (29), silverlight (10)

  This video shows a chat application built using the Kwwika JavaScript API and a chat application built using the Kwwika Silverlight API. Both applications can communicate with each other in real-time using the Kwwika service.

  We'll release the source code for both applications in the very near future.

  
  

  
  
  
  
  
   

• Defining the Kwwika API

  Phil Leggetter 12:34 pm on April 2, 2010 | 0 Permalink | Reply
  Tags: API (2), Design, JavaScript, Kwwika (13), real-time data (9), real-time web (29)

  Update: Hang on a minute. You’ve not explained what Kwwika is!
  In a really informative chat using Nurph, which has been really useful in getting feedback, it was pointed out to me by @rythie and @NeilCauldwell that I need to explain what problem Kwwika is trying to solve before asking what the API should look like.

  Why do we need Kwwika?

  There are loads of real-time technologies available at the moment. Almost all of them have a reasonable learning curve and require a developer to sort out server infrastructure, perform installation, do all sort of configuration and then finally get around to writing an application. In the same way that a lot of developers or organisations have moved into managed hosting for their websites, or more recently moved a lot of their IT infrastructure into the Cloud, Kwwika offers a managed and scalable real-time infrastructure so you can concentrate on building your Real-Time Rich Internet Application.

  The way I’m describing Kwwika at the moment is:

  Kwwika is a real-time web data sharing platform with APIs in JavaScript, Silveright, .NET, Java and C.

  An example of where Kwwika could be used

  Martin Tyler recently wrote a blog post that provides a great example of where a service like Kwwika would have been really useful. In the situation described in the blog post CricInfo could simply publish their cricket updates to their defined topic in Kwwika, maybe /CRICINFO/GAMES/INDIA-SOUTHAFRICA/, from a single server. They would then add a small piece of script to their game web page that subscribes to this topic and updates that web page whenever any new data is available. Users would see the real-time in-page updates and would no longer continue to hit “Refresh” to see if the score had updated. Kwwika would instead take the hit of the data transfer and push the live updates to the web page. This would take a massive load off of the CricInfo server and clearly save them a lot of time and infrastructure costs.

  How will I use Kwwika?

  When we launch Kwwika all you’ll need to do to use the service is:

  1. Register for Kwwika via a sign up page
  2. Define your topics that you would like to publish data to in the Kwwika dashboard e.g. /PhilLeggetter/Kwwika
  3. Find some topics with information on that you are interested in using e.g. /BBC/NEWS/SPORT/FOOTBALL (doesn’t exist – just an example – but how cool would that be!)
  4. Embed the Kwwika <script> tag in your web application or download the API for your chosen technology
  5. Start developing your Real-Time Rich Internet Application

  I think the great thing about this is that developers just use the Kwwika service and only ever need to care about developing their own application. Kwwika provides the server infrastructure so you don’t have to.

  The Kwwika API

  I’m in the middle of defining the Kwwika API and thought this would be a great opportunity to get some early feedback. We plan to have initial releases of the API for the following technologies:

  • JavaScript
  • Java
  • .NET
  • Silverlight
  • C

  The API is really simple. It has the following functionality:

  • Connect
  • Receive connection events
  • Subscribe for data
  • Receive subscription events such as errors and data updates
  • Publish data
  • Receive data publishing events (publish success or failure)
  • Disconnect

  At the moment we have two ways of thinking about the API. The following two examples are using the JavaScript API but we plan to make the APIs virtually identical between technologies with the only differences down to following the language specific standards.
  (More …)

  
  

  
  
  
  
  
   

• Using Fiddler to help develop cross domain capable JavaScript web applications

  Phil Leggetter 11:50 am on March 19, 2010 | 1 Permalink | Reply
  Tags: Development, fiddler (2), JavaScript

  This post is going to be short and sweet. “Short” because Fiddler makes working around this problem so simple. And “Sweet” because I think this is really powerful and will allow you to develop applications that show why cross domain access, in some situations, should be allowed.

  In my last post on Making cross domain JavaScript requests using XMLHttpRequest or XDomainRequest I demonstrated that in order to access a resource (web page/web service) the server needs to respond to your application/JavaScript HTTP requests with an HTTP header of “Access-Control-Allow-Origin”. The problem arises when you are trying to access a resource that doesn’t presently send the required HTTP header, but you really need it to (I’ve addressed a similar problem to this when developing Silverlight applications and the solution, again, was to use Fiddler to trick Silverlight into allowing a crossdomain Web Request). For development purposes you’ll need to add the required header to the server HTTP response in your development environment. This is really simple using Fiddler.
  
  All you need to do is add a new custom rule. You can do this via the menu option: Rules -> Customize Rules…

  

  Fiddler Customize Rules option

  This will bring up a JScript.NET file (if you don’t like the thought of JScript you can just pretend it’s JavaScript) called CustomRules.js. In that file you will see a number of functions/methods that are called at certain points during an HTTP request or response. The method we are interested in is called OnBeforeResponse and what we want to do is to add the Access-Control-Allow-Origin header to trick the browser/scripting engine into thinking that the resource we are requesting allows the cross domain request.

  static function OnBeforeResponse(oSession: Session)
  {
  	oSession.oResponse.headers.Add("Access-Control-Allow-Origin", "*");
  }
  

  The code above will add this header to all HTTP responses. You can of course add an if statement so that the header is only added when a particular condition is matched, such as a responses from http://www.leggetter.co.uk.

  static function OnBeforeResponse(oSession: Session)
  {
  	if (oSession.HostNameIs("www.leggetter.co.uk"))
  	{
  		oSession.oResponse.headers.Add("Access-Control-Allow-Origin", "*");
  	}
  }
  

  The code snippet above has not been tested

  Once you have added your code to the OnBeforeResponse method you can save and close the CustomRules.js file. Fiddler will detect that this file has been modified and compile it in the background so that it can use the new code with each request and response that it processes.

  The next time that Fiddler is processing an HTTP response it will call this method, your code will run, and the Access-Control-Allow-Origin HTTP header added to the response.

  HTTP/1.1 200 OK
  Connection: close
  Date: Fri, 19 Mar 2010 11:04:51 GMT
  Server: Microsoft-IIS/6.0
  Content-Type: text/html; charset=utf-8
  Expires: Fri, 19 Mar 2010 11:03:51 GMT
  Cache-Control: no-cache
  Pragma: no-cache
  Access-Control-Allow-Origin: *
  

  For more information on custom rules and generally developing using Fidder see their Developer Info section.

  
  

  
  
  
  
  
  
  
  
  
  
  
  
  
  

  Related posts:

  1. Making cross domain JavaScript requests using XMLHttpRequest or XDomainRequest
  2. How to make a cross domain web request with SilverLight 2
  3. Using Fiddler to trick Silverlight into allowing a crossdomain Web Request

  
  

  
  
  
  
  
   

• Making cross domain JavaScript requests using XMLHttpRequest or XDomainRequest

  Phil Leggetter 6:19 pm on March 12, 2010 | 4 Permalink | Reply
  Tags: Cross Domain, JavaScript, XDomainRequest, XmlHttpRequest

  Cross domain requests (also known as Cross Origin Resource Sharing) can be made using JavaScript without trickery, as far as I can tell, in Firefox 3.5, Safari, Google Chrome and Internet Explorer 8. This is done with all browsers except IE8 using a standard XMLHttpRequest object. The only thing required to notify the browser that JavaScript is allowed to make this request is for the server to send a Access-Control-Allow-Origin response header. Internet Explorer 8 uses an object called XDomainRequest and requires the same HTTP header. If the value of the header is * then requests are allowed from all domains. You can be more restrictive if required.
  (More …)

  
  

  
  
  
  
  
   

• How does Google Real-Time Search work?

  Phil Leggetter 2:18 pm on December 12, 2009 | 0 Permalink | Reply
  Tags: Ajax (2), Google (4), JavaScript, Le Web, real-time (5), real-time web (29)

  On or around the 12th of December 2009 Google released a feature they are calling “real-time search”.

  Our real-time search enables you to discover breaking news the moment it’s happening, even if it’s not the popular news of the day, and even if you didn’t know about it beforehand.

  Although I’d still argue that we’re not seeing the real-time web with this solution I thought I’d go in to a bit of detail about how Google are achieving this HTTP polling solution.

  Summary

  • Google are consuming and indexing real-time data from multiple social networks
  • It’s not real-time HTTP PUSH yet, it’s HTTP PULL using a polling interval
  • The polling interval seems to vary but this needs to be confirmed.
  • The polling result returns an encoded JSON response containing the next request to be made and the HTML of any new results. These results are injected into the “Latest results” section of the page
  • The HTML returned is quite verbose and could be refined
  • 87% from a sample of 30 polled requests returned no new results meaning the request was a waste of resources

  (More …)

  
  

  
  
  
  
  
   

• Which Rich Internet Application Technology will dominate?

  Phil Leggetter 1:34 am on November 7, 2009 | 4 Permalink | Reply
  Tags: Ajax (2), flash (2), Flex, JavaScript, PHP (2), real-time data (9), real-time web (29), RIA (2), silverlight (10)

  I’ve been a member of the RIA Developers Group on LinkedIn for a short while now and the other day Patrick Bay posted a link to an interesting article on Computer Weekly about the prominence of RIAs. A few comments were posted and then Patrick questioned which RIAs would “bubble to the top”.

  I think the UI revolution’s already here; now we see which ones bubble to the top!

  This got me thinking about the criteria that may determine which RIA technology would be most successful.

  I think there are a number of things that will determine which one will ultimately win, or at least become the dominant choice. At the moment I can think of three categories; Technology buy-in, Development environment and Data access capabilities and choice.
  (More …)

  
  

  
  
  
  
  
   

• Drag Drop bug in JQuery UI 1.5.3

  Phil Leggetter 4:11 pm on January 31, 2009 | 1 Permalink | Reply
  Tags: JavaScript, JavaScript JQuery UI Bug

  JQuery UI Update – 31/01/2009 @ 17:15

  Richard Worth just got in touch with me via twitter to let me know that JQuery UI 1.5.3 is only compatible with JQuery 1.2.6.

  The bug is not in jQuery UI 1.5.3, but just that 1.5.3 is only compatible with 1.2.6. Only 1.6rc5+ is compatible with jQuery 1.3

  Therefore to use JQuery with JQuery UI from the Google Ajax Libraries hosted service you need to do one of the following:

  Script includes

  <script type="text/javascript"
               src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
  </script>
  <script type="text/javascript"
               src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.jss">
  </script>

  Google Library loading

  google.load("jquery", "1.2.6");
  google.load("jqueryui", "1.5.3");

  —

  JQuery seems to be the most active of the JavaScript libraries at the moment so I decided to use it for a little project. I’ve also decided to use the Google AJAX Libraries APIs hosted service to serve up the JavaScript files. At present Google is hosting JQuery UI version 1.5.3. After a bit of investigation I’ve determined that there is a bug in the Drag and Drop functionality in this version. It would appear that the “drop” function is not fired when you try to drop a draggable element on a droppable zone. I verified this by changing the JQuery UI version to the 1.6 RC that the JQuery UI droppable demo is using at the moment. When I did this the drag and drop functionality worked as expected.

  

  This may be a know issue but I thought a small post on the matter might save other people a bit of time. I did have a look at raising a bug but there appears to be a bug in the bug tracking system.

  
  

  
  
  
  
  
   

• Phil Leggetter 9:31 pm on February 5, 2007 | 0 Permalink | Reply
  Tags: Internet (12), JavaScript, Software Development (16)

  Mapping APIs have been around for ages now and all the big guns (Google, Yahoo, Microsoft) have thrown their hat into the ring.  You can even get a Google maps plugin for wordpress plugin to allow you to easily put a map in your blog.

  Wow, it’s Edinburgh

  There’s even an API that allows you to switch between using all three – but it doesn’t look like it’s been updated in quite a while.

  All these examples exploded onto the scene but haven’t really made any major advances, that my naked eye can see, for quite a while. Why is this? Is it that they are as good as they can possibly get? Or is development stagnant for another reason? Maybe it’s lack of data! Whilst people are forever creating mashups of this on top of that with a little bit of the other thrown in the unfortunate thing for me is that there hasn’t really been anything that has blown my mind since the very early days of DHTML maps. Somebody please prove me wrong!

  Maybe it’s time for the OS to start setting the data free so that people can actually benefit from the high quality data without paying through the nose – then maybe we’ll see some great UK mashups.