Animated GMap dropped marker with GWT

Posted by: Joshua on: October 29, 2008

• In: Codevaganza | Java
• 3 Comments

Yesterday we were evaluating GWT to be used as a wrapper for the GMap API. And one thing we need in our apps is to be able to drop marker and follow where the last marker is dropped.

Let’s say that you have configured your GMap module as explained from here. Now just replace and overwrite your Module with this code:

public class GMap implements EntryPoint {
    MapWidget map;
    static final int TIMEOUT = 30;
    List<LatLng> tmpPointList = new ArrayList<LatLng>();

    class LatitudeLongitude {
        private double latitude;
        private double longitude;

        public LatitudeLongitude(double latitude, double longitude) {
            this.latitude = latitude;
            this.longitude = longitude;
        }

        public double getLatitude() {
            return latitude;
        }

        public double getLongitude() {
            return longitude;
        }
    }

    // GWT module entry point method.
    public void onModuleLoad() {
        LatLng city = LatLng.newInstance(-34.402130, 150.899139);

        map = new MapWidget(city, 17);
        map.setSize("500px", "300px");
        map.setScrollWheelZoomEnabled(true);
        map.addControl(new MapTypeControl());

        LatitudeLongitude point;
        List<LatitudeLongitude> pointList = new ArrayList<LatitudeLongitude>();
        // Change from this point with your own coordinates.
        point = new LatitudeLongitude(-34.402130, 150.899139);
        pointList.add(point);

        point = new LatitudeLongitude(-34.402239, 150.900324);
        pointList.add(point);

        point = new LatitudeLongitude(-34.403191, 150.900188);
        pointList.add(point);

        point = new LatitudeLongitude(-34.404122, 150.899975);
        pointList.add(point);

        point = new LatitudeLongitude(-34.405421, 150.899713);
        pointList.add(point);

        point = new LatitudeLongitude(-34.406351, 150.899245);
        pointList.add(point);

        point = new LatitudeLongitude(-34.407102, 150.898747);
        pointList.add(point);

        point = new LatitudeLongitude(-34.407932, 150.898080);
        pointList.add(point);

        point = new LatitudeLongitude(-34.409443, 150.897013);
        pointList.add(point);

        point = new LatitudeLongitude(-34.410098,150.896829);
        pointList.add(point);

        point = new LatitudeLongitude(-34.411022,150.897490);
        pointList.add(point);

        point = new LatitudeLongitude(-34.411949,150.898663);
        pointList.add(point);

        point = new LatitudeLongitude(-34.412683,150.899658);
        pointList.add(point);

        Timer timer;

        int i = 0;
        for (final LatitudeLongitude ll : pointList) {
            i += 1;
            timer = new Timer() {
                public void run() {
                    addPoints(ll.getLatitude(), ll.getLongitude());
                }
            };

            timer.schedule(i * 500);
        }

        // Add some controls for the zoom level
        map.addControl(new LargeMapControl());

        // Add an info window to highlight a point of interest
        map.getInfoWindow().open(map.getCenter(),
                new InfoWindowContent("Start from here"));

        // Add the map to the HTML host page
        RootPanel.get("maps").add(map);
    }

    private void addPoints(double latitude, double longitude) {

        LatLng point = LatLng.newInstance(latitude, longitude);
        if (tmpPointList.size() == 2) {
            tmpPointList.remove(0);
        }
        tmpPointList.add(point);
        Marker marker = new Marker(point);

        map.addOverlay(marker);
        map.panTo(point);

        LatLng[] points = tmpPointList.toArray(new LatLng[0]);

        Polyline line = new Polyline(points);
        PolyStyleOptions lineStyle = PolyStyleOptions.getInstance();
        lineStyle.setColor("red");
        line.setStrokeStyle( lineStyle );
        map.addOverlay(line);
    }
}

And replace the coordinates to drop the markers as you desire. This will follow where the last marker is dropped.

About these ads

Tags: GWT