Google Mapplet for creating persistent point markers

This Google Mapplet can be used to create persistent markers on Google Maps that will still be there when you close and reopen the web page. The markers will remain until they are explicitly deleted. The mapplet makes use of the IndexDB feature of the HTML5 specifications to persist the markers in the browser. This means that only modern Internet browsers such as Chrome, Firefox, and the upcoming Internet Explorer 10 will be able persist the markers. The mapplet can function in older browsers such as Internet Explorer 8 or 9 but the markers will not be retained on the next visit to the page.

To run this mapplet, click on the link http://dominoc925-pages.appspot.com/mapplets/plpoint.html.

Choice of markers
You can choose the type of marker to be pinned on to the map e.g. green, orange etc. Once placed, the markers can be dragged to another location, deleted, and labelled.

Export Points
The markers can be exported out as KML or comma-separated-values (CSV) format. This can be done by clicking the Export button in the side bar.

The Export Points dialog box is shown below.


Export Points example

1. In the Output format drop down  box, choose the output format, e.g. KML.
   
   The Coordinate system type drop down box is enabled for CSV and disabled for KML.
   
2. If necessary, in the Coordinate system type field, make a choice e.g. Projected.
   
   The Projection drop down box is enabled.
   
3. If necessary, in the Projection field, choose a suitable destination projection for the output e.g. UTM 48N.
   
4. If necessary, in the Geodetic datum field, choose a suitable destination datum e.g. WGS84.
   
5. Click Start Export.
   
   The markers are exported to the destination format. The results are displayed in the Results box.
   
   
   
6. Click the Results text. Press CTRL+C.
   
7. In Notepad, press CTRL+V.
   
   The results are pasted into Notepad.
   
   
   
8. Close and save the results into a *.csv file.

 An example of the results of a KML output displayed in Google Earth is shown below.

Use HTML5 IndexedDB cursors to update existing records

The HTML5 IndexedDB is still in the working draft stage and not fully implemented in major Internet browsers yet. Nevertheless, I tried to use its asynchronous API to develop a Google Maps application. It took me a little while to figure out how to update an existing record in the IndexedDB database store. This can be done by opening a read-write cursor to the record to be updated. Then call the cursor update method to replace it with the new record.

An example Javascript code snippet is shown below.

try {

var objDb;    //the database to update

var store = 'myStore';    //the database store to update

var key = 88;    //the key of the existing record to update

var newRec = 'hello world';    //the new record

var objStore = null;

var objTrans = null;

var objCursor = null;

var objKeyRange = null;

//...etc...open the database....etc...

//open a read-write transaction

objTrans = objDb.transaction(store,_IDBTransaction.READ_WRITE);

//get the store

objStore = objTrans.objectStore(store);

//create a range from the key

objKeyRange = _IDBKeyRange.only(key);

//open a cursor of only the record to update

objCursor = objStore.openCursor(objKeyRange);

objCursor.onsuccess = function(evt){

  var cursor = evt.target.result;

  //do the update

  var objRequest = cursor.update(newRec);

  objRequest.onsuccess = function(ev){

    console.log('Success in updating record 88');

    };

  objRequest.onerror = function(ev){

    console.log('Error in updating record 88');

    };

  };

  objCursor.onerror = function(evt){

    console.log('Error in retrieving record 88');

  };

}

catch (e){

  console.log('Exception:'+e.message);

}