12205

Google Maps FusionTable implementation in GWT

Question:

Is it possible to have this exact same functionality in GWT?

layer = new google.maps.FusionTablesLayer({ query: { select: 'geometry', from: '1ertEwm-1bMBhpEwHhtNYT47HQ9k2ki_6sRa-UQ' }, styles: [{ polygonOptions: { fillColor: '#00FF00', fillOpacity: 0.3 } }, { where: 'birds > 300', polygonOptions: { fillColor: '#0000FF' } }, { where: 'population > 5', polygonOptions: { fillOpacity: 1.0 } }] });

I am trying to implement this: <a href="https://developers.google.com/maps/documentation/javascript/examples/layer-fusiontables-styling" rel="nofollow">https://developers.google.com/maps/documentation/javascript/examples/layer-fusiontables-styling</a>

So far I have managed to implement single style here <a href="https://stackoverflow.com/q/29577659/768894" rel="nofollow">Custom coloring of countries in Google Maps : GWT?</a> but I want to apply conditional styling as in the given javascript code snippet i.e if #ofbirds > 300 then fillColor: '#0000FF' if #ofbirds > 500 then fillColor: '#0000FE'

Thanks

Answer1:

After a lot of painful trial and error I was able to do it. Posting here so that others could benefit.

private native FusionTablesLayer createFusionTableLayer()/*-{ return new $wnd.google.maps.FusionTablesLayer({ query: { select: 'geometry', from: '1tJkzVXTv-B2-rFeQVO9bX_vICCvJ9Xq1LU6xog5f' }, styles: [{ polygonOptions: { fillColor: '#00FF00', fillOpacity: 0.3 } }, { where: 'birds > 300', polygonOptions: { fillColor: '#0000FF' } }, { where: 'population > 5', polygonOptions: { fillOpacity: 1.0 } }] }); }-*/;

Recommend

  • Google Maps Infowindows with shapes
  • Display images from an array [duplicate]
  • Textbox to fill space
  • How to generate a legend with colors in PlantUML?
  • What does it mean apply-templates select='*'?
  • Sending latlng values to mysql query to update Google Maps Markers via routeboxer
  • Create a marker on the edge of a circle using jQuery/Javascript/GM
  • Einstein Riddle using Prolog
  • Resize rectangle in Paper.js
  • Draw donut google maps Android
  • Could we use owl:sameAs in an OWL restriction?
  • Leaflet : ordering GeoJSON elements inside a layer
  • Adding/removing L.control from leaflet.js map
  • How to use sass map-get with sass syntax? [duplicate]
  • Union of circles and polygon in leaflet
  • Sampling unique column indexes for each row of a numpy array
  • Want to move y-axis scrollbar with mouse wheel in highcharts/highstock
  • Finding an index in range of values between 0-100 in Python
  • mailto link is not working in Chrome Browser (Version :18.0.1025.152 m)
  • Change ListView font size in JavaFX
  • Cross browser key event handler in Dart
  • Can I have the market update an app that was installed from else where?
  • Haskell datatype conversion problems
  • Problem in Loading xml from specified url using javascript in FF & Google Chrome
  • css calendar - td background diagonal split - two colors
  • Selectively hide background elements when overlayed with transparent div
  • How to modify the colors in the legend of a plot using a fill gradient?
  • Mysterious problem with floating point in LISP - time axis generation
  • HTML download movie download link
  • Java applet as stand-alone Windows application?
  • Updating server-side rendering client-side
  • Jquery - Jquery Wysiwyg return html as a string
  • SQL merge duplicate rows and join values that are different
  • How to set the response of a form post action to a iframe source?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Reading document lines to the user (python)
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?