Home » Enterprise Java » Vaadin » Vaadin Maps Example

About Jesus Boadas

Jesus Boadas
I'm a self taught programmer, I began programming back in 1991 using an IBM A10 mainframe with Pascal an Assembler IBM 360/70 emulator and Turbo C on a X86 PC, since that I work for the banking industry with emerging technologies like Fox Pro, Visual Fox Pro, Visual Basic, Visual C++, Borland C++, lately I moved out to the Airline industry, leading designing and programming in-house web applications with Flex, Actionscript, PHP, Python and Rails and in the last 7 years I focused all my work in Java, working on Linux servers using GlassFish, TomCat, Apache and MySql.

Vaadin Maps Example

Google Maps is a Web-based service that provides information about geographical regions and sites around the world.
 
 
 
 
 
 
 
 
 

1. The tools

  • Java JDK 8
  • Latest Eclipse Mars
  • Vaadin 7.6.8
  • Tomcat Server 8

2. Introduction

In this example we are going to use Google maps from our Vaadin application.We are also going to use an add-on to make Google maps available in our application.
The application is going to load Google maps and then go to a specific location in the world. We are going to create a window with a few widgets to navigate in Google maps using Vaadin.
With the controls we can introduce the latitude and the longitude and then navigate to that place in the map. You can set markers to a specific location and delete these markers.

3. Prerequisites

  • JDK installed
  • Eclipse Mars installed and working
  • Vaadin plug-in installed
  • Tomcat 8 installed and running

4. Set up the project

In the file menu choose File -> New -> Other

01 New Project

1 New Project

Now from the list choose Vaadin 7 project

02 Vaadin Project

2 Vaadin Project

Click next and name your project then click finish.

5. The example

5.1 Configure the add-on

We are going to use this wonderful add-on from here.

To configure the add-on we are using Ivy, but you can use Maven or configure the add-on manually.

5.1.1 Edit ivy.xml

Edit the file ivy.xml in the project root. Then add the following lines inside the dependencies tag.

dependencies

	<!-- Google Maps Addon -->	
	<dependency org="com.vaadin.tapio" name="googlemaps" rev="1.3.2" />

This tells ivy what is the name of the plugin.

5.1.2 Edit ivysettings.xml

Edit the file ivysettings.xml in the project root, and add the following lines inside the resolvers tag.

resolvers

	<!-- Vaadin Google Maps Add On -->	
	<ibiblio name="vaadin-addons" usepoms="true" m2compatible="true" 
   		root="http://maven.vaadin.com/vaadin-addons" />			

This tells ivy where to find the plugin. Now ivy is going to download all dependencies needed by the add-on.

5.2 Edit the styles

We are going to use some custom styles in our application.
Open the styles file:
[PROJECT_ROOT]/WebContent/VAADIN/Themes/[PROJECT_NAME]/[PROJECT_NAME].scss

3 Styles

3 Styles

5.2.1 Windows contents

The window’s contents is the client area of the window widget.

Windows contents

	.v-window-mywindowstyle .v-window-contents {
		background: #f8f8cd;
	}

We set the color to a light yellow.

5.2.2 Windows header

The header is the top of the window when we put the title.

Header

	.v-window-mywindowstyle .v-window-outerheader {
		background: #0c2640;
	} 

	.v-window-mywindowstyle .v-window-header {
    	font-weight: bold;
		color: white;
	}

We set the background color to a dark blue and the text white with a bold font.

5.2.3 Error labels

We are going to create two labels to show the input errors.

Error labels

	.v-label-mylabelstyle {
    	color: white;
    	text-align: center;
    	background-color: red;	
    	border-color: white;
    	font-weight: bold;
	}

We set the background color of the label to red and center the text. We also set the text bold and add a border to the label.

5.3 Main Class

5.3.1 Local Variables

We are going to use two local variables in our application. The variable for the map itself and a variable for the api key.

Local variables

    private GoogleMap googleMap;
    private final String apiKey = "api-key";

