GMap v1.0 gone. GWT Simile Timeline

So that’s it the version 1.0 Google map is gone. I managed to complete the GWT rewrite of gTraffic just ahead of this. The uk version of the site has been forwarded to the new site (it use to point to the old for comparison purposed).

I have completed the port of Simile Timeline control to GWT. You can get it from here though I haven’t finished the example application yet. Anyone wanting to use this really needs the sample app to see how it’s done. There are hooks into the AJAX xml fetching code to allow the developer to catch the xml as it goes past. You can use this feature to render the dataset items to other visual elements like a list or tree.

The GWT version allows you to create timelines in Java like so:


    	ArrayList bandInfos = widget.getBandInfos();
    	ArrayList bandHotZones = widget.getBandHotZones();
    	ArrayList bandDecorators = widget.getBandDecorators();
    	EventSource eventSource = widget.getEventSource();

    	Theme theme = widget.getTheme();
        theme.setEventLabelWidth(400);
        
        // ---------------------------------------------------------------
        // HotZones, two events too close together so we are going to 
        // 'stretch' the time along them to make the gap between them
        // larger but still maintain the flow of time.
        // ---------------------------------------------------------------
        HotZoneBandOptions hotZone1Opts = HotZoneBandOptions.create();
        hotZone1Opts.setStart("2280 BC");
        hotZone1Opts.setEnd("1930 BC");
        hotZone1Opts.setMagnify(2);
        hotZone1Opts.setUnit(DateTime.CENTURY());
        hotZone1Opts.setMultiple(2);
        bandHotZones.add(hotZone1Opts);
        
        // ---------------------------------------------------------------
        // Band Decorators
        // ---------------------------------------------------------------
        
        // Phase 1
        SpanHighlightDecoratorOptions phase1Opts = 
                 SpanHighlightDecoratorOptions.create();
        phase1Opts.setStartDate("2900 BC");
        phase1Opts.setEndDate("2700 BC");
        phase1Opts.setColor("FFC080");
        phase1Opts.setOpacity(50);
        phase1Opts.setStartLabel("Phase");
        phase1Opts.setEndLabel("");
        phase1Opts.setTheme(theme);
        SpanHighlightDecorator phase1decorator = 
                SpanHighlightDecorator.create(phase1Opts);
        bandDecorators.add(phase1decorator);        

        // Phase 2
        SpanHighlightDecoratorOptions phase2Opts = 
                SpanHighlightDecoratorOptions.create();
        phase2Opts.setStartDate("2900 BC");
        phase2Opts.setEndDate("2400 BC");
        phase2Opts.setColor("#FFC08F");
        phase2Opts.setOpacity(50);
        phase2Opts.setStartLabel("");
        phase2Opts.setEndLabel("");
        phase2Opts.setTheme(theme);
        SpanHighlightDecorator phase2decorator = 
                SpanHighlightDecorator.create(phase2Opts);
        bandDecorators.add(phase2decorator);        

        // Phase 3
        SpanHighlightDecoratorOptions phase3Opts = 
                SpanHighlightDecoratorOptions.create();
        phase3Opts.setStartDate("2600 BC");
        phase3Opts.setEndDate("1600 BC");
        phase3Opts.setColor("#FFC000");
        phase3Opts.setOpacity(50);
        phase3Opts.setStartLabel("");
        phase3Opts.setEndLabel("");
        phase3Opts.setTheme(theme);
        SpanHighlightDecorator phase3decorator = 
                SpanHighlightDecorator.create(phase3Opts);
        bandDecorators.add(phase3decorator);        
        
        PointHighlightDecoratorOptions startPointOpts = 
                 PointHighlightDecoratorOptions.create();
        startPointOpts.setDate("4000 BC");
        startPointOpts.setColor("#FFC080");
        startPointOpts.setOpacity(50);
        startPointOpts.setTheme(theme);
        PointHighlightDecorator startPointDecorator = 
                  PointHighlightDecorator.create(startPointOpts); 
        bandDecorators.add(startPointDecorator);
        

        PointHighlightDecoratorOptions endPointOpts = 
                 PointHighlightDecoratorOptions.create();
        endPointOpts.setDate("1600 BC");
        endPointOpts.setColor("#FFC080");
        endPointOpts.setOpacity(50);
        endPointOpts.setTheme(theme);
        PointHighlightDecorator endPointDecorator = 
                 PointHighlightDecorator.create(endPointOpts); 
        bandDecorators.add(endPointDecorator);
        
        // ---------------------------------------------------------------
        // Bands
        // ---------------------------------------------------------------
        
        BandOptions topOpts = BandOptions.create();
        topOpts.setWidth("5%");
        topOpts.setIntervalUnit(DateTime.CENTURY());
        topOpts.setIntervalPixels(200);
        topOpts.setShowEventText(false);
        topOpts.setTheme(theme);
        topOpts.setDate("3701 BC");

        BandInfo top = BandInfo.create(topOpts);
        top.setDecorators(bandDecorators);
        bandInfos.add(top);

        // Bands
        BandOptions bottomOpts = BandOptions.create();
        bottomOpts.setWidth("95%");
        bottomOpts.setTrackHeight(1.3f);
        bottomOpts.setTrackGap(0.1f);
        bottomOpts.setIntervalUnit(DateTime.CENTURY());
        bottomOpts.setIntervalPixels(50);
        bottomOpts.setShowEventText(true);
        bottomOpts.setTheme(theme);
        bottomOpts.setEventSource(eventSource);
        bottomOpts.setDate("3701 BC");
        bottomOpts.setZones(bandHotZones);
        bottomOpts.setTimeZone(0);

        BandInfo bottom = BandInfo.createHotZone(bottomOpts);
        bottom.setDecorators(bandDecorators);
        bandInfos.add(bottom);

        bottom.setSyncWith(0);
        bottom.setHighlight(true);

