Writing vector features to local storage/IndexedDB and retrieving

Question

I'm currently trying to create a route-planning app with OpenLayers3 and was wondering if anyone had experience of doing something similar? I'm fairly new to this but I've so far managed to save my geometry in local Storage as geoJson; I don't seem to be able to retrieve this and redraw it on my vector layer. Ideally I'd prefer to use a localised db solution but I can't seem to find any documentation which refers to this.

IndexedDb is a schemaless object store. Once you have created your database and object store, you can start storing your geoJSON objects. Try reading through this and see how you go on http://www.codeproject.com/Articles/325135/Getting-Started-with-IndexedDB. A few things to note though, it is asynchronous and it helps if you've worked with javascript callbacks before. — Jonathan Smith, Apr 02 '15 at 18:11
For the localised db I use [pouchdb](http://pouchdb.com). It makes working with indexed db easier and adds syncing capabilities — Alex, Apr 03 '15 at 07:38
Did you remember to parse your geojson back to an object after retrieving it from local storage? And to stringify it before saving it in local storage? Local storage contains strings. See [this](http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage) — Alex, Apr 03 '15 at 07:45
Thanks for your responses guys. pouchdb DOES look like a viable solution however I'm falling at the first hurdle as I can save the data locally but can't seem to find the syntax to redraw it on the given layer. My javascript's a little sketchy but OpenLayers3 documentation is in really short supply :/ — dvmac01, Apr 07 '15 at 09:52

score 0 · Answer 1 · answered Apr 09 '15 at 16:20

As I said in my comment, thanks all for the input. Parsing was not really the issue, more HOW exactly to generate a vector layer with the retrieved info. I stumbled across an article which talked about creating a Loader function for the retrieved data, this is as opposed to loading from an external file or web service. The pertinent code is replicated below. For me though, PouchDB is the way to go, thanks to @Alex as I'd started to read up on it and it was all the confirmation I needed. ;)

// Load Route Function
$(document).ready(function() {
    if (localStorage.getItem('myFeatures') !== null) {
  var features = JSON.parse(localStorage.getItem('myFeatures'));
  console.log(features);

  var featureSource = new ol.source.ServerVector({
    format: new ol.format.GeoJSON(),
    loader: function(extent, resolution, projection) {
      loadFeatures();
    },
   strategy: function(extent, resolution) {
   // some code
    return [extent];
   },
   projection: "EPSG:25832"
});
}

var loadFeatures = function() {
  featureSource.addFeatures(featureSource.readFeatures(features));
};

var SmallworldLayer = new ol.layer.Vector({
   source: featureSource,
   style: defaultRoute
});
map.addLayer(SmallworldLayer);
});

Writing vector features to local storage/IndexedDB and retrieving

1 Answers1