Maps Notes

How to add on demand quicklook projections on Google Maps

2016-04-14T01:23:00.003-07:00

I have been working on our flagship applications EarthImages and EarthImages Pro for a few years now. EarthImages is an e-commerce web application for Satellite Imagery.

If you search for satellite imagery, it is rather normal that you wish to see the said imagery before you buy it.
Full satellite images comes in large files, sometimes GBs of data. Of course you cannot show the full res image to a user. The solution is to use thumbnails and quicklooks. Quicklooks are lower res versions of the full image. They are typically 1k pixels wide images. Thumbnails are even lower, generally 100-200 pixels wide.
Quicklooks and thumbnails are provided by the image suppliers and they come in various formats, sizes and projections.

In EarthImages we want to show these images both as thumbnails and projected quicklooks on the map. Here's what it looks like for a search around Tunis, Tunisia.

EarthImages search results for Tunis, Tunisia

The challenge is to be able to display the quicklooks on the Google Maps (oh by the way we also do it for CesiumJs! but that's for another blog post).

Our solution: GDAL + MapServer to the rescue!

The basic idea is to georeference the image file, reproject it and store it on the disk as a GTiff so that they can be served by MapServer.

Now there are many twists, including:
- all suppliers have different types of quicklooks, eg formats are different, projections are different, etc... and of course they are not georeferenced.
- we have more than 30 millions records in our database of catalogue imagery. Needless to say we cannot generate all projected quicklooks beforehand, it has to be on demand only

Our implementation is a custom WMS service running as a Java servlet. Here are the main steps:
- user requests overlay of image on the map by clicking on an overlay button
- browser sends WMS requests with the product ID (the image)
- servlet checks for existing reprojected quicklook on disk
- if not existing, it retrieves the image and its parameters, especially the footprint and generates a GDAL script to reproject the image
- it forwards the call with the quicklook file name to MapServer which then serves the tiles as per user request

The overall process is quite fast. But sometimes quicklooks can be long to load from the supplier's servers. To provide feedback to the user whilst waiting we implemented this nifty trick:

This turns out quite easy to implement. All you need is when the user clicks on the overlay button to add an image to the DOM with its source url set to a meaningful WMS query for the image. Make the image element 1px by 1px so it is not visible. Once the image is loaded you remove it from the DOM and change the map overlay indicator to 'loaded', et voila!

StreetView Teleport

2013-12-18T00:55:00.000-08:00

I had never really played with the Google StreetView Map API before. A fascinating article in the NY Times enticed me to do so.

I love travelling, I guess like pretty much all of us. And like most of us I don't really have the time to do so!
What I like most in travelling is the cultural shock, finding differences, changing the routine.
With this desire in mind I quickly put together a "teleport" application between the main cities of the world (I need to work on the list), so you can navigate a town and decide to randomly teleport yourself to the next town in the list. The contrasts can be quite staggering, eg when you move from NY to, let's say, some poorer area of Caracas.

The application is available on this webpage. I'll write some explanation later on on the code etc... Nothing difficult.

The application is easy to use. Double click on the Teleport signs in the panorama, you will recognize them!

How to add PlaceHolders in GWT

2013-10-18T01:06:00.001-07:00

The placeholder property is not (yet) supported in GWT. They are however quite a nice UX feature especially if you are running short on space.
Setting a placeholder is however very simple for compatible browsers:

widget.getElement().setPropertyString("placeholder", message);

Of course your widget would have to support placeholders, eg TextBox, PasswordTextBox...
You can easily check that with a simple JSNI:

public native static boolean isSupported(Element element, String property) /*-{
        return element[property] != undefined;
}-*/;

Use your widget and the "placeholder" property name.
Things get slightly trickier when you want to support it for less recent browsers like IE9 and before. Then you need some level of programming.

public class TextBox extends com.google.gwt.user.client.ui.TextBox {

 private String message;

 public TextBox() {
 }
 
 public void setPlaceHolder(final String message) {
  this.message = message;
  sinkEvents(Event.ONKEYPRESS);
  sinkEvents(Event.ONBLUR);
  addDomHandler(new BlurHandler() {
    
   @Override
   public void onBlur(BlurEvent event) {
    refreshPlaceHolder();
   }
   }, BlurEvent.getType());
  addDomHandler(new KeyPressHandler() {
    
   @Override
   public void onKeyPress(KeyPressEvent event) {
    if(getStyleName().contains("placeHolder")) {
     TextBox.super.setText("");
     removeStyleName("placeHolder");
    }
   }
  }, KeyPressEvent.getType());
  refreshPlaceHolder();
 }
 
 protected void refreshPlaceHolder() {
  if(getText().length() == 0 && message != null) {
   super.setText(message);
   addStyleName("placeHolder");
  }
 }

 @Override
 public String getText() {
  if(getStyleName().contains("placeHolder")) {
   return "";
  }
  return super.getText();
 }
 
 @Override
 public void setText(String text) {
  super.setText(text);
  // if text is empty, display the placeholder
  refreshPlaceHolder();
 }
 
}

Pretty straightforward, if not text has been entered display some text in the textbox until an actual key is being pressed, in which case remove the placeholder. The trick is to not forget to override the getText and setText methods to make sure you return a sensible value!

This works well for TextBox and TextArea but for PasswordTextBox, things get slightly more complicated. The problem being that the placeholder will appear as hidden characters!
One way of handling this is to change the type of the field, ie temporarily change it to a TextBox when the placeholder is being displayed.

public class PasswordTextBox extends com.google.gwt.user.client.ui.PasswordTextBox {

... same as before ...
 
 public void setPlaceHolder(final String message) {

... same as before ...

Changes:

   addDomHandler(new KeyPressHandler() {
    
    @Override
    public void onKeyPress(KeyPressEvent event) {
     if(getStyleName().contains("placeHolder")) {
      PasswordTextBox.super.setText("");
      removeStyleName("placeHolder");
      getElement().setAttribute("type", "password");
     }
    }
   }, KeyPressEvent.getType());

... same as before ...
  }
 }
 
 protected void refreshPlaceHolder() {
  if(getText().length() == 0 && message != null) {
   super.setText(message);
   addStyleName("placeHolder");
Changes:
   getElement().setAttribute("type", "text");
  }
 }
}

This works fine for IE9, however if you try it for IE8 and below it won't work! These browsers won't allow you to change the input type on the fly. Your only solution is to have a TextBox or Span element on top.

Super simple GWT rating widget

2013-07-26T05:52:00.004-07:00

Not much to add except some code ;-)

public class Rating extends Composite {

 static private StyleResources style = GWT.create(StyleResources.class);
 
 static public interface Presenter {
  void onRatingChanged(int value);
 }
 
