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.

Comments

Comments are closed.