Firefly overlay for Google Maps

1. Overview

Firefly module is meant for drawing and animating brightly colored and partly transparent dots with blurred edges and varying sizes atop of a Google Maps. The result looks like a firefly, hence the naming of the module.


2. Module description

2.1. Requirements

Firefly utilizes Google Maps API V3 for drawing the objects. In order to use Firefly, key for Google Maps API V3 is required. The key is free and only requires Google account.

Information on how the Google Maps API works: Google Maps API tutorial.
To create the Google Maps API V3 key:

2.2. Structure

Module includes two classes, MovementOverlay and firefly_object. The second class, i.e. firefly_object, is a container for single firefly-object and its variables. Class MovementOverlay is the main class, which keeps track of the firefly- objects' size and movement. Firefly-objects and the animation are controlled through this class.

Listing of MovementOverlay's methods:

Listing of methods for firefly_object:

2.3. Limitations

When animating large number of objects at the same time, the whole animation can become considerably slower.

Also different browsers will behave differently when animating firefly-objects. At least Chrome and Opera have some problems with animating lots of objects at once smoothly. Firefox and Safari do not have the same kind of problems and will make the animation look considerably smoother. This could be caused by the Google Maps itself, since the dots are just circles found on Google Maps API, which have their center and size changed constantly.

3. Usage example

Below is a simple example Javascript code for creating Google Maps map-object and firefly overlay. One single object is created to the overlay, after which its animated, stopped and then the overlay is being reset.

//Google maps options
var myOptions = {
    center: new google.maps.LatLng(65.012301, 25.465275),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP

//Create Google Maps Object to a div with an id of 'mapCanvas'
var map = new google.maps.Map(document.getElementById("mapCanvas"), myOptions);

//Create the firefly overlay. Maps object is passes as a parameter.
var fireflyOverlay = new MovementOverlay(map);

//Add object to overlay
fireflyOverlay.add_object({'startCoord': new google.maps.LatLng(65.012301, 25.465275),
      'endCoord': new google.maps.LatLng(65.036787,25.479041),
      'startSize': 60,
      'endSize': 40,
      'colour': 'rgb(0,100,0)'});

//Start the animation


//Stop the animation

//Reset to animation to its initial state

In the picture below is an example of how multiple firefly-objects with varying sizes and colours will look with the Google Maps.