 private int rating;
 
 private Presenter presenter;

 private HTMLPanel container;

 public Rating() {
  this(5);
 }

 public Rating(final int starCount) {
  container = new HTMLPanel("");
  initWidget(container);
  getElement().getStyle().setDisplay(Display.INLINE_BLOCK);
  getElement().getStyle().setCursor(Cursor.POINTER);
  getElement().getStyle().setPadding(2, Unit.PX);
  for(int index = 0; index < starCount; index++) {
   Image starImage = new Image();
   container.add(starImage);
  }
  setRating(0);
  sinkEvents(Event.ONMOUSEMOVE | Event.ONMOUSEOUT | Event.ONMOUSEDOWN);
  addDomHandler(new MouseMoveHandler() {
   
   @Override
   public void onMouseMove(MouseMoveEvent event) {
    int rating = (int) Math.ceil((double) event.getRelativeX(getElement()) / getOffsetWidth() * starCount);
    displayRating(rating);
   }
  }, MouseMoveEvent.getType());
  addDomHandler(new MouseOutHandler() {
   
   @Override
   public void onMouseOut(MouseOutEvent event) {
    // revert to old value
    displayRating(Rating.this.rating);
   }
  }, MouseOutEvent.getType());
  addDomHandler(new ClickHandler() {
   
   @Override
   public void onClick(ClickEvent event) {
    setRating((int) Math.ceil((double) event.getRelativeX(getElement()) / getOffsetWidth() * starCount));
    if(presenter != null) {
     presenter.onRatingChanged(Rating.this.rating);
    }
   }
  }, ClickEvent.getType());
 }

 protected void displayRating(int rating) {
  int starCounter = 0;
  for(int index = 0; index < container.getWidgetCount(); index++) {
   Widget widget = container.getWidget(index);
   if(widget instanceof Image) {
    ((Image) widget).setResource(starCounter < rating ? style.star() : style.starEmpty());
    widget.getElement().getStyle().setPadding(2, Unit.PX);
    starCounter++;
   }
  }
 }
 
 public void setPresenter(Presenter presenter) {
  this.presenter = presenter;
 }

 public int getRating() {
  return rating;
 }
 
 public void setRating(int rating) {
  this.rating = rating;
  displayRating(rating);
 }
 
}

Of course you should provide a cssresource class of your own to get the stars, or you can use some url or define locally your ImageResource element. It's all up to you...
Set the presenter to take action on rating changed.

Add a TMS layer in Google Maps

2013-05-19T12:58:00.001-07:00

I had to enable TMS layers in Google Maps. Whilst this is very easy in OpenLayers, because it has built in support for it, turns out it requires a couple more lines of code in Google Maps. Here's some code to do so.

var TMSLayer = (function() {
function t(map, baseUrlPattern, yFlip, bounds) {
   var _map = map;
   var layer = new gm.ImageMapType({
       getTileUrl: function(coord, zoom){
              var proj = _map.getProjection();
              var zfactor = Math.pow(2, zoom);
              // get Long Lat coordinates
              var swCoord = proj.fromPointToLatLng(new gm.Point(coord.x * 256 / zfactor, (coord.y + 1) * 256 / zfactor));
              var neCoord = proj.fromPointToLatLng(new gm.Point((coord.x + 1) * 256 / zfactor, coord.y * 256 / zfactor));
              if(bounds) {
                    var tileLatLng = new gm.LatLngBounds(swCoord, neCoord);
                    if(!tileLatLng.intersects(bounds)) {
                          return "http://maps.gstatic.com/intl/en_us/mapfiles/transparent.png";
                    }
              }
              return baseUrlPattern.replace("$z", zoom).replace("$y", yFlip ? coord.y : (1 << zoom) - coord.y - 1).replace("$x", coord.x);
      },
      tileSize: new gm.Size(256,256),
              isPng:true
      });
      this._map = _map;
      this._layer = layer;
   }
      t.prototype.setVisible = function (visible) {
         var overlayMaps = this._map.overlayMapTypes;
         // find the layer
         for (var i = 0, I = overlayMaps.length; i < I && overlayMaps.getAt(i) != this._layer; ++i);
         if(visible) {
                 // add if the map was not already added
                 if(i == overlayMaps.length) {
                      overlayMaps.push(this._layer);
                 }
         } else {
                 // remove if the map was added
                 if(i < overlayMaps.length) {
                      overlayMaps.removeAt(i);
                 }
         }
      }
      t.prototype.remove = function() {
            this.setVisible(false);
      }
      t.prototype.setOpacity = function(opacity) {
            if(this._layer) {
                 this._layer.setOpacity(opacity);
            }
      }
      t.prototype.getOpacity = function() {
            if(this._layer) {
                 return this._layer.getOpacity();
            } else {
                 return 1.0;
            }
      }
      t.prototype.setZIndex = function(zIndex) {
            var i = this.getZIndex();
            var overlayMaps = this._map.overlayMapTypes;
            overlayMaps.removeAt(i);
            overlayMaps.insertAt(zIndex, this._layer);
      }
  
      t.prototype.getZIndex = function() {
            var overlayMaps = this._map.overlayMapTypes;
            for (var i = 0, I = overlayMaps.length; i < I && overlayMaps.getAt(i) != this._layer; ++i);
            return i;
      }
  
   return t;
})();

Using the layer is extremly straightfoward, just create the layer passing the google maps object, the base URL pattern, the x/y flip flag and optionally the bounds of the TMS layer. The base URL is the base URL to call for the TMS tiles with the following special characters in the string $z for zoom, $x and $y for the tile number. The x/y flip flag is to say whether the x/y tiling number starts from the top left corner or from the bottom left corner.
To move the layers up or down, you can use the zindex methods. It will actually move the layer within the overlays array.

An example code:

// create the layer
var tmsLayer = new TMSLayer(map, "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/$z/$y/$x", true);
// you need to set it visible
tmsLayer.setVisible(true);
// set the opacity of the layer
tmsLayer.setOpacity(0.5);

Most mind boggling css trick I am aware of

2013-05-15T01:38:00.001-07:00

This has to be the most mind boglling css trick I am aware of...

Suppose you have a div that contains floated elements and at the end a <div style="clear: both;"/> to force the parent div to account for floated elements dimensions and get the right dimensions. This simple trick works fine for me. There are more elegant ways of doing so but I am not that bothered about css optimisation...

Now, if that same div has a floating element in its ascendance tree, it shifts everything down in a seemingly unpredictable manner (looks like it is the height of the floating element though), UNLESS you specify "overflow: hidden;" in the div element...

NOW why is that so? I need to check the w3c specs...

Ruler with elevation

2013-05-15T01:09:00.001-07:00

