Vaadin and Google Maps

-

Vaadin and a Google Map Widget


One of my major irritations with Vaadin has been its lack of support for Google Maps as a standard widget.

The reality is that many commercial applications require some form of mapping feature and the lack of support for a standard Google Map widget has been a major problem.

However this has changed with Version 7.x of Vaadin, a new Google Map Addon has appeared and it fills a very important gap in the Vaadin feature set.

How to Use It.

If you use Maven in your development process then using the Addon in your Vaadin project is very easy. Just place this dependency in your POM file and make sure you have the correct repository established for the Vaadin Add On's.

<dependency>
   <groupId>com.vaadin.tapio</groupId>
   <artifactId>googlemaps</artifactId>
   <version>0.6.2</version>
</dependency>

Here is some simple code to get you started. It creates a Google Map which is centred on my home city of Brisbane, Australia.

googleMap = new GoogleMap(new LatLon(-27.47101, 153.02429), 10.0, apiKey);
googleMap.setSizeFull();
googleMap.setImmediate(true);
googleMap.setMinZoom(4.0);

The 10.0 value is the starting zoom position for the map and the apiKey is a String which contains your Google Maps API key that you can obtain from Google. If you are using localhost then this key can be an empty string ( "" ).

Look at the Demo

The best place to obtain a deeper understanding of the Add On is via the Demo source code which can be seen on the GIT Hub source code site.

This is a great extension to the base Vaadin framework, I just wish it was a standard widget.





Comments

Post a Comment

Popular posts from this blog

Vaadin - GRID Component

-
Image
Introduction Vaadin 7.4 was recently released and it includes a new component called the GRID . It represents a 'Spreadsheet" type model from a UI perspective, however I think it lacks a lot of features you would expect from this type of component. Maybe this component will evolve over time and it will begin to have the functions that you expect from a spreadsheet. ( note: there is a commercial add on called the Spreadsheet from Vaadin ) Use Case The use case I am demonstrating below is a simple grid showing projected sales of Widgets over a five year period. Creation Creating a Grid is very simple and you have numerous options for sizing on the page. In the example below I setting it across the page. The Grid rows can be selected for editing, you can select single or multiple rows in a single action. myGrid = new Grid(); myGrid.setSizeFull(); myGrid.setSelectionMode(SelectionMode.SINGLE); Container Backing Similar to many other Vaadin componen
Read more

Connecting a Vaadin SQL Container to a Combo Box

-
It must be me. But I spent a lot of time trying to figure out how to connect a database table implemented as a Vaadin SQL Container to a Vaadin Combo Box. It seems such a simple concept. Anyway, here was my requirement. I needed a combo box to contain a list of Australia suburbs. The user would select a suburb which would filter the results in a table on the screen. My database table was very simple. A id field ( which was the primary key ) and a name field which contained the suburb name. The code for the SQL Container was simple. TableQuery q = new TableQuery("suburb", connectionPool); suburbContainer = new SQLContainer(q); Now code to establish the combo box and links to the SQL Container.   ComboBox suburbCB = new ComboBox();  suburbCB.addItem("");  suburbCB.setCaption("Filter by Suburb");  suburbCB.setContainerDataSource(app.getDatabase().loadSuburbs());  suburbCB.setItemCaptionPropertyId("name");  suburbCB.setItemC
Read more

Web Cam and Vaadin

-
A very interesting Web Cam Add On is available from the Vaadin Add On site . Here is a simple recipe for making it work. Create a split panel and add the Web Cam to the left hand side of the panel. splitPanel = new HorizontalSplitPanel(); splitPanel.setSizeFull(); VerticalLayout detailsLayout = new VerticalLayout(); detailsLayout.setSpacing(true); detailsLayout.setSizeFull(); // Create the webcam and assign a receiver. final Webcam webcam = new Webcam(); webcam.setWidth("600px"); detailsLayout.addComponent(webcam); detailsLayout.setComponentAlignment(webcam, Alignment.TOP_LEFT); Create a receiver which creates a temporary file with a jpeg extension. webcam.setReceiver(new Upload.Receiver() { @Override public OutputStream receiveUpload(String filename, String mimeType) { try { targetFile = File.createTemp
Read more