[OpenLayers-Commits] r11285 - in sandbox/jgrocha/openlayers: .
examples
commits-20090109 at openlayers.org
commits-20090109 at openlayers.org
Wed Feb 23 04:58:23 EST 2011
Author: jgrocha
Date: 2011-02-23 01:58:23 -0800 (Wed, 23 Feb 2011)
New Revision: 11285
Added:
sandbox/jgrocha/openlayers/examples/localstorageexample.html
sandbox/jgrocha/openlayers/examples/localstorageexample.js
Modified:
sandbox/jgrocha/openlayers/
Log:
New example for offline editing using local storage and sql storage
Property changes on: sandbox/jgrocha/openlayers
___________________________________________________________________
Added: svn:ignore
+ .project
Added: sandbox/jgrocha/openlayers/examples/localstorageexample.html
===================================================================
--- sandbox/jgrocha/openlayers/examples/localstorageexample.html (rev 0)
+++ sandbox/jgrocha/openlayers/examples/localstorageexample.html 2011-02-23 09:58:23 UTC (rev 11285)
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+ <head><meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /><meta name="apple-mobile-web-app-capable" content="yes" />
+ <title>OpenLayers Example</title>
+ <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+ <link rel="stylesheet" href="style.css" type="text/css">
+ </head>
+ <body>
+ <h1 id="title">OpenLayers Local Storage Basic Example</h1>
+ <div id="tags">
+ simple, basic, local storage, sql storage
+ </div>
+ <p id="shortdesc">
+ Demonstrate a simple map that can read features from local storage.
+ </p>
+ <div id="map" class="smallmap">
+ </div>
+ <div id="docs">
+ <p>
+ This is a basic example demonstrating the use of local storage to keep permanent features on the client side. This can be used for offline editing.
+ </p>
+ <p>
+ View the
+ <a href="localstorageexample.js" target="_blank">localstorageexample.js</a> source to see how this is done.
+ </p>
+ </div>
+ <section>
+ <h2>Local Storage or (Local) SQL Storage Demo</h2>
+ <p>
+ This browser supports:
+ <span id="storageSupport"></span>
+ </p>
+ <p>
+ This variant of the app is using the <span id="storeType">sqlStore</span>.
+ </p>
+ <p>
+ Assuming your browser supports it, you can try this app using the
+ <a href="?local">localStore</a> |
+ <a href="?sql">sqlStore</a>
+ </section>
+ <section>
+ <h2>Check in new features</h2>
+ <button id="populategeolocation">
+ Get current geolocation
+ </button>
+ <table>
+ <tbody>
+ <tr>
+ <th>Summit:</th>
+ <th>Elevation:</th>
+ <th>Latitude:</th>
+ <th>Longitude:</th>
+ <th> </th>
+ </tr>
+ <tr>
+ <td class="geo">
+ <input id="summit" size="6" value="Lausanne">
+ </td>
+ <td class="geo">
+ <input id="elevation" size="6" value="777">
+ </td>
+ <td class="geo">
+ <input id="latitude" size="6" value="47.12">
+ </td>
+ <td class="geo">
+ <input id="longitude" size="6" value="8.56">
+ </td>
+ <td>
+ <button id="save">
+ Add
+ </button>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </section>
+ <section>
+ <h2>List all summits</h2>
+ <button id="list">
+ List All
+ </button>
+ <div id="searchResults">
+ </div>
+ </section>
+ <section>
+ <h2>Deleting all rows</h2>
+ <button id="delete">
+ Delete All
+ </button>
+ </section>
+ <script src="../lib/OpenLayers.js">
+ </script>
+ <script src="localstorageexample.js">
+ </script>
+ </body>
+</html>
\ No newline at end of file
Added: sandbox/jgrocha/openlayers/examples/localstorageexample.js
===================================================================
--- sandbox/jgrocha/openlayers/examples/localstorageexample.js (rev 0)
+++ sandbox/jgrocha/openlayers/examples/localstorageexample.js 2011-02-23 09:58:23 UTC (rev 11285)
@@ -0,0 +1,217 @@
+var map = new OpenLayers.Map("map");
+
+var ol_wms = new OpenLayers.Layer.WMS(
+"OpenLayers WMS",
+"http://vmap0.tiles.osgeo.org/wms/vmap0",
+{layers: "basic"}
+);
+
+var vecLayer = new OpenLayers.Layer.Vector("vector");
+
+map.addLayers([ol_wms, vecLayer]);
+
+map.addControl(new OpenLayers.Control.LayerSwitcher());
+map.zoomToMaxExtent();
+
+/* Application/UI Logic ******************************************************/
+
+var localStore;
+var localStoreAvailable = false;
+var sqlStoreAvailable = false;
+
+window.onload = function() {
+ // console.debug(window);
+
+ listStorageSupport();
+ var storeType = document.location.search.substr(1)+"Store";
+ console.log('storeType: ' + storeType);
+
+ if (storeType == 'Store') {
+ console.log('Não está definido no URL');
+ if (sqlStoreAvailable) {
+ storeType = "sqlStore";
+ } else if (localStoreAvailable) {
+ storeType = "localStore";
+ } else {
+ storeType = "noLocalStorageAvailable";
+ }
+ }
+
+ document.querySelector("#storeType").innerHTML = storeType;
+ store = window[storeType];
+ localStore.setup();
+ getLayerFromLocalStorage();
+ updateList();
+
+ console.debug(store);
+
+ document.querySelector("#save").onclick = function() {
+ var checkin = {
+ summit: document.querySelector("#summit").value,
+ elevation: document.querySelector("#elevation").value,
+ latitude: document.querySelector("#latitude").value,
+ longitude: document.querySelector("#longitude").value
+ };
+ console.log(checkin);
+ localStore.save(checkin, function() {
+ updateList();
+ });
+ vecLayer.addFeatures(new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Point( checkin.longitude, checkin.latitude), {summit: checkin.summit, elevation: checkin.elevation} ));
+
+ };
+ document.querySelector("#delete").onclick = function() {
+ vecLayer.removeAllFeatures();
+ localStore.deleteall();
+ updateList();
+ };
+ document.querySelector("#list").onclick = function() {
+ updateList();
+ };
+ document.querySelector("#populategeolocation").onclick = function() {
+ populateGeo();
+ };
+}
+function listStorageSupport() {
+ var storSupp = "<ul>";
+ for (var i in window) {
+ if (i == "sessionStorage") {
+ storSupp += "<li>Session Storage</li>";
+ } else if (i == "globalStorage") {
+ storSupp += "<li>Global Storage</li>";
+ } else if (i == "localStorage") {
+ localStoreAvailable = true;
+ storSupp += "<li>Local Storage</li>";
+ } else if (i == "openDatabase") {
+ sqlStoreAvailable = true;
+ storSupp += "<li>Database Storage</li>";
+ }
+ }
+ storSupp += "</ul>";
+ document.querySelector("#storageSupport").innerHTML = storSupp;
+}
+
+function populateGeo() {
+ if (navigator.geolocation) {
+ navigator.geolocation.getCurrentPosition( function(pos) {
+ document.querySelector("#latitude").value = pos.coords.latitude.toFixed(2);
+ document.querySelector("#longitude").value = pos.coords.longitude.toFixed(2);
+ });
+ }
+}
+
+function updateCount() {
+ localStore.count( function(count) {
+ document.querySelector("#checkinCount").innerHTML = count;
+ });
+}
+
+function getLayerFromLocalStorage() {
+ localStore.search( function(checkins) {
+ checkins.forEach( function(checkin) {
+ vecLayer.addFeatures(new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Point( checkin.longitude, checkin.latitude), {summit: checkin.summit, elevation: checkin.elevation} ));
+ });
+ });
+}
+
+function updateList() {
+ localStore.search( function(checkins) {
+ table = "<table>";
+ checkins.forEach( function(checkin) {
+ table += "<tr><td>" + checkin.summit + "</td><td>" + checkin.elevation +
+ "</td><td>" + checkin.latitude + "</td><td>" + checkin.longitude + "</td></tr>";
+ });
+ table += "</table>";
+ document.querySelector("#searchResults").innerHTML = table;
+ // console.log(table);
+ });
+}
+
+/* localStore ****************************************************************/
+
+var localStore = {
+ setup: function() {
+ if (!localStorage["summits"])
+ localStorage["summits"] = JSON.stringify([]);
+ },
+ save: function(checkin, handler) {
+ var checkins = JSON.parse(localStorage["summits"]);
+ checkins.push(checkin);
+ localStorage["summits"] = JSON.stringify(checkins);
+ handler();
+ console.debug(checkins);
+ },
+ search: function(handler) {
+ var allCheckins = JSON.parse(localStorage["summits"]);
+ var matchingCheckins = [];
+ allCheckins.forEach( function(checkin) {
+ matchingCheckins.push(checkin);
+ });
+ handler(matchingCheckins);
+ },
+ deleteall: function() {
+ localStorage["summits"] = JSON.stringify([]);
+ },
+ count: function(handler) {
+ handler(JSON.parse(localStorage["summits"]).length);
+ }
+};
+
+/* sqlStore ******************************************************************/
+
+var sqlStore = {
+ setup: function() {
+ this.db = openDatabase('openlayers', '1.0', 'Summits', 8192);
+ this.db.transaction( function(tx) {
+ tx.executeSql("create table if not exists " +
+ "summits(id integer primary key asc, summit string, elevation integer, latitude float, longitude float)",
+ [], function() {
+ console.log("success create table if not exist");
+ }
+ );
+ });
+ },
+ save: function(checkin, handler) {
+ localStore.db.transaction( function(tx) {
+ tx.executeSql("insert into summits (summit, elevation, latitude, longitude) values (?,?,?,?);",
+ [checkin.summit, checkin.elevation, checkin.latitude, checkin.longitude],
+ handler,
+ localStore.onError);
+ });
+ },
+ search: function(handler) {
+ var matchingCheckins = [];
+ localStore.db.transaction( function(tx) {
+ tx.executeSql("select * from summits", [], function(tx, results) {
+ for (i = 0; i < results.rows.length; i++) {
+ matchingCheckins.push(results.rows.item(i));
+ }
+ handler(matchingCheckins);
+ },
+ localStore.onError);
+ });
+ },
+ deleteall: function() {
+ localStore.db.transaction( function(tx) {
+ tx.executeSql('delete from summits');
+ // tx.executeSql('DROP TABLE summits;'); // it works! But the table needs to be recreated.
+ }, function(error) {
+ console.log('something on second function, might be an error');
+ console.debug(error.message);
+ }, function() {
+ console.log('it went well, I guess');
+ }
+ );
+ console.log('All rows were delete, I guess...');
+ },
+ count: function(handler) {
+ localStore.db.transaction( function(tx) {
+ tx.executeSql("select count(*) from summits;", [], function(tx, results) {
+ handler(results.rows.item(0)["count(*)"]);
+ },
+ localStore.onError);
+ });
+ },
+ onError: function(tx,error) {
+ console.log("Error occurred: ", error.message);
+ }
+};
More information about the Commits
mailing list