I built a simple ruler application, whereby a user can create a multi segment line path and view the total distance, each segment's length and the elevation along the full path. The path can be edited like any line path, the difference being the measuring information displayed along the path. Of course all this makes heavy use of Google map's library features: elevation API, geometry library.

I found it's first use when checking how far a walking distance was my new house to my daughter's school ;-) Not sure the elevation is very useful in this case...

Enabling polygon dragging in Google Maps API v3

2013-01-21T01:07:00.001-08:00

Until now, I have used a central marker to provide dragging capability to a surface (Polygon, Circle, etc...) in Google Maps v3, but this time I needed direct drag capability.
The effect I need is the following: keeping the mouse down on a polygon and moving the mouse around moves the polygon by the equivalent amount, ie the polygon "follows" the mouse.

It turns out to be very easy to implement, simply add the "usual" drag and drop mouse handlers to the polygon and move the polygon by the amount (of lat lng) your mouse has moved.
There is one trick though: you need to temporarily disable the map drag, otherwise the map will move with your polygon (and therefore the polygon will not move on the map!).

Anyway, here's a simple code to add drag to your polygon. To use it simply call the setDraggable function with your polygon name.

function setDraggable(polygon) {
 
 var position = null;
 
 google.maps.event.addListener(polygon, "mousedown", function(e) {
  if(position == null) {
   position = e.latLng;
   displayDragged(true);
   map.setOptions({draggable: false});
  }
 });
 
 google.maps.event.addListener(polygon, "mouseup", function(e) {
  position = null;
  displayDragged(false);
  map.setOptions({draggable: true});
 });

 google.maps.event.addListener(polygon, "mouseout", function(e) {
  position = null;
  displayDragged(false);
  map.setOptions({draggable: true});
 });

 google.maps.event.addListener(polygon, "mousemove", function(e) {
  if(position != null) {
   shiftStraight(polygon.getPath(), position, e.latLng);
   position = e.latLng;
  }
 });

 // shifts a polygon following from to lat lng values
 function shiftStraight(path, fromLatLng, toLatLng) {
  // calculate shift
     var deltaLat = toLatLng.lat() - fromLatLng.lat();
     var deltaLng = toLatLng.lng() - fromLatLng.lng();
     // update polygon
     var index;
     for(index = 0; index < path.getLength(); index++) {
   var latLng = path.getAt(index);
         var wraps = Math.abs(fromLatLng.lat() + deltaLat) > 90;
         if(wraps) {
          path.setAt(index, new google.maps.LatLng(latLng.lat() + deltaLat, latLng.lng() + deltaLng + 180.0, true));
         } else {
          path.setAt(index, new google.maps.LatLng(latLng.lat() + deltaLat, latLng.lng() + deltaLng));
   }
     }
 }
 
 // update the display of the polygon when dragging or not dragging
 // override this function to add more fancy effects
 function displayDragged(dragged) {
  if(dragged) {
   polygon.setOptions({fillColor: "#fff"});
  } else {
   polygon.setOptions({fillColor: "#f00"});
  }
 }

}

A good old reset password workflow

2013-01-19T14:24:00.003-08:00

For my web application, I had to implement a good old reset password functionality - you know the one where you say I forgot my password, etc...

Following a seemingly well established procedure (twitter, facebook, yahoo...), 1) you are requested to provide your your account name (or your email) and a reset link is sent to your email account 2) when clicking on the link you are asked to change the password 3) the password is changed to the new one and you can try to log in again.

I like to reinvent the wheel, but not that much. So I decided to provide and implement the exact same procedure.
These are my steps for doing so:
1) I added a "forgot password" link on my sign in page. The link takes the new user to a "reset password" view/activity.
2) on the page, the user is asked to provide his account name and click a button to request a password reset. When the button is clicked, the account name is sent to the server.
3) on the server side, the request is received with the user name If the user indeed exists, I generate a very unique and strong token using a free java implementation of BCrypt. I then store a user reset token entity in my database. The user reset token is basically comprised of the user name, the BCrypt generated token and an expiry date.
4) I send the OK back to the client, which in turns display a message to the user, ie "Password reset request processed, an email was sent to you, etc...". Concurrently, I send the email to the user ;-), using the email address I have in the database (provided at registration).
5) The email I send contains a link to the change password view/activity of my application. The link has a resetToken token, which obviously equals the BCrypt token I generated and stored.
6) The user receives the email I sent and clicks on the link provided. The change password view/activity is opened. Through the interface, the user is requested to provide user name and a new password. When done, the user name and new password are sent back to the server, together with the token included in the link.
7) on the server side, the database is queried for a user reset token with user name and token value are the ones provided by the client. If the user reset token is found and it is not expired, the password is changed to the new one and all existing user reset token are removed from the database. The server sends the OK back to the client and the client is rerouted to the sign in page of the application.

Et voila! not completely trivial, but quite simple to implement, especially with all the java and GWT goodies available ;-)

A minimalistic implementation of file drag and drop widget for uploading (or more...)

2013-01-18T04:29:00.001-08:00

I have this need to add a drag and drop panel to directly upload files to my web application, without having to go through the sooooo outdated input file select element - you know, gmail like stuff.
Of course all this has to be done in GWT ;-)

I have found some implementation here, but, in the end and as usual, I decided to implement my own.

I started from the API and this blog on a js implementation.

As I am not a great writer and I don't have much time for writing neither, here is my code:

package com.metaaps.webapps.test.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.core.client.JsArrayString;
import com.google.gwt.event.dom.client.DragEnterEvent;
import com.google.gwt.event.dom.client.DragEnterHandler;
import com.google.gwt.event.dom.client.DragLeaveEvent;
import com.google.gwt.event.dom.client.DragLeaveHandler;
import com.google.gwt.event.dom.client.DragOverEvent;
import com.google.gwt.event.dom.client.DragOverHandler;
import com.google.gwt.event.dom.client.DropEvent;
import com.google.gwt.event.dom.client.DropHandler;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.SimplePanel;

public class DropFilesPanel extends SimplePanel {

 private FileUploadHandler fileUploadHandler = null;
 
 public DropFilesPanel() {
  
  // check file api is supported
  // if not supported simply hides
  if(!fileDragAndDropSupported()) {
   setVisible(false);
   return;
  }
  
  addDomHandler(new DragEnterHandler() {
   
   @Override
   public void onDragEnter(DragEnterEvent event) {
    highlight(true);
   }
  }, DragEnterEvent.getType());
  
  addDomHandler(new DragLeaveHandler() {
   
   @Override
   public void onDragLeave(DragLeaveEvent event) {
    highlight(false);
   }
  }, DragLeaveEvent.getType());
  
  addDomHandler(new DropHandler() {
   
   @Override
   public void onDrop(DropEvent event) {
    // stop default behaviour
    event.preventDefault();
    event.stopPropagation();
    // starts the fetching, reading and callbacks
    if(fileUploadHandler != null) {
     handleFiles(event.getDataTransfer(), fileUploadHandler);
    }
    highlight(false);
   }
  }, DropEvent.getType());
 }
 