And that’s it.

This is the timeline for Stonehenge. I wanted to include a dataset not already used. This has all the features of the existing control.

I hope to finish the example this weekend.

Timeline screenshot.

Here is a screenshot of Simile timeline implemented in GWT.

Timeline

You can zoom in using IE ctrl+/- or in Firefox right click and choose ‘View Image’.

The timeline can indicate at a glance if there are a lot of long running events like roadworks in a region or if there are many events groups around the same point in time. Events grouped together can sometimes be related like an accident then causing congestion.

Release Imminent

Version 2.0 of the new gTraffic website is now functionally complete. I have been working on a new feature which I think is pretty cool but I have been trying to fit in the development to lunchtimes and evenings and I am struggling to finish it. It’s going to be a surprise. All I will say that it is in keeping with the general idea of a ‘mashup’. I might have to put up a holding page whilst I complete it as I believe Google will discontinue the version 1 map, which the site currently uses, tomorrow.

I haven’t tried deploying a GWT site before but I _think_ everything should work okay as I have been running it though a localised installation of Apache server and it seems alright.

gTraffic v2.0

I have been making steady progress on the next version of gTraffic.info. This has become important as I mentioned previously that Google are due to terminate the v1.0 map control. I never managed to fix the straight html version of the site which uses v2.0 of the map and instead embarked on a rewrite using Googles GWT library. I have to say this was a bit of risk but it has paid off as the site now looks the business. Screenshots soon.

XML with JSON

I have added a link to an article under the ‘Pages’ link on the top left hand side of the main NetThreads page (GWT: XML with JSON). This details the steps required to load existing xml data into a GWT (Google Web Toolkit) application, convert it to JSON format and then process it using the JSON classes supplied as part of Googles toolkit samples.

This should prove useful to anyone who wants to pull in their XML data to a GWT client application. It also provides an simple illustration of extracting data from a JSON structure.

← Previous Page