Monday, January 19, 2015

Vaadin & GoogleMap

Install GWT plugin for Eclipse

download the Vaadin googlemap add on

Create a GWT project with the sources from com.vaadin.tapio with the following entries

  • com.vaadin.tapio.googlemaps
  • com.vaadin.tapio.googlemaps.client
  • com.vaadin.tapio.googlemaps.client.events
  • com.vaadin.tapio.googlemaps.client.layers
  • com.vaadin.tapio.googlemaps.client.overlays
  • com.vaadin.tapio.googlemaps.client.rpcs
  • com.vaadin.tapio.googlemaps.server
  • com.vaadin.tapio.googlemaps.shared

Edit com.vaadin.tapio.googlemaps.VaadinMaps.gwt.xml and ensure that opera is added to the user.agents

<?xml version="1.0" encoding="UTF-8"?>
<!--
  When updating your version of GWT, you should also update this DTD reference,
  so that your app can take advantage of the latest GWT module capabilities.
-->
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.6.0//EN"
  "http://google-web-toolkit.googlecode.com/svn/tags/2.6.0/distro-source/core/src/gwt-module.dtd">
<module rename-to='vaadinmaps'>
   

  <!-- Inherit the core Web Toolkit stuff.                        -->
  <inherits name='com.google.gwt.user.User'/>
 <extend-property name="user.agent" values="opera" />
  <!-- Inherit the default GWT style sheet.  You can change       -->
  <!-- the theme of your GWT application by uncommenting          -->
  <!-- any one of the following lines.                            -->
  <inherits name='com.google.gwt.user.theme.clean.Clean'/>
  
 <!-- Inherit DefaultWidgetSet -->
 <inherits name="com.vaadin.DefaultWidgetSet" />  
 <inherits name="com.google.maps.gwt.GoogleMaps" />
 <inherits name="com.google.gwt.ajaxloader.AjaxLoader" /> 
 <!-- <inherits name="com.vaadin.tapio.googlemaps.GoogleMap" /> --> 
 <!-- Widget styles in public -directory -->
 <stylesheet src="googlemaps/styles.css"/>
  <!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/> -->
  <!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
  <!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>     -->

  <!-- Other module inherits                                      -->

  <!-- Specify the app entry point class.                         -->
  <entry-point class='com.vaadin.tapio.googlemaps.client.VaadinMaps'/>

  <!-- Specify the paths for translatable code                    -->
  <source path='client'/>
  <source path='shared'/>

  <!-- allow Super Dev Mode -->
  <add-linker name="xsiframe"/>
</module>

Add these jars to the classpath

  • googlemaps-0.8.1.jar
  • gwt-maps-3.0.0.jar
  • gwt-servlet-1.7.1.jar
  • json-jena-1.0.jar
  • vaadin-googlemapwidgetv3-0.0.5.jar
  • vaadin-client-7.1.9.jar
  • vaadin-server-7.1.9.jar
  • vaadin-shared-7.1.9.jar
  • vaadin-client-compiler-7.1.9.jar
  • vaadin-client-compiled-7.1.9.jar

Compile the project

Copy the war -> vaadinmaps folder to the Webcontent/VAADIN/widgetsets in your project that invokes the GoogleMap as follows:

googleMap = new GoogleMap(new LatLon(39.5, -98.35), 4.0, "");
googleMap.setHeight("600");
googleMap.setWidth("1000");

No comments:

Post a Comment