        // native method to make use of the HTML5 file API functionality
 private final native void handleFiles(JavaScriptObject dataTransfer, FileUploadHandler fileUploadHandler) /*-{
  var files = dataTransfer.files;
  var i;
  var file;
  var reader = new FileReader();
  for(i = 0; i < files.length; i++) {
   file = files[i];
   if(fileUploadHandler.@com.metaaps.webapps.test.client.FileUploadHandler::checkFileName(Ljava/lang/String;)(file.name)) {
    var type = fileUploadHandler.@com.metaaps.webapps.test.client.FileUploadHandler::specifyFileType()();
    reader.onload = function(e) {
     fileUploadHandler.@com.metaaps.webapps.test.client.FileUploadHandler::handleFileContent(Ljava/lang/String;Ljava/lang/String;)(file.name, e.target.result);
    }
    if(type == "TEXT") {
     reader.readAsText(file);
    } else if(type == "BINARY") {
     reader.readAsBinaryString(file);
    } else if(type == "DATAURL") {
     reader.readAsDataURL(file);
    // not supported
//    } else if(type == "ARRAYBUFFER") {
//     reader.readAsArrayBuffer(file);
    } else {
    }
   }
  }
 }-*/;

 public void setFileUploadHandler(FileUploadHandler fileUploadHandler) {
  this.fileUploadHandler = fileUploadHandler;
 }

 /*
  * returns true if drag and drop files is supported
  */
 static private final native boolean fileDragAndDropSupported() /*-{
  if(("files" in DataTransfer.prototype) && $wnd.File && $wnd.FileReader) {
   return true;
  }
  return false;
 }-*/;
 
 static public boolean isSupported() {
  return fileDragAndDropSupported();
 }

        // hire a great web designer to write some fancy css and provide nice visual feedback to this widget
 protected void highlight(boolean highlighted) {
  // add label for visual feedback
  clear();
  if(highlighted) {
   getElement().getStyle().setBorderColor("#345");
   add(new Label("Drop files to start upload"));
  } else {
   getElement().getStyle().setBorderColor("transparent");
  }
 }

 // from jsArrays
 public static String[] toArray(JsArrayString values) {
     if (GWT.isScript()) {
       return reinterpretCast(values);
     } else {
       int length = values.length();
       String[] ret = new String[length];
       for (int i = 0, l = length; i < l; i++) {
         ret[i] = values.get(i);
       }
       return ret;
     }
 }
    
 private static native String[] reinterpretCast(JsArrayString value) /*-{ return value; }-*/;
    
}

Overwrite the highlight method if you want to have some fancy effects on enter and leave. Add a DragOver handler as well if you want to provide feedback when a user is hovering above the panel.

To get this working you will need the file upload handler interface:

package com.metaaps.webapps.test.client;

public interface FileUploadHandler {

 static public enum TYPE {TEXT, BINARY, DATAURL};
 
        // check the filename and extension and return true if you are happy with proceeding
        // returnning false will prevent the file from being read
 boolean checkFileName(String fileName);
 
        // tell the method to use to read this file
 TYPE specifyFileType();
 
        // do your stuff here, eg upload to a server
 void handleFileContent(String fileName, String fileContent);
 
}

To test the whole thing working:

  DropFilesPanel dropPanel = new DropFilesPanel();
  dropPanel.setHeight("100px");
  dropPanel.setWidth("100px");
  dropPanel.setFileUploadHandler(new FileUploadHandler() {
   
   @Override
   public void handleFileContent(String fileName, String fileContent) {
    Window.alert(fileName + " of size " + fileContent.length());
   }

   @Override
   public boolean checkFileName(String fileName) {
    return true;
   }

   @Override
   public TYPE specifyFileType() {
    return TYPE.BINARY;
   }
   
  });
  RootPanel.get().add(dropPanel);

And that's it ;-) I couldn't make it shorter...

How to write a fading animation in GWT

2012-11-21T14:06:00.004-08:00

In my own and humble opinion, GWT animation is a great example of the power of a well designed framework. It took me about 10 minutes, starting from this great post, to build a simple fade in/out animation for a map widget I have.

Here's the code I wrote:

import java.math.BigDecimal;

import com.google.gwt.animation.client.Animation;
import com.google.gwt.user.client.Element;

public class FadeAnimation extends Animation {

 private Element element;
 private double opacityIncrement;
 private double targetOpacity;
 private double baseOpacity;

 public FadeAnimation(Element element) {
  this.element = element;
 }
 
 @Override
 protected void onUpdate(double progress) {
  element.getStyle().setOpacity(baseOpacity + progress * opacityIncrement);
 }
 
 @Override
 protected void onComplete() {
  super.onComplete();
  element.getStyle().setOpacity(targetOpacity);
 }
 
 public void fade(int duration, double targetOpacity) {
  if(targetOpacity > 1.0) {
   targetOpacity = 1.0;
  }
  if(targetOpacity < 0.0) {
   targetOpacity = 0.0;
  }
  this.targetOpacity = targetOpacity;
  String opacityStr = element.getStyle().getOpacity();
  try {
   baseOpacity = new BigDecimal(opacityStr).doubleValue();
   opacityIncrement = targetOpacity - baseOpacity;
   run(duration);
  } catch(NumberFormatException e) {
   // set opacity directly
   onComplete();
  }
 }

}

It's pretty basic to use, here's an example to fade in or out depending on the mouse entering or leaving a panel.

final FadeAnimation fadeAnimation = new FadeAnimation(panel.getElement());
panel.addDomHandler(new MouseOverHandler() {
   
 @Override
 public void onMouseOver(MouseOverEvent event) {
  fadeAnimation.fade(1500, 1.0);
 }
}, MouseOverEvent.getType());
  
panel.addDomHandler(new MouseOutHandler() {
   
 @Override
 public void onMouseOut(MouseOutEvent event) {
  fadeAnimation.fade(1500, 0.3);
 }
}, MouseOutEvent.getType());

How to measure server side performance on RPC calls

2012-10-31T04:47:00.001-07:00

I needed a quick (and possibly dirty) way to evaluate my rpc call processing time, ie the time it takes to decode, process and generate the output of the request.

Here's a quick solution, have your RPC service implementation extend the following servlet (instead of directly RemoteServiceServlet):

