DotMap

Dotted worldmap with animated highlights a.k.a eyecandy

View larger

Close

View larger

Close

View larger

Close

View larger

Close

DotMap is a component for highlighting points of interest on a dotted worldmap.

Note: this is "eyecandy", please see the demo to get the point - and perhaps get some inspiration ;-)

Any image can be used as highlight, either displayed as if 'shining trough' the dots or appearing on top of them, and slowly (configurable) fades away.

The map image can also be customized, as long as it's a Mercator projection.

Intended for showing geo-coded data; the highlights are placed using latitude/longitude.

Sample code

class DotmapWindow extends Window {
        public DotmapWindow(String caption) {
            super(caption);

            // just to get a nice default look for the window
            getContent().setStyleName("black");
            getContent().setHeight("100%");

            final DotMap map = new DotMap();
            map.setTopCrop(87); // I've left out some stuff at the top on my map
            addComponent(map);

            // Controls follow

            HorizontalLayout hz = new HorizontalLayout();
            addComponent(hz);

            // Button that shows 5 random highlights
            Button b = new Button("5 random", new Button.ClickListener() {
                public void buttonClick(ClickEvent event) {
                    for (int i = 0; i < 5; i++) {
                        double lat = Math.random() * 180 - 90;
                        double lon = Math.random() * 360 - 180;
                        map.showHighlight(lat, lon);
                    }
                }
            });
            b
                    .setDescription("Shows 5 random highlights using the currently selected hightlight image<br/>Shown under the dotmap and will obviously will not show if they end up in the water.");
            hz.addComponent(b);

            // allow dot color change, freely=allowNewItems
            ComboBox cb = new ComboBox();
            cb.setDescription("Dot color; set freely");
            cb.setNullSelectionAllowed(false);
            cb.setWidth("7em");
            cb.setImmediate(true);
            cb.setNewItemsAllowed(true);
            cb.addItem("#000");
            cb.addItem("#444");
            cb.addItem("#00b4f0");
            cb.addItem("#ee7c08");
            cb.addItem("#40b527");
            cb.addListener(new ValueChangeListener() {
                public void valueChange(ValueChangeEvent event) {
                    map.setDotColor((String) event.getProperty().getValue());
                }
            });
            cb.setValue(map.getDotColor());
            hz.addComponent(cb);

            // allow highlight image change (preconfigured)
            cb = new ComboBox();
            cb.setDescription("Highlight image (preconfigured)");
            cb.setNullSelectionAllowed(false);
            cb.setWidth("7em");
            cb.setImmediate(true);
            cb.setNewItemsAllowed(false);
            cb.addItem("red");
            cb.addItem("green");
            cb.addItem("blue");
            cb.addItem("orange");
            cb.addItem("black");
            cb.addItem("white");
            cb.addListener(new ValueChangeListener() {
                public void valueChange(ValueChangeEvent event) {
                    map.setHighlightImage(new ThemeResource(event.getProperty()
                            .getValue()
                            + ".png"));
                }
            });
            cb.setValue("red");
            hz.addComponent(cb);

            // allow fade time change
            cb = new ComboBox();
            cb.setDescription("Fade time in msec");
            cb.setNullSelectionAllowed(false);
            cb.setWidth("7em");
            cb.setImmediate(true);
            cb.setNewItemsAllowed(false);
            cb.addItem(300);
            cb.addItem(3000);
            cb.addItem(10000);
            cb.addItem(99999);
            cb.addListener(new ValueChangeListener() {
                public void valueChange(ValueChangeEvent event) {
                    map.setFadeMsec((Integer) event.getProperty().getValue());
                }
            });
            cb.setValue(3000);
            hz.addComponent(cb);

            // Button that shows a custom highlight _over_ the map for 10
            // seconds
            b = new Button("Vaadin }>", new Button.ClickListener() {
                public void buttonClick(ClickEvent event) {
                    map.showHighlight(new Highlight(60.452647, 22.291903,
                            new ThemeResource("vaadin.png"), 10000,
                            VDotMap.ZINDEX_OVER));
                }
            });
            b
                    .setDescription("Shows the Vaadin }&gt; logo on top of the map for 10 sec.");
            hz.addComponent(b);

        }
    }

Links

• Online Demo
• Source Code

Compatibility