private GoogleMap googleMap; A local variable to the map instance.
private final String apiKey = "api-key"; The api key from Google.

The Api key is a key that allows you to use the Google Maps product. To obtain this key you need to log in, in Google developers and create a new project, generate the key for Google maps and activate the project.

5.3.2 The layout

We are going to use a vertical layout as our main layout.

Create the layout

        VerticalLayout rootLayout = new VerticalLayout();
        rootLayout.setSizeFull();
        setContent(rootLayout);

VerticalLayout rootLayout = new VerticalLayout(); Creates a vertical layout.
rootLayout.setSizeFull(); Sets the size of the layout to full.
setContent(rootLayout); Sets the vertical layout as our main content layout.

5.3.3 Create the map

We are going to initialize the map.

Create the map

        googleMap = new GoogleMap(apiKey, null, null);
        googleMap.setZoom(10);
        googleMap.setSizeFull();
        googleMap.setMinZoom(4);
        googleMap.setMaxZoom(16);

        Panel mapsPanel = new Panel();
        mapsPanel.setSizeFull();
        mapsPanel.setContent(googleMap);
        rootLayout.addComponent(mapsPanel);

googleMap = new GoogleMap(apiKey, null, null); Initializes the instance of the map using the api key.
googleMap.setZoom(10); Sets the default zoom.

googleMap.setSizeFull(); Sets the size of the map to fill all the client area.
googleMap.setMinZoom(4); Sets the minimum zoom of the map.

googleMap.setMaxZoom(16); Sets the maximum zoom of the map.
Panel mapsPanel = new Panel(); Creates a panel to put the map.

mapsPanel.setSizeFull(); Fills the entite client area.
mapsPanel.setContent(googleMap); Sets the content of the panel to the map.

rootLayout.addComponent(mapsPanel); Adds the map to the layout.

5.3.4 Create the tool box window

To control the map we are going to create a floating window. You can move this window to view behind it.

Create the window

        Window mapToolBox = new Window("Map Tool Box");
        mapToolBox.setClosable(false);
        mapToolBox.setResizable(false);
        mapToolBox.setPosition(10, 100);
        mapToolBox.setWidth("350px");
        mapToolBox.setHeight("520px");
        mapToolBox.addStyleName("mywindowstyle");
        UI.getCurrent().addWindow(mapToolBox);

Window mapToolBox = new Window("Map Tool Box"); Creates the new window.
mapToolBox.setClosable(false); Disables the close button of the window.

mapToolBox.setResizable(false); Disables resize on the window.
mapToolBox.setPosition(10, 100); Sets the initial position of the window.

mapToolBox.setWidth("350px"); Sets the width of the window.
mapToolBox.setHeight("520px"); Sets the height of the window.

mapToolBox.addStyleName("mywindowstyle"); Assigns the style to the window.
UI.getCurrent().addWindow(mapToolBox); Adds the window to the UI.

5.3.5 Add the widgets to the window

The window contents

        HorizontalLayout latlonLayout = new HorizontalLayout();
        latlonLayout.setSpacing(true);
        
        TextField latitude = new TextField("Lat");
        latitude.setWidth("100px");
        latitude.setNullSettingAllowed(true);
        latitude.setNullRepresentation("0.0");
        
        TextField longitude = new TextField("Long");
        longitude.setWidth("100px");
        longitude.setNullSettingAllowed(true);
        longitude.setNullRepresentation("0.0");
        
        latlonLayout.addComponent(latitude);
        latlonLayout.addComponent(longitude);
        
        HorizontalLayout infoLayout = new HorizontalLayout();
        infoLayout.setSpacing(true);
        
        Label currentLat = new Label();
        currentLat.setCaption("Current Latitude");
        
        Label currentLon = new Label();
        currentLon.setCaption("Current Longitude");

        infoLayout.addComponent(currentLat);
        infoLayout.addComponent(currentLon);
        
        TextField markerName = new TextField("Marker Name");

        Label latErrMsg = new Label();
        latErrMsg.addStyleName("mylabelstyle");
        Label lonErrMsg = new Label();
        lonErrMsg.addStyleName("mylabelstyle");

