Table Of Contents<\/h3>\n\n- 1. The tools<\/a><\/dt>\n
- 2. Introduction<\/a><\/dt>\n
- 3. Prerequisites<\/a><\/dt>\n
- 4. Set up the project<\/a><\/dt>\n
- 5. Coding the example<\/a><\/dt>\n
- \n
\n- 5.1 Configure the add-on<\/a><\/dt>\n
- \n
\n- 5.1.1 Edit ivy.xml<\/a><\/dt>\n
- 5.1.2 Edit ivysettings.xml<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 5.2 Edit the styles<\/a><\/dt>\n
- \n
\n- 5.2.1 Windows contents<\/a><\/dt>\n
- 5.2.2 Windows header<\/a><\/dt>\n
- 5.2.3 Error labels<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 5.3 Main Class<\/a><\/dt>\n
- \n
\n- 5.3.1 Local Variables<\/a><\/dt>\n
- 5.3.2 The layout<\/a><\/dt>\n
- 5.3.3 Create the map<\/a><\/dt>\n
- 5.3.4 Create the tool box window<\/a><\/dt>\n
- 5.3.5 Add the widgets to the window<\/a><\/dt>\n
- 5.3.6 Button to add markers<\/a><\/dt>\n
- 5.3.7 Button to move the view<\/a><\/dt>\n
- 5.3.8 Button to clear the markers<\/a><\/dt>\n
- 5.3.9 Add a default marker<\/a><\/dt>\n
- 5.3.10 Add the window contents<\/a><\/dt>\n<\/dl>\n<\/dd>\n<\/dl>\n<\/dd>\n
- 6. The complete source code<\/a><\/dt>\n
- \n
\n- 6.1 Main class<\/a><\/dt>\n
- 6.2 Styles<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 7. Running the example<\/a><\/dt>\n
- 8. Results<\/a><\/dt>\n
- \n
\n- 8.1 Start application<\/a><\/dt>\n
- 8.2 Input error<\/a><\/dt>\n
- 8.3 Range error<\/a><\/dt>\n
- 8.4 Move view<\/a><\/dt>\n
- 8.5 Add Marker<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 9. Download the Source Code<\/a><\/dt>\n<\/dl>\n<\/div>\n
<\/a>1. The tools<\/h2>\n\n- Java JDK 8<\/li>\n
- Latest Eclipse Mars<\/li>\n
- Vaadin 7.6.8<\/li>\n
- Tomcat Server 8<\/li>\n<\/ul>\n
<\/a>2. Introduction<\/h2>\nIn 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.
\nThe 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.
\nWith 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.<\/p>\n
<\/a>3. Prerequisites<\/h2>\n\n- JDK installed<\/li>\n
- Eclipse Mars installed and working<\/li>\n
- Vaadin plug-in installed<\/li>\n
- Tomcat 8 installed and running<\/li>\n<\/ul>\n
<\/a>4. Set up the project<\/h2>\nIn the file menu choose File -> New -> Other<\/p>\n
![\"01](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/02\/01-New-Project-1.png\")
<\/a>1 New Project<\/figcaption><\/figure><\/p>\nNow from the list choose Vaadin 7 project<\/p>\n
![\"02](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/02\/02-Vaadin-Project-1.png\")
<\/a>2 Vaadin Project<\/figcaption><\/figure><\/p>\nClick next and name your project then click finish.<\/p>\n
<\/a>5. The example<\/h2>\n<\/a>5.1 Configure the add-on<\/h3>\nWe are going to use this wonderful add-on from here.<\/p>\n
\n- Vaadin Maps add-on<\/a><\/li>\n<\/ul>\n
To configure the add-on we are using Ivy, but you can use Maven or configure the add-on manually.<\/p>\n
<\/a>5.1.1 Edit ivy.xml<\/h4>\nEdit the file ivy.xml<\/code> in the project root. Then add the following lines inside the dependencies tag.<\/p>\ndependencies<\/em><\/span><\/p>\n\t<!-- Google Maps Addon -->\t\n\t<dependency org=\"com.vaadin.tapio\" name=\"googlemaps\" rev=\"1.3.2\" \/>\n<\/pre>\nThis tells ivy what is the name of the plugin.<\/p>\n
<\/a>5.1.2 Edit ivysettings.xml<\/h4>\nEdit the file ivysettings.xml<\/code> in the project root, and add the following lines inside the resolvers tag.<\/p>\nresolvers<\/em><\/span><\/p>\n\t<!-- Vaadin Google Maps Add On -->\t\n\t<ibiblio name=\"vaadin-addons\" usepoms=\"true\" m2compatible=\"true\" \n \t\troot=\"http:\/\/maven.vaadin.com\/vaadin-addons\" \/>\t\t\t\n<\/pre>\nThis tells ivy where to find the plugin. Now ivy is going to download all dependencies needed by the add-on.<\/p>\n
<\/a>5.2 Edit the styles<\/h3>\nWe are going to use some custom styles in our application.
\nOpen the styles file:
\n[PROJECT_ROOT]\/WebContent\/VAADIN\/Themes\/[PROJECT_NAME]\/[PROJECT_NAME].scss<\/code><\/p>\n![\"3](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/08\/3-Styles.png\")
<\/a>3 Styles<\/figcaption><\/figure><\/p>\n<\/a>5.2.1 Windows contents<\/h4>\nThe window’s contents is the client area of the window widget.<\/p>\n
Windows contents<\/em><\/span><\/p>\n\t.v-window-mywindowstyle .v-window-contents {\n\t\tbackground: #f8f8cd;\n\t}\n<\/pre>\nWe set the color to a light yellow.<\/p>\n
<\/a>5.2.2 Windows header<\/h4>\nThe header is the top of the window when we put the title.<\/p>\n
Header<\/em><\/span><\/p>\n\t.v-window-mywindowstyle .v-window-outerheader {\n\t\tbackground: #0c2640;\n\t} \n\n\t.v-window-mywindowstyle .v-window-header {\n \tfont-weight: bold;\n\t\tcolor: white;\n\t}\n<\/pre>\nWe set the background color to a dark blue and the text white with a bold font.<\/p>\n
<\/a>5.2.3 Error labels<\/h4>\nWe are going to create two labels to show the input errors.<\/p>\n
Error labels<\/em><\/span><\/p>\n\t.v-label-mylabelstyle {\n \tcolor: white;\n \ttext-align: center;\n \tbackground-color: red;\t\n \tborder-color: white;\n \tfont-weight: bold;\n\t}\n<\/pre>\nWe 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.<\/p>\n
<\/a>5.3 Main Class<\/h3>\n<\/a>5.3.1 Local Variables<\/h4>\nWe are going to use two local variables in our application. The variable for the map itself and a variable for the api key.<\/p>\n
Local variables<\/em><\/span><\/p>\n private GoogleMap googleMap;\n private final String apiKey = \"api-key\";\n<\/pre>\nprivate GoogleMap googleMap;<\/code> A local variable to the map instance.
\nprivate final String apiKey = \"api-key\";<\/code> The api key from Google.<\/p>\nThe 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.<\/p>\n
<\/a>5.3.2 The layout<\/h4>\nWe are going to use a vertical layout as our main layout.<\/p>\n
Create the layout<\/em><\/span><\/p>\n VerticalLayout rootLayout = new VerticalLayout();\n rootLayout.setSizeFull();\n setContent(rootLayout);\n<\/pre>\nVerticalLayout rootLayout = new VerticalLayout();<\/code> Creates a vertical layout.
\nrootLayout.setSizeFull();<\/code> Sets the size of the layout to full.
\nsetContent(rootLayout);<\/code> Sets the vertical layout as our main content layout.<\/p>\n<\/a>5.3.3 Create the map<\/h4>\nWe are going to initialize the map.<\/p>\n
Create the map<\/em><\/span><\/p>\n googleMap = new GoogleMap(apiKey, null, null);\n googleMap.setZoom(10);\n googleMap.setSizeFull();\n googleMap.setMinZoom(4);\n googleMap.setMaxZoom(16);\n\n Panel mapsPanel = new Panel();\n mapsPanel.setSizeFull();\n mapsPanel.setContent(googleMap);\n rootLayout.addComponent(mapsPanel);\n<\/pre>\ngoogleMap = new GoogleMap(apiKey, null, null);<\/code> Initializes the instance of the map using the api key.
\ngoogleMap.setZoom(10);<\/code> Sets the default zoom.<\/p>\ngoogleMap.setSizeFull();<\/code> Sets the size of the map to fill all the client area.
\ngoogleMap.setMinZoom(4);<\/code> Sets the minimum zoom of the map.<\/p>\ngoogleMap.setMaxZoom(16);<\/code> Sets the maximum zoom of the map.
\nPanel mapsPanel = new Panel();<\/code> Creates a panel to put the map.<\/p>\nmapsPanel.setSizeFull();<\/code> Fills the entite client area.
\nmapsPanel.setContent(googleMap);<\/code> Sets the content of the panel to the map.<\/p>\n
- \n
- 5.1 Configure the add-on<\/a><\/dt>\n
- \n
- \n
- 5.1.1 Edit ivy.xml<\/a><\/dt>\n
- 5.1.2 Edit ivysettings.xml<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 5.2 Edit the styles<\/a><\/dt>\n
- \n
- \n
- 5.2.1 Windows contents<\/a><\/dt>\n
- 5.2.2 Windows header<\/a><\/dt>\n
- 5.2.3 Error labels<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 5.3 Main Class<\/a><\/dt>\n
- \n
- \n
- 5.3.1 Local Variables<\/a><\/dt>\n
- 5.3.2 The layout<\/a><\/dt>\n
- 5.3.3 Create the map<\/a><\/dt>\n
- 5.3.4 Create the tool box window<\/a><\/dt>\n
- 5.3.5 Add the widgets to the window<\/a><\/dt>\n
- 5.3.6 Button to add markers<\/a><\/dt>\n
- 5.3.7 Button to move the view<\/a><\/dt>\n
- 5.3.8 Button to clear the markers<\/a><\/dt>\n
- 5.3.9 Add a default marker<\/a><\/dt>\n
- 5.3.10 Add the window contents<\/a><\/dt>\n<\/dl>\n<\/dd>\n<\/dl>\n<\/dd>\n
- 6. The complete source code<\/a><\/dt>\n
- \n
- \n
- 6.1 Main class<\/a><\/dt>\n
- 6.2 Styles<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 7. Running the example<\/a><\/dt>\n
- 8. Results<\/a><\/dt>\n
- \n
- \n
- 8.1 Start application<\/a><\/dt>\n
- 8.2 Input error<\/a><\/dt>\n
- 8.3 Range error<\/a><\/dt>\n
- 8.4 Move view<\/a><\/dt>\n
- 8.5 Add Marker<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 9. Download the Source Code<\/a><\/dt>\n<\/dl>\n<\/div>\n
<\/a>1. The tools<\/h2>\n
- \n
- Java JDK 8<\/li>\n
- Latest Eclipse Mars<\/li>\n
- Vaadin 7.6.8<\/li>\n
- Tomcat Server 8<\/li>\n<\/ul>\n
<\/a>2. Introduction<\/h2>\n
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.
\nThe 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.
\nWith 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.<\/p>\n<\/a>3. Prerequisites<\/h2>\n
- \n
- JDK installed<\/li>\n
- Eclipse Mars installed and working<\/li>\n
- Vaadin plug-in installed<\/li>\n
- Tomcat 8 installed and running<\/li>\n<\/ul>\n
<\/a>4. Set up the project<\/h2>\n
In the file menu choose File -> New -> Other<\/p>\n
<\/a>1 New Project<\/figcaption><\/figure><\/p>\n Now from the list choose Vaadin 7 project<\/p>\n
<\/a>2 Vaadin Project<\/figcaption><\/figure><\/p>\n Click next and name your project then click finish.<\/p>\n
<\/a>5. The example<\/h2>\n
<\/a>5.1 Configure the add-on<\/h3>\n
We are going to use this wonderful add-on from here.<\/p>\n
- \n
- Vaadin Maps add-on<\/a><\/li>\n<\/ul>\n
To configure the add-on we are using Ivy, but you can use Maven or configure the add-on manually.<\/p>\n
<\/a>5.1.1 Edit ivy.xml<\/h4>\n
Edit the file
ivy.xml<\/code> in the project root. Then add the following lines inside the dependencies tag.<\/p>\ndependencies<\/em><\/span><\/p>\n
\t<!-- Google Maps Addon -->\t\n\t<dependency org=\"com.vaadin.tapio\" name=\"googlemaps\" rev=\"1.3.2\" \/>\n<\/pre>\n
This tells ivy what is the name of the plugin.<\/p>\n
<\/a>5.1.2 Edit ivysettings.xml<\/h4>\n
Edit the file
ivysettings.xml<\/code> in the project root, and add the following lines inside the resolvers tag.<\/p>\nresolvers<\/em><\/span><\/p>\n
\t<!-- Vaadin Google Maps Add On -->\t\n\t<ibiblio name=\"vaadin-addons\" usepoms=\"true\" m2compatible=\"true\" \n \t\troot=\"http:\/\/maven.vaadin.com\/vaadin-addons\" \/>\t\t\t\n<\/pre>\n
This tells ivy where to find the plugin. Now ivy is going to download all dependencies needed by the add-on.<\/p>\n
<\/a>5.2 Edit the styles<\/h3>\n
We are going to use some custom styles in our application.
\nOpen the styles file:
\n[PROJECT_ROOT]\/WebContent\/VAADIN\/Themes\/[PROJECT_NAME]\/[PROJECT_NAME].scss<\/code><\/p>\n<\/a>3 Styles<\/figcaption><\/figure><\/p>\n <\/a>5.2.1 Windows contents<\/h4>\n
The window’s contents is the client area of the window widget.<\/p>\n
Windows contents<\/em><\/span><\/p>\n
\t.v-window-mywindowstyle .v-window-contents {\n\t\tbackground: #f8f8cd;\n\t}\n<\/pre>\nWe set the color to a light yellow.<\/p>\n
<\/a>5.2.2 Windows header<\/h4>\n
The header is the top of the window when we put the title.<\/p>\n
Header<\/em><\/span><\/p>\n
\t.v-window-mywindowstyle .v-window-outerheader {\n\t\tbackground: #0c2640;\n\t} \n\n\t.v-window-mywindowstyle .v-window-header {\n \tfont-weight: bold;\n\t\tcolor: white;\n\t}\n<\/pre>\nWe set the background color to a dark blue and the text white with a bold font.<\/p>\n
<\/a>5.2.3 Error labels<\/h4>\n
We are going to create two labels to show the input errors.<\/p>\n
Error labels<\/em><\/span><\/p>\n
\t.v-label-mylabelstyle {\n \tcolor: white;\n \ttext-align: center;\n \tbackground-color: red;\t\n \tborder-color: white;\n \tfont-weight: bold;\n\t}\n<\/pre>\nWe 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.<\/p>\n
<\/a>5.3 Main Class<\/h3>\n
<\/a>5.3.1 Local Variables<\/h4>\n
We are going to use two local variables in our application. The variable for the map itself and a variable for the api key.<\/p>\n
Local variables<\/em><\/span><\/p>\n
private GoogleMap googleMap;\n private final String apiKey = \"api-key\";\n<\/pre>\n
private GoogleMap googleMap;<\/code> A local variable to the map instance.
\nprivate final String apiKey = \"api-key\";<\/code> The api key from Google.<\/p>\nThe 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.<\/p>\n
<\/a>5.3.2 The layout<\/h4>\n
We are going to use a vertical layout as our main layout.<\/p>\n
Create the layout<\/em><\/span><\/p>\n
VerticalLayout rootLayout = new VerticalLayout();\n rootLayout.setSizeFull();\n setContent(rootLayout);\n<\/pre>\n
VerticalLayout rootLayout = new VerticalLayout();<\/code> Creates a vertical layout.
\nrootLayout.setSizeFull();<\/code> Sets the size of the layout to full.
\nsetContent(rootLayout);<\/code> Sets the vertical layout as our main content layout.<\/p>\n<\/a>5.3.3 Create the map<\/h4>\n
We are going to initialize the map.<\/p>\n
Create the map<\/em><\/span><\/p>\n
googleMap = new GoogleMap(apiKey, null, null);\n googleMap.setZoom(10);\n googleMap.setSizeFull();\n googleMap.setMinZoom(4);\n googleMap.setMaxZoom(16);\n\n Panel mapsPanel = new Panel();\n mapsPanel.setSizeFull();\n mapsPanel.setContent(googleMap);\n rootLayout.addComponent(mapsPanel);\n<\/pre>\n
googleMap = new GoogleMap(apiKey, null, null);<\/code> Initializes the instance of the map using the api key.
\ngoogleMap.setZoom(10);<\/code> Sets the default zoom.<\/p>\ngoogleMap.setSizeFull();<\/code> Sets the size of the map to fill all the client area.
\ngoogleMap.setMinZoom(4);<\/code> Sets the minimum zoom of the map.<\/p>\ngoogleMap.setMaxZoom(16);<\/code> Sets the maximum zoom of the map.
\nPanel mapsPanel = new Panel();<\/code> Creates a panel to put the map.<\/p>\nmapsPanel.setSizeFull();<\/code> Fills the entite client area.
\nmapsPanel.setContent(googleMap);<\/code> Sets the content of the panel to the map.<\/p>\n
- Vaadin Maps add-on<\/a><\/li>\n<\/ul>\n
- 8.2 Input error<\/a><\/dt>\n
- 6.2 Styles<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 5.3.2 The layout<\/a><\/dt>\n
- 5.2.2 Windows header<\/a><\/dt>\n
- 5.1.2 Edit ivysettings.xml<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- \n