public class MeasuringRemoteService extends RemoteServiceServlet {

 @Override
 public String processCall(String payload) throws SerializationException {
  String[] tokens = payload.split("\\|");
  long currentTime = System.currentTimeMillis();
  String output = super.processCall(payload);
  System.out.println("Call " + tokens[5] + "::" + tokens[6] + " run in " + (System.currentTimeMillis() - currentTime) + "ms");
  return output;
 }

}

This will print the name of the service, the method being called and the time spent in ms. Of course you can do some more fancy things such as store the results in a structured format (database, csv file) for further analysis.

How to use the GWT RPC Serialization for plain servlets

2012-10-25T08:00:00.002-07:00

I have a need to use plain Servlets, mainly because I want to be able to do some import/export of files into my application.

Unfortunately it is not possible to do so with the GWT RPC mechanism which is pretty locked up as I found out today. I Googled a bit before going my own way and it appears to be a recurring need. I found two relevant blogs:

This one, http://mayeur.com/wordpressfr/?p=70, uses the processGet method which can be overriden. I need a POST, so I left that one out.
And this one, http://softteco.blogspot.com.es/2010/02/serializing-objects-in-gwt-and.html, which is what I tried.

The issue as one reader commented, is that the deserialization won't work because it is missing access to a serialization policy that includes the types being serialized.
Getting a hand on the serialization policies is actually not a simple as one would have thought. There is one per service and all of them are kept in a static HashMap field of RemoteServiceServlet. To retrieve the serialization policy you need the key, which is basically the name of the serialization file stored on the server. This key bears the name of "strongName", which I must admit I have no explanation for such a name ;-)
Now bear with me a bit more, strongName is apparently an MD5 hash of the file content. This means that the name will change each time the service is modified. In the standard RPC mechanism, the strongName is embedded by the client call in the request. Unfortunately there is no method for accessing this value on the client side. So we are back to square one...

Back to the main issue, we need to get a hand on a relevant Serialization policy (ie one that includes the types being serialized by our Servlet).
After a couple of hours of going in circles, the way I did this is as follows:

find the relevant RPC service. If you have no suitable service, create a dummy one.
override the doGetSerializationPolicy and store the serialization policy into a field that will be accessible from another servlet. You will have to copy paste the static loadSerializationPolicy method from the RemoteServiceServlet as well.

Now in your servlet code you can use the following code to deserialize your data

ServerSerializationStreamReader streamReader = new ServerSerializationStreamReader(Thread.currentThread().getContextClassLoader(), new SerializationPolicyProvider() {
     
 @Override
 public SerializationPolicy getSerializationPolicy(String moduleBaseURL, String serializationPolicyStrongName) {
  return YOUR_RemoteServiceServlet.getSerializationPolicy();
 }
});
// Filling stream reader with data
streamReader.prepareToRead(YOUR_serialized_string);
// now you can start reading your objects

On the client side you will have to create a serialization as follows (as explained in the second blog):

 public String serialize(Serializable serializable) throws SerializationException {
  // Creating stream writer
  SerializationStreamWriter writer = ((SerializationStreamFactory) YOUR_ClientRemoteService).createStreamWriter();
  // Serializing object
  writer.writeObject(serializable);
  // Getting serialized object content
  return writer.toString();
 }

And that's it, with those small add ons you can serialize/deserialize any serializable types you have in your GWT application.

MVP and UiBinder, small tricks for Eclipse users

2012-07-14T01:59:00.001-07:00

I recently discovered a few tricks to speed up code development in Eclipse. As always once you know them, you wonder how you could have lived without them! Here are a couple of them.

1) auto generate MVP files. Generating the full MVP files for an activity can be quite a bit of (repetitive work), ie Place, Activity, Views, etc... Until recently my Google GWT menus were limited to the "right click in the package explorer > new > uibinder, module, etc...". It's with great pleasure that I discovered this hidden gem, right click any tree item of the package explorer > Google Web Toolkit > MVP View. This will open a dialog with all fields required to configure your MVP files, such as Places and Activity. You can even link to your client factory!

2) auto generate your inclusion tag in uibinder. Let's say you want to add a widget that is outside of the default included GWT package (user widget), eg a celltable or some of your own widgets. Before (what a fool I was), I would manually enter the xml tag of the widget package I needed. No need, just type "<" and start away with your widget name. Auto completion kicks in, choose you widget, and voila! The tag is automagically added!

The trick I have not found so far and that would really save me a lot of time, is automatic generation of @UiField in the java counterpart of the uibinder xml file. It would work somehow like the eclipse JDT Source menu, eg generate setter and getters. It would also include the possibility to generate UiHandlers as well. That would be VERY neat.

Google Maps and GWT performance live up to my expectations

2012-07-12T01:52:00.001-07:00

I am working on a customer web application through my company in Madrid.

The purpose of the application is to enable customers of the client company to search for past and future Satellite Imagery, create orders and follow up orders. The client company is also interested in using the application to manage their customer orders. In other words, it's an eCommerce web site for Satellite Earth Imagery.

Point is, when you search for archive imagery, that is to say imagery that has already been acquired and is stored on the company's servers, ie the archives, the amount of images returned can be very large.
It is not actually images that are sent back, but rather product descriptions - the actual images can be several GB in size. A product description includes metadata information, eg acquisition times, sensors and sensors characteristics and the contour of the image as a polygon. Some product also come with a Url to available image browses (thumbnails), which I need to display in a maps popup window.
The product description data matching a user request is sent back to the web application in xml format. Depending on the request made the xml can be very large (MB) and include many products, therefore many polygons.

The web application is developed with GWT and relies on Google Maps v3 to display the map features. Below you can see an overview of the main page.

It is built with pure GWT, no external library, and I even had to make my own JSNI port to my map layer on top of the Google Maps v3 API.

I can't say it has been an easy ride, but the functionality is mostly there now. I will try to write some blog posts on the few "tricks" I learned along the way.

I was pleasantly surprised to see that the processing speed when large data volumes are sent back from a request. My XML parsing is far from optimal I believe, which leads me to believe that the produced GWT code is really efficient. Also Google Maps v3 appears to handle very well large amounts of polygons as you can see on the picture, about 2700 polygons were added to the map, zooming and panning work well on Chrome and Firefox. Also the DataGrid is very fluid. Don't pay too much attention to the data in the picture, many fields were actually missing from the input data. Sorting is fast and paging too. I also have coupled the map polygons with the product in the list so that when one is selected the other is too (with automatic scroll in the list), all this works fast and well using custom events and the GWT event bus.

Conclusions: thanks Google for two really neat products :)

GWT "ghost" errors

2012-03-26T06:15:00.001-07:00