HorizontalLayout latlonLayout = new HorizontalLayout(); Creates a layout for the latitude and longitude inputs.
latlonLayout.setSpacing(true); Sets the space of the layout.

TextField latitude = new TextField("Lat"); Create a text field to input the latitude.
latitude.setWidth("100px"); Sets the width of the text field.

latitude.setNullSettingAllowed(true); Allows null into the text field.
latitude.setNullRepresentation("0.0"); Sets the null representation of the text field.

TextField longitude = new TextField("Long"); Creates a text field to input the longitude.
longitude.setWidth("100px"); Sets the width of the longitude text input.

longitude.setNullSettingAllowed(true); Allows null into the text field.
longitude.setNullRepresentation("0.0"); Sets the null representation of the text field.

latlonLayout.addComponent(latitude); Adds the latitude text field to the layout.
latlonLayout.addComponent(longitude); Adds the longitude text field to the layout.

HorizontalLayout infoLayout = new HorizontalLayout(); Creates a layout for the info labels.
infoLayout.setSpacing(true); Sets the spacing of the layout.

Label currentLat = new Label(); Creates a new label to show the current latitude.
currentLat.setCaption("Current Latitude"); Sets the caption of the label.

Label currentLon = new Label(); Creates a label to show the current longitude.
currentLon.setCaption("Current Longitude"); Sets the caption of the current longitude label.

infoLayout.addComponent(currentLat); Adds the latitude label to the info layout.
infoLayout.addComponent(currentLon); Adds the longitude label to the info layout.

TextField markerName = new TextField("Marker Name"); Creates a text field to input marker names.
Label latErrMsg = new Label(); Creates a label to show latitude input errors.

latErrMsg.addStyleName("mylabelstyle"); Adds a style to the label.
Label lonErrMsg = new Label(); Creates a label to show longitude input errors.

lonErrMsg.addStyleName("mylabelstyle"); Adds the style to the error label.

5.3.6 Button to add markers

We are going to create a button to add a marker to the current location.

Add markers

        Button.ClickListener addMarkerListener = new ClickListener() {
			
			@Override
			public void buttonClick(ClickEvent event) {
				String mName = markerName.getValue();
				if(mName.isEmpty()){
					mName = "Marker";
				}
				Double dLat = 0.0; 
				Double dLon = 0.0; 
				dLat = Double.valueOf(currentLat.getValue());
				dLon = Double.valueOf(currentLon.getValue());

				GoogleMapMarker customMarker = new GoogleMapMarker(mName, new LatLon(dLat, dLon),true, null);
				googleMap.addMarker(customMarker);
			}
		};
        
        Button addMarker = new Button("Add Marker", FontAwesome.ANCHOR);
        addMarker.addClickListener(addMarkerListener);

Button.ClickListener addMarkerListener = new ClickListener() Creates a click listener.
String mName = markerName.getValue(); Gets the value of the markers text field.

if(mName.isEmpty()) Checks if the name of the marker id empty.
mName = "Marker"; If the name of the marker id is empty it adds a default name.

Double dLat = 0.0; Creates a variable to store the latitude.
Double dLon = 0.0; Creates a variable to store the longitude.

dLat = Double.valueOf(currentLat.getValue()); Gets the value of the current latitude into the variable.
dLon = Double.valueOf(currentLon.getValue()); Gets tha value of the current longitude into the variable.

GoogleMapMarker customMarker = new GoogleMapMarker(mName, new LatLon(dLat, dLon),true, null); Creates a new marker with the name, the latitude and the longitude supplied.
googleMap.addMarker(customMarker); Adds the marker to the map.

Button addMarker = new Button("Add Marker", FontAwesome.ANCHOR); Creates the button to add the marker.
addMarker.addClickListener(addMarkerListener); Assigns the listener to the button.

5.3.7 Button to move the view

We are going to create a button to move the view of the map to a fixed latitude and longitude coordinates.

