Directory

← Back

DotMap

Dotted worldmap with animated highlights a.k.a eyecandy

Author

Rating

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);

        }
    }

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Updated to work with Vaadin 7

Released
2012-04-13
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 7.0+
Vaadin 6.0+ in 0.9.1
Browser
Internet Explorer
Internet Explorer
Internet Explorer
Firefox
Opera
Safari
Google Chrome

DotMap - Vaadin Add-on Directory

Dotted worldmap with animated highlights a.k.a eyecandy DotMap - Vaadin Add-on Directory
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.
Online