I had this freaky bang your head against the wall compilation error with my GWT Eclipse project.
Some issues in a library project I use with JSNI and reusing interfaces, which is not allowed unfortunately. However I removed the issue by not including the offending module in the project. But the compilation error persists and it references code that just does not exists anymore (hence the ghost thing in my title)!
I did what a man (or woman) with experience will do: switch on and off the TV.
But, alas, even after restarting Eclipse (I did not reboot the computer), the issue was still there.
Turns out GWT keeps some cached code in a directory called gwt-unitCache, right below the war file, so normally at the root of your project's directory.
I deleted those files, recompiled and voila!

Display map coordinates

2012-03-08T04:09:00.003-08:00

Here is another small trick. I need to display the mouse position as a (lat, long) value. I went to the samples and found the latlng-to-coord-control example.

Works fine as long as your mousemove map events are not intercepted by a marker or an overlay.

So I had to modify a bit, here's my solution:

// dummy overlay from http://code.google.com/p/gmaps-api-issues/issues/detail?id=2879
DummyOverlay.prototype = new google.maps.OverlayView;
DummyOverlay.prototype.onAdd = function(){}
DummyOverlay.prototype.onRemove = function(){}
DummyOverlay.prototype.draw = function(){ };
function DummyOverlay(map) {this.setMap(map);}

function projectionHack(map)
{
        if(map.dummyCanvas == null)
        {
                map.dummyCanvas = new DummyOverlay(map);
                map.getMapCanvasProjection = function() {return this.dummyCanvas.getProjection()}
        }
}

function latLngOverlay(map) {
    var div = document.createElement('DIV');
    div.className = "ei-latLngOverlay";
    this.div_ = div;
    map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(this.div_);
    function findPos(obj) {
        var curleft = 0;
        var curtop = 0;
        if (obj.offsetParent) {
            do {
                curleft += obj.offsetLeft;
                curtop += obj.offsetTop;
            } while (obj = obj.offsetParent);
        }
        return {x: curleft, y:curtop};
    }

    var mapDiv = map.getDiv();
    projectionHack(map);
    google.maps.event.addDomListener(mapDiv, "mousemove", function(event) {
        var offset = findPos(mapDiv);
        var latLng = map.getMapCanvasProjection().fromContainerPixelToLatLng(new google.maps.Point(event.clientX - offset.x, event.clientY - offset.y));
        div.innerHTML = "Position: " + latLng.toUrlValue(4);
      });
}

latLngOverlay.prototype.show = function() {
  this.div_.style.display = 'block';
}

latLngOverlay.prototype.hide = function() {
    this.div_.style.display = 'none';
}

The DummyOverlayView is needed to get the map projections for the div and be able to make the projection on the fly. You can see the discussions at http://code.google.com/p/gmaps-api-issues/issues/detail?id=2879

I checked it out with the following webpage http://www.thegpscoordinates.com/spain/madrid/

Adding a glass panel to capture events on my Google Maps map

2012-01-30T11:16:00.000-08:00

OK, this one got me sweating so I thought I put it online. Also because I found many fellow coders left stranded with a similar problem.

I developed my own library to add and edit shapes to the google maps v3. When you hover above the shapes a nice little tooltip gives you instructions as to what you can do with the shape. Problem is when creating new shapes, the tooltip captures the map events. As a consequence I cannot add any points to my shape if they are above an existing shape... rather annoying. So I thought I could add a glass panel on top to capture all map events before they get to the underlying overlays. Simple no?

Well, without further ado, here's the code, the explanation follows:

function glassOverlay(map) {
    this.div_ = null;
    this.map = map;
    this.eventsListener = [];
    this.setMap(map);
  }

glassOverlay.prototype = new google.maps.OverlayView();

glassOverlay.prototype.onAdd = function() {
    if(this.div_ == null) {
          var div = document.createElement('DIV');
          div.style.border = "transparent";
          div.style.background = "transparent";
          div.style.position = "absolute";
          div.style.top = "0px";
          div.style.left = "0px";
          // default positioning
          div.style.width = "300px";
          div.style.height = "300px";
          this.div_ = div;

          // We add an overlay to a map via one of the map's panes.
          // We'll add this overlay to the overlayImage pane.
          var panes = this.getPanes();
          panes.overlayMouseTarget.appendChild(div);

          // initialise the handlers
          var type;
          for(type in this.eventsListener) {
                  var callback = this.eventsListener[type];
                  if(typeof callback == "function") {
                                this._addEventListener(type, callback);
                  }
          }
    }
    var self = this;
    google.maps.event.addListener(this.map, "dragend", function() {self.draw()});
}

glassOverlay.prototype.draw = function() {
    var bounds = this.getMap().getBounds();
    var projection = this.getProjection();
    var topRight = projection.fromLatLngToDivPixel(bounds.getNorthEast());
    var bottomLeft = projection.fromLatLngToDivPixel(bounds.getSouthWest());
    // resize the div to take up the whole map area
    this.div_.style.width = Math.round(topRight.x - bottomLeft.x) + "px";
    this.div_.style.height = Math.round(bottomLeft.y - topRight.y) + "px";
    this.div_.style.left = bottomLeft.x;
    this.div_.style.top = topRight.y;
}

function findPos(obj) {
    var curleft = 0;
    var curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
    }
    return {x: curleft, y:curtop};
}

glassOverlay.prototype.addEventListener = function(type, callback) {
    // if overlay has been initialised
    if(this.div_ != null) {
            this._addEventListener(type, callback);
    } else {
            // else store th callback for the add function
            this.eventsListener[type] = callback;
    }
}

glassOverlay.prototype._addEventListener = function(type, callback) {
    var me = this;
    google.maps.event.addDomListener(this.div_, type, function(event) {
            google.maps.event.trigger(me, type, event);
    });
    function cancelEvent(e) {
        e.cancelBubble = true;
        if (e.stopPropagation) e.stopPropagation();
    }
    var projection = this.getProjection();
    google.maps.event.addListener(me, type, function(event) {
        var offset = findPos(me.div_);
        callback({
                latLng: projection.fromContainerPixelToLatLng(new google.maps.Point(event.clientX - offset.x, event.clientY - offset.y))
        });
        cancelEvent(event);
    });
}

glassOverlay.prototype.onRemove = function() {
 this.div_.parentNode.removeChild(this.div_);
 this.div_ = null;
}

First you need an OverlayView and add it to the OverlayMouseTarget panel, which is one of the top most panels. This is done at the onAdd level, one of the three methods, with onRemove and draw, you need to implement for a custom OverlayView. The OnAdd method adds a div element to the window. You'd want to set the div to cover the full screen, however this is not possible statically as the map can be paned and zoomed. The div position needs updating on each of these map event. The draw method is called when the zoom level has changed and "sometimes" when the map has paned (this is what cost me the most time). To make sure the draw method is called any time we pan, we add a dragend event listener to the map.