Move view

        Button.ClickListener moveView = new ClickListener() {
			
			@Override
			public void buttonClick(ClickEvent event) {
				Boolean val = true;
				Double dLat = 0.0; 
				Double dLon = 0.0; 

				try {
					dLat = Double.valueOf(latitude.getValue());
				} catch (Exception e) {
					val = false;
					latErrMsg.setValue("Latitude is not a valid number");
				}
				try {
					dLon = Double.valueOf(longitude.getValue());
				} catch (Exception e) {
					val = false;
					lonErrMsg.setValue("Longitude is not a valid number");
				}
				
				if(val){
					latErrMsg.setValue("");
					lonErrMsg.setValue("");
					if((dLat= 85.0)){
						val = false;
						latErrMsg.setValue("Latitude must be between -85.0 and 85.0");
					}
					if((dLon= 180.0)){
						val = false;
						lonErrMsg.setValue("Longitude  must be between -180.0 and 180.0");
					}
				}
				
				if(val){
					latErrMsg.setValue("");
					lonErrMsg.setValue("");
	                		googleMap.setCenter(new LatLon(dLat, dLon));
	                		googleMap.setZoom(12);
	                		currentLat.setValue(latitude.getValue());
	                		currentLon.setValue(longitude.getValue());
				}
			}
		};
        
        Button moveButton = new Button("Move", FontAwesome.BULLSEYE);
        moveButton.addClickListener(moveView);

Button.ClickListener moveView = new ClickListener() Creates a click listener for the move view button.
Boolean val = true; Creates a boolean val to validate the input.

Double dLat = 0.0; Creates a double value to store the latitude.
Double dLon = 0.0; Creates a double value to stores the longitude.

dLat = Double.valueOf(latitude.getValue()); Tries to convert the latitude input field to double.
val = false; If we cannot convert the latitude value, we set the val boolean to false.

latErrMsg.setValue("Latitude is not a valid number"); sets the latitude error message.
dLon = Double.valueOf(longitude.getValue()); Tries to convert the longitude input field.

val = false; If the conversion fail, sets the value of val to false.
lonErrMsg.setValue("Longitude is not a valid number"); Sets the error label for longitude.

if(val) We check that the conversion was done.
latErrMsg.setValue(""); Clears the latitude error message.