The draw method needs to set the div position and dimensions so that it always cover the full zone of the map. For this we use the current bounds of the map and convert the bounds to points with the overlay's projection. This gives us the right width, height and top and left position within the map container.

Next we will want to handle events with the overlay. For this we add a dom listener via the map api. The dom listener will receive the standard DOM Mouse events, unfortunately not the nice google maps events with lat, lng coordinates of the point where the click event occurred. So we have to work the mechanics. For this we use the standard clientX and clientY mouse event coordinates and realign them using the div's position in the screen. Retrieving the equivalent lat lng coordinates in the map is straightforward with the use of the projection.fromContainerPixelToLatLng method. The newly formatted event is passed to the event listener and voila!

The findpos function comes form this post.

OK that was a bit quick, if there are any parts that you would like further explanations on, please let me know!

EDIT: sometimes solutions are way more simple than anticipated. I replaced this whole heavy mechanics, that didn't work very well at low zooms by the way, by a transparent Rectangle overlay spanning the whole globe!

Open Source GIS software

2011-09-08T06:52:00.000-07:00

I am subscribed to the osgeo anouncements. They do send an email every 3 months so it's really not much work to go through as well each of them is of great interest. The latest is on a new DVD release that contains a great deal of excellent GIS OS SW. I am going to quote Frank Warmerdam on this:

Highlights
    * 47 Quality GeoSpatial Open Source applications installed
      and pre-configured
    * Quality free world maps
    * One page overviews and quick starts for all applications
    * Overviews of key OGC standards
    * Translations for Greek, German, Polish, Spanish and Japanese


Contents

   Browser Clients
    * OpenLayers 2.10 - Browser GIS Client
    * Geomajas - 1.8 Browser GIS Client
    * Mapbender 2.7.2 - Geoportal Framework
    * MapFish 2.2 - Web Mapping Framework
    * GeoMoose 2.4 - Web GIS Portal

   Crisis Management
    * Sahana Eden 0.5.5 - Disaster management
    * Ushahidi 2.1 - Mapping and Timeline for events

   Databases
    * PostGIS 1.5 - Spatial Database
    * SpatiaLite 2.3.1 / 2.4 beta - Lightweight Database
    * Rasdaman 8.2 - Multi-Dimensional Raster Database
    * pgRouting 1.05 - Routing for PostGIS

   Desktop GIS
    * Quantum GIS (QGIS) 1.7.0
    * GRASS GIS 6.4.1
    * gvSIG Desktop 1.11
    * User-friendly Desktop Internet GIS (uDig) 1.2.2
    * Kosmo Desktop 2.0.1
    * OpenJUMP GIS 1.4.0.1
    * SAGA 2.0.7
    * OSSIM 1.8.6 - Image Processing
    * Geopublisher 1.7 - Catalogue
    * AtlasStyler 1.7 - Style Editor
    * osgEarth 2.0 - 3D Terrain Rendering

   Navigation and Maps
    * GpsDrive 2.11 - GPS Navigation
    * Marble 1.0.2 - Spinning Globe
    * OpenCPN 2.5.0 - Marine GPS Chartplotter
    * OpenStreetMap Tools - JOSM, Merkaartor, Gosmore, Osmarender
    * Prune 12 - View, Edit and Convert GPS Tracks
    * Viking 9.9.94 - GPS Data Analysis and Viewer
    * zyGrib 5.0 - Weather Forecast Maps

   Spatial Tools
    * GeoKettle 2.0-RC1 - ETL (Extract, Transform and Load) Tool
    * GDAL/OGR 1.8.0 - GeoSpatial Data Translation Tools
    * GMT 4.5.2 - Cartographic Rendering
    * Mapnik 0.7.1 - Cartographic Rendering
    * MapTiler 1.0beta2 - Create Map Tiles
    * OTB 3.10 - Image Processing
    * R Spatial Task View 2.12.1 - Statistical Programming

   Web Services
    * GeoServer 2.1.1
    * MapServer 6.0.1
    * deegree 3.0
    * GeoNetwork 2.6.4 - Metadata Catalog and Catalog Services for Web
    * MapProxy 1.1.1 - Proxy WMS &amp; tile services
    * QGIS Server 1.7.0 - Web Map Service
    * 52°North WSS 2.2.0 - Web Security Service
    * 52°North WPS - 2.0 RC6 - Web Processing Service
    * 52°North SOS - 3.2.0 Sensor Observation Service
    * TinyOWS 1.0 - WFS-T Service
    * ZOO Project 1.0.0 - Web Processing Service

   Data
    * Natural Earth 1.3.1 - Geographic Data Sets
    * OSGeo's North Carolina, USA Educational dataset
    * OpenStreetMap - Sample extract from OpenStreetMap

   Geospatial Libraries
    * GeoTools - Java GIS Toolkit
    * MetaCRS - Coordinate Reference System Transformations
    * libLAS - LiDAR Data Access

I thought I'd copy-post it. It's a great reference list to start from if you are new to this side of the world.

Sorry, No GWT

2011-02-08T11:05:00.000-08:00

I can't say I haven't tried though. After multiple attempts I gave up using GWT, but learned a couple of things along the way.
I gave up, mostly because the Map v3 API is not available yet. There are a couple of projects out there but they are on a standstill (alongside rumours of an official port under the google api project).
Still, the experience is worth a little post. Just let me know where I got it wrong.

I am a relative newbie to GWT. I adopted it quickly though. Mostly because it scales well compared to javascript, no matter which framework you use (I use the excellent jQuery BTW).
To compare GWT and JS developments, I would use the following diagram:

This is no scientific work, just my impressions and my personal experience. Notice how I conveniently forgot to put any tick marks on my axis ;-)? I can't tell you when the two curves meet, and therefore when you should start using GWT, but they meet. I guess it is down to you, your ability with both languages, the IDE you use, how organised you are, etc...
I am actually equally at ease (or not) with both languages. My explanation for such curves is mostly down to the language characteristics. The use of the Java language in GWT and the many integrated features you get in an Java IDE, eg refactoring, type checking, etc... certainly account for a lot. Conversely, the flexibility of javascript is fantastic, and most efficient when it comes to quickly build a bit of functionality. To make a bold comparison, I would say it's like building a house or building a skyscraper. You certainly wouldn't use the same techniques.

Anyway, for the ones that haven't followed, the idea is to create an animated Map widget with GWT.
I started looking into how you would do that, starting with "how to expose widget methods to a js script".
The Google API Chart Tools provides a good starting point. I read the page documentation, did a bit of nosing in the library code and learned the basics of JSNI. In essence, it all drills down to:

in your module load method, register your javascript objects

YourWidget.registerWidget("NameOfWidget", new WidgetFactory() {
      public YourWidget create() {
          return new YourWidget();
      }
});

YourWidget must add the following (best is probably to create an abstract version that you will extend with your widgets functionality):

Define the factory:

public interface WidgetFactory {
      YourWidget create();
}

public static final native void registerWidget(String name, WidgetFactory factory) /*-{
    // setup the constructor
    $wnd[name] = function(container) {
    this.gwt_widget = @your.widget.fullname::createWidget(Lyour/widget/fullname$WidgetFactory;Lcom/google/gwt/core/client/JavaScriptObject;Lcom/google/gwt/user/client/Element;)(factory, this, container);
}
    // setup the exported methods
    $wnd[name].prototype.yourWidgetMethod = function(param1, param2) {
        return this.gwt_widget.your.widgets.fullname@::yourWidgetMethod(Lparam1/full/type,Lparam2/full/type)(param1, param2);
    }
    // add more methods as required
}-*/;

Implement the factory:

@SuppressWarnings("unused")
private static YourWidget createWidget(WidgetFactory factory, JavaScriptObject jsWidget, Element container) {
    YourWidget widget = factory.create();

    RootPanel.get(container.getId()).add(widget);

    return widget;
}

I won't go into too much details, because, in fact, there is a whole project to help you do that, as I found out a bit too late...

That was just square 1 and I am still in the steep learning curve phase.

If you have followed the previous steps or used the GWT Exporter project, the widget now exposes its functionality to a js script. You can go into your html file and start playing with it. For instance, use the following code in your html file:

var yourWidget = new NameOfWidget(container);
   yourWidget.yourWidgetMethod1(param1, param2);
   // etc...

The next problem (square 2) was how to integrate the Google Maps in my widget. I want the user to pass his own Google Maps so that he keeps full configurability. The problem is that only Google Maps v2 is truly supported at the time of writing. And v2 as you might know is deprecated now. There are in fact a couple of projects enabling the use of Google maps v3 with GWT. I can think of this one for instance. However, a quick look at the features supported, update times and pending issues convinced me not to go with them. Granted I could help and participate in the project, but that's a whole new story.

That's basically where I got stuck, not being able to use v3 is a show stopper. I guess this will always be a problem with GWT, catching up on js developments. I had already worked a few hours and produced a fair amount of code. It's quite reluctantly that I decided to switch to good old javascript, testing along the way my GWT vs JS theory. Check my next Post.

Being Agile

2011-01-29T10:24:00.000-08:00

My disappointment set aside (why is it Google always steals away my ideas? generally before I even invented them! ;-)), I decided to scour the Fusion Tables web site to evaluate the application and find out if there was any room for business.
I am not a seasoned market/product manager but one thing I found out over the years is that forums (or fora should I say) are a great way of finding out what people want. So there I went on the Fusion Tables forum and features request web pages.

The features request page can be found here. You can vote on a feature already requested and leave a comment, eg OK but I would like it more like that (please). OR you can submit a new one using the online form. Features can be ordered by number of votes they received.
At the time of writing,the most popular ones were ability to configure the marker rendering, more complex filtering options, etc...
One drew my attention though, the ability to display time animations. For instance we are talking about a moving marker, representing let's say the path followed by some great explorer (just an example). I actually developed such a functionality in one my projects (check my other blog on it).
So I decided to start with a widget. One that can be added to a Google Map. The widget will consist of an play/pause/stop... UI with a time display, automatically pulling data from a said table, and displaying an animated layer on top of the map.
The widget can also propose a number of animation options such as automatic extrapolation of trajectories.
I need an elegant way to integrate with the map and the user data but it's a good start.

My brain's ticking away now. I'll let you know what I come up with.

Awww what a blow

2011-01-28T02:17:00.000-08:00

This morning, taking the elance Google Maps test hehehe, I discovered Fusion Table. For those who don't know, go to the web page or jump to the full version of my notes, below. Typical right? just when I was about to produce something useful...

You could say it's about time I found out. Fusion Table have been around for quite a while now (at least 2 years apparently).
Through my first readings and tinkering, I'd say Fusion Table is a giant table, made available to all Google account owners to store and retrieved their (structured) data (through tables, in a RDBMS way). Data can be retrieved and visualised using the whole range of Google data visualisation tools. That includes:

Maps
Charts
StoryLine

You can actually embed a map in websites, as shown below. Check this tutorial.

Pretty cool no? BTW, it's a public table on the wikileak cables.

There is plenty more visualisation widgets, depending on the content of your data. For instance you can plot a storyline if your table contains a date entry.

Google is the heaven of hackers.

So what is it I am going to do now??? Well, right now I am going to look for any essential lack of features and/or existing restrictions. I will find something useful to do.

The idea

2011-01-25T13:04:00.000-08:00

Well simply put I want to build a "Drupal of Maps". I have been browsing on Elance lately for Map/GIS related work and there are quite a few projects out there that could be built with a "Drupal of Maps".

So, how do you get on with building a "Drupal of Maps" (DoM) and what technology do you use?

I'll start with the basic requirements if you don't mind. Here's what I'm thinking about:

Actors are the Administrator(s) and the User(s). The administrator builds the website, the user views the result.
The result is either an embeddable widget or a full blown website/webpage. Both are comprised of at least a Map.
The DoM is either installed locally or hosted by a third party
The Administrator configures his website/webpage via a WYSIWYG editor, ie like in Drupal.
The Administrator can configure the layout to a certain extent, as well as choose themes or even create new ones.
The Administrator can define/create/add/edit/delete his own (Geographical) entities through a dedicated UI. An entity has one and only one Geometry field describing the geographical characteristics. An entity data can be restricted or public. The owner of the data can decide at each entry level the access restrictions.
The Administrator can batch dump entity data in the system.
The Administrator can add DoM registered widgets to his website/webpage.
DoM has an API to enable integration of third party widgets.
The Administrator can add entities to its website/webpage. Entities can be taken from the Administrator's own data set or from the publicly available ones.
An (entity + filtering rule) is represented in the website/webpage by a Layer. The display of a layer can be customised, eg color or type.
Website/webpage access can be restricted using authentication mechanisms
The User, if authorised, can view/access the website/webpage. It can interact with it via the Map and the different widgets available.
The User if authorised can leave comments or even contribute to the data by adding new entries or editing existing ones.
The data should be versioned.

Right that's already a good start. Bear in mind it will evolve during the design.

Next Post I will start talk high level SW and the techno stack I am thinking of employing.