lonErrMsg.setValue(""); Clears the longitude error message.
if((dLat= 85.0)){ Checks the range of the latitude.

val = false; If the range is invalid sets the validation to false.
latErrMsg.setValue("Latitude must be between -85.0 and 85.0"); Sets the latitude error label.

if((dLon= 180.0)){ Checks the range of the longitude.
val = false; Sets the validation to false.

lonErrMsg.setValue("Longitude must be between -180.0 and 180.0"); Sets the error label.
if(val) Checks the validation.

latErrMsg.setValue(""); Clears the latitude error label.
lonErrMsg.setValue(""); Clears the longitude error label.

googleMap.setCenter(new LatLon(dLat, dLon)); Moves the map to the fixed position.
googleMap.setZoom(12); Sets the zoom level of the map.

currentLat.setValue(latitude.getValue()); Sets the current latitude label.
currentLon.setValue(longitude.getValue()); Sets the current longitude label.

Button moveButton = new Button("Move", FontAwesome.BULLSEYE); Creates a button to move the view.
moveButton.addClickListener(moveView); Adds the click listener to the button.

5.3.8 Button to clear the markers

We are going to create a button that clears all the markers in the map.

java

        Button.ClickListener clearMarkerListener = new ClickListener() {
			
			@Override
			public void buttonClick(ClickEvent event) {
                		googleMap.clearMarkers();
			}
		};

		Button clearMarkersButton = new Button("Clear markers", FontAwesome.REMOVE);
        	clearMarkersButton.addClickListener(clearMarkerListener);

Button.ClickListener clearMarkerListener = new ClickListener() Creates a listener to the clear markers button.
googleMap.clearMarkers(); Clears all the markers in the map.

Button clearMarkersButton = new Button("Clear markers", FontAwesome.REMOVE); Creates a button to clear the markers.
clearMarkersButton.addClickListener(clearMarkerListener); Add the listener to the button.

5.3.9 Add a default marker

We are going to add a marker to New York as example.

Default marker

        Double newyorkLat = 40.7128;
        Double newyorkLon = -74.0059;
        googleMap.setCenter(new LatLon(40.7128, -74.0059));
		GoogleMapMarker newyorkMarker = new GoogleMapMarker("New York", new LatLon(newyorkLat, newyorkLon),true, null);
		googleMap.addMarker(newyorkMarker);
		latitude.setValue(newyorkLat.toString());
		longitude.setValue(newyorkLon.toString());
		currentLat.setValue(latitude.getValue());
		currentLon.setValue(longitude.getValue());

Double newyorkLat = 40.7128; Defines a double with the New York Latitude.
Double newyorkLon = -74.0059; Defines a double with the New York Longitude.

googleMap.setCenter(new LatLon(40.7128, -74.0059)); Center the map in New Your.
GoogleMapMarker newyorkMarker = new GoogleMapMarker("New York", new LatLon(newyorkLat, newyorkLon),true, null); Creates a marker in New York.

googleMap.addMarker(newyorkMarker); Adds the marker to the map.
latitude.setValue(newyorkLat.toString()); Sets the latitude text field value to the New York latitude.

longitude.setValue(newyorkLon.toString()); Sets the longitude text field value to the New York longitude.
currentLat.setValue(latitude.getValue()); Sets the latitude current value to the New York latitude.

currentLon.setValue(longitude.getValue()); Sets the longitude current value to the New York longitude.

5.3.10 Add the window contents

Fill the window

        VerticalLayout toolLayout = new VerticalLayout();
        toolLayout.setMargin(true);
        toolLayout.setSpacing(true);
        mapToolBox.setContent(toolLayout);
        toolLayout.addComponent(clearMarkersButton);
        toolLayout.addComponent(latlonLayout);
        toolLayout.addComponent(moveButton);
        toolLayout.addComponent(infoLayout);
        toolLayout.addComponent(markerName);
        toolLayout.addComponent(addMarker);
        toolLayout.addComponent(latErrMsg);
        toolLayout.addComponent(lonErrMsg);

VerticalLayout toolLayout = new VerticalLayout(); Creates a vertical layout to the window.
toolLayout.setMargin(true); Sets the margin of the window layout.

toolLayout.setSpacing(true); Sets the spacing to the window layout.
mapToolBox.setContent(toolLayout); Sets the layout to the map panel.

toolLayout.addComponent(clearMarkersButton); Adds the clear markers button.
toolLayout.addComponent(latlonLayout); Adds the text field layout to the window layout.

toolLayout.addComponent(moveButton); Adds the move button to the layout.
toolLayout.addComponent(infoLayout); Adds the info layout to the window layout.

toolLayout.addComponent(markerName); Adds the marker input box to the window layout.
toolLayout.addComponent(addMarker); Adds the add marker button to the layout.

toolLayout.addComponent(latErrMsg); Adds the latitude error label to the layout.
toolLayout.addComponent(lonErrMsg); Adds the longitude error label to the layout.

6. The complete source code

6.1 Main class

VaadinmapsUI.java

package com.example.vaadinmaps;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.data.util.PropertysetItem;
import com.vaadin.data.validator.DoubleRangeValidator;
import com.vaadin.data.fieldgroup.FieldGroup;
import com.vaadin.data.util.ObjectProperty;
import com.vaadin.server.FontAwesome;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.tapio.googlemaps.GoogleMap;
import com.vaadin.tapio.googlemaps.client.LatLon;
import com.vaadin.tapio.googlemaps.client.overlays.GoogleMapInfoWindow;
import com.vaadin.tapio.googlemaps.client.overlays.GoogleMapMarker;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Button.ClickListener;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;

@SuppressWarnings("serial")
@Theme("vaadinmaps")
public class VaadinmapsUI extends UI {

    private GoogleMap googleMap;
    private final String apiKey = "api-key";
	
	@WebServlet(value = "/*", asyncSupported = true)
	@VaadinServletConfiguration(productionMode = false, ui = VaadinmapsUI.class, widgetset = "com.example.vaadinmaps.widgetset.VaadinmapsWidgetset")
	public static class Servlet extends VaadinServlet {
	}

	@Override
	protected void init(VaadinRequest request) {
        VerticalLayout rootLayout = new VerticalLayout();
        rootLayout.setSizeFull();
        setContent(rootLayout);

        googleMap = new GoogleMap(apiKey, null, null);
        googleMap.setZoom(10);
        googleMap.setSizeFull();
        googleMap.setMinZoom(4);
        googleMap.setMaxZoom(16);

        Panel mapsPanel = new Panel();
        mapsPanel.setSizeFull();
        mapsPanel.setContent(googleMap);
        rootLayout.addComponent(mapsPanel);

        Window mapToolBox = new Window("Map Tool Box");
        mapToolBox.setClosable(false);
        mapToolBox.setResizable(false);
        mapToolBox.setPosition(10, 100);
        mapToolBox.setWidth("350px");
        mapToolBox.setHeight("520px");
        mapToolBox.addStyleName("mywindowstyle");
        UI.getCurrent().addWindow(mapToolBox);

        HorizontalLayout latlonLayout = new HorizontalLayout();
        latlonLayout.setSpacing(true);
        
        TextField latitude = new TextField("Lat");
        latitude.setWidth("100px");
        latitude.setNullSettingAllowed(true);
        latitude.setNullRepresentation("0.0");
        
        TextField longitude = new TextField("Long");
        longitude.setWidth("100px");
        longitude.setNullSettingAllowed(true);
        longitude.setNullRepresentation("0.0");
        
        latlonLayout.addComponent(latitude);
        latlonLayout.addComponent(longitude);
        
        HorizontalLayout infoLayout = new HorizontalLayout();
        infoLayout.setSpacing(true);
        
        Label currentLat = new Label();
        currentLat.setCaption("Current Latitude");
        
        Label currentLon = new Label();
        currentLon.setCaption("Current Longitude");

        infoLayout.addComponent(currentLat);
        infoLayout.addComponent(currentLon);
        
        TextField markerName = new TextField("Marker Name");

        Label latErrMsg = new Label();
        latErrMsg.addStyleName("mylabelstyle");
        Label lonErrMsg = new Label();
        lonErrMsg.addStyleName("mylabelstyle");
        
        Button.ClickListener addMarkerListener = new ClickListener() {
			
			@Override
			public void buttonClick(ClickEvent event) {
				String mName = markerName.getValue();
				if(mName.isEmpty()){
					mName = "Marker";
				}
				Double dLat = 0.0; 
				Double dLon = 0.0; 
				dLat = Double.valueOf(currentLat.getValue());
				dLon = Double.valueOf(currentLon.getValue());

				GoogleMapMarker customMarker = new GoogleMapMarker(mName, new LatLon(dLat, dLon),true, null);
				googleMap.addMarker(customMarker);
			}
		};
        
        Button addMarker = new Button("Add Marker", FontAwesome.ANCHOR);
        addMarker.addClickListener(addMarkerListener);
        
        Button.ClickListener moveView = new ClickListener() {
			
			@Override
			public void buttonClick(ClickEvent event) {
				Boolean val = true;
				Double dLat = 0.0; 
				Double dLon = 0.0; 

				try {
					dLat = Double.valueOf(latitude.getValue());
				} catch (Exception e) {
					val = false;
					latErrMsg.setValue("Latitude is not a valid number");
				}
				try {
					dLon = Double.valueOf(longitude.getValue());
				} catch (Exception e) {
					val = false;
					lonErrMsg.setValue("Longitude is not a valid number");
				}
				
				if(val){
					latErrMsg.setValue("");
					lonErrMsg.setValue("");
					if((dLat= 85.0)){
						val = false;
						latErrMsg.setValue("Latitude must be between -85.0 and 85.0");
					}
					if((dLon= 180.0)){
						val = false;
						lonErrMsg.setValue("Longitude  must be between -180.0 and 180.0");
					}
				}
				
				if(val){
					latErrMsg.setValue("");
					lonErrMsg.setValue("");
	                googleMap.setCenter(new LatLon(dLat, dLon));
	                googleMap.setZoom(12);
	                currentLat.setValue(latitude.getValue());
	                currentLon.setValue(longitude.getValue());
				}
			}
		};
        
        Button moveButton = new Button("Move", FontAwesome.BULLSEYE);
        moveButton.addClickListener(moveView);

        Button.ClickListener clearMarkerListener = new ClickListener() {
			
			@Override
			public void buttonClick(ClickEvent event) {
                googleMap.clearMarkers();
			}
		};

		Button clearMarkersButton = new Button("Clear markers", FontAwesome.REMOVE);
        clearMarkersButton.addClickListener(clearMarkerListener);

        Double newyorkLat = 40.7128;
        Double newyorkLon = -74.0059;
        googleMap.setCenter(new LatLon(40.7128, -74.0059));
		GoogleMapMarker newyorkMarker = new GoogleMapMarker("New York", new LatLon(newyorkLat, newyorkLon),true, null);
		googleMap.addMarker(newyorkMarker);
		latitude.setValue(newyorkLat.toString());
		longitude.setValue(newyorkLon.toString());
		currentLat.setValue(latitude.getValue());
		currentLon.setValue(longitude.getValue());

        VerticalLayout toolLayout = new VerticalLayout();
        toolLayout.setMargin(true);
        toolLayout.setSpacing(true);
        mapToolBox.setContent(toolLayout);
        toolLayout.addComponent(clearMarkersButton);
        toolLayout.addComponent(latlonLayout);
        toolLayout.addComponent(moveButton);
        toolLayout.addComponent(infoLayout);
        toolLayout.addComponent(markerName);
        toolLayout.addComponent(addMarker);
        toolLayout.addComponent(latErrMsg);
        toolLayout.addComponent(lonErrMsg);
	}
}

6.2 Styles

vaadinmaps.scss

@import "../valo/valo.scss";

@mixin vaadinmaps {
  @include valo;

	.v-window-mywindowstyle .v-window-contents {
		background: #f8f8cd;
	}

	.v-window-mywindowstyle .v-window-outerheader {
		background: #0c2640;
	} 

	.v-window-mywindowstyle .v-window-header {
    	font-weight: bold;
		color: white;
	}
	
	.v-label-mylabelstyle {
    	color: white;
    	text-align: center;
    	background-color: red;	
    	border-color: white;
    	font-weight: bold;
	}
	
}

7. Running the example

Right click on the project folder and choose Run as -> Run on server choose Tomcat 8 server and press finish.

8. Results

8.1 Start application

When you first start the application you get the following screen.

4 Start application

4 Start application

8.2 Input error

If your input is invalid you get the errors in the image.

5 Input error

5 Input error

8.3 Range error

If your range is invalid you get the following errors.

6 Range error

6 Range error

8.4 Move view

If you input the right coordinates, you can move the view. Input the coordinates of Oslo and click on the button move. Your view moves to Oslo.

7 Move view

7 Move view

8.5 Add Marker

You can add a marker to your current center position. Write a name and click on add marker. A marker in Oslo was added.

8 Add Marker

8 Add Marker

9. Download the Source Code

This was an example of: Vaadin Maps.

Download
You can download the Eclipse project here: Vaadin-Maps

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. JPA Mini Book

2. JVM Troubleshooting Guide

3. JUnit Tutorial for Unit Testing

4. Java Annotations Tutorial

5. Java Interview Questions

6. Spring Interview Questions

7. Android UI Design

 

and many more ....

 

Receive Java & Developer job alerts in your Area

 

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of