[OpenLayers-Users] Offline Storage Help
Frank Broniewski
brfr at metrico.lu
Mon Feb 3 01:40:51 PST 2014
-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1
Hi,
I'm also interested in adding this functionality to some of my maps.
Do you have any experience wich devices / browsers on mobile support
offline storage? And how much data can be stored offline? Is there
some limit in the number of files or in Megabytes?
And how does the BBOX strategy behave when storing a vector layer offline?
Questions over questions :-)
Thanks,
Frank
Am 2014-01-05 01:15, schrieb ANC:
> Hello List,
>
> I am working on a mobile mapping application for mountain bike
> trails in our country. All the data used for this project is hosted
> on our own server (Apache running on Linux) and that includes:
>
> 1. The trail data in GPX format. 2. A WMS server using Mapserver
> for the topographical map data. 3. The website.
>
> The application concept is to have a mobile webpage that would
> allow users to have access to the maps while they are online,
> select the trail they are interested in and be able to save both
> the map and the trail to the device's localStorage for offline
> use.
>
> I have been using the OpenLayers Offline-Storage sample as the
> parting point for this purpose with some modifications. The UI has
> been modified for Mobile devices covering the full screen as well
> as adding the touchNavigation control. Two buttons shall be
> available on the map window, one to start the map images seeding
> process and another to clear the cache, both of them using the
> seeding functions in the Offline-Storage sample (the code that I
> thought was not needed for the 2 buttons was removed but maybe I
> took off something that was important). I have made a good progress
> on this but I after clicking the seeding button, I am not getting
> the map tiles to be stored for offline use, though the GPX file
> does. You can see the development application in this link
>
> http://www.bicimapas.com.mx/bmovil.html
>
> The buttons are located on the bottom left (please excuse the poor
> graphics, the final CSS will be taken care of as soon as the
> functionality is there). The red one triggers the seeding function
> while the blue one clears the cache. When the red button is
> clicked, I can see that the seeding process seems to run but when
> going offline, the tiles are not there. I am testing in an iPhone 4
> as well as FireFox with Firebug in my PC. Firebug shows no errors.
>
> The code I am using is posted below and I have some questions
> regarding the Offline-storage sample functions and statements:
>
> 1. Considering all the data used for the application (webpage, GPS
> files and WMS server by means of Mapserver) is hosted in the same
> server, there is no need for a proxy, in my opinion, so the
> statement calling the proxy was removed from the code. I wonder
> whether a proxy is still required for the seeding (cacheWrite)
> process? In other applications we have, we do WMS Web Feature Info
> as well as WFS requests without needing the proxy.
>
> 2. On the Offline-storage sample, a WMS layer is instantiated and
> the
>
> eventListeners{tileloaded:updateStatus}
>
> statement is added to the layer parameters. What is the purpose of
> this eventListener? I added it to our WMS map instantiation but I
> have no clue what is it for. Where is the "tileloaded" event
> defined?
>
> 3. Shall I be concerned about CORS? This is a new concept to me
> and have no idea how this could affect this application, but is
> mentioned several times in the sample code. As far as I understand,
> as all the data sources are in the same server, this should not be
> an issue. If so, how shall the code be modified?
>
> 4. Is the GPX file being seeded instead of the topo map layers? If
> so, what shall be done to cache both layers?
>
> Thanks in advance for your help and any guidance that can be
> provided to solve this issue is much appreciated. The code used for
> the example in the link above is as follows:
>
> bmovil.html
>
> <!DOCTYPE html> <html lang='en'> <head> <meta
> http-equiv="Content-Type" content="text/html"; charset="ISO-8859-1"
> /> <title>BiciMapas Móvil</title> <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"> <link rel="stylesheet"
> href="http://openlayers.org/dev/theme/default/style.css"
> type="text/css"> <link rel="stylesheet"
> href="http://openlayers.org/dev/examples/style.css"
> type="text/css">
>
>
>
>
> </head> <body onload='init();'> <div id='map_element'> </div>
> </body> </html>
>
>
> THIS IS THE JS FILE
>
>
>
>
> var map, cacheWrite, cacheRead1, cacheRead2;
>
> function init() { // Setup our map object map = new
> OpenLayers.Map('map_element', { controls: [ new
> OpenLayers.Control.Zoom(), //new OpenLayers.Control.PanZoomBar(),
> //new OpenLayers.Control.NavToolbar (), //new
> OpenLayers.Control.LayerSwitcher(), //new
> OpenLayers.Control.ScaleLine(), new
> OpenLayers.Control.TouchNavigation({dragPanOptions: {enableKinetic:
> true}})//, //new OpenLayers.Control.Graticule({layerName:
> "Coordenadas", labelFormat: "dms", labelSymbolizer: {fontFamily:
> "arial", fontSize: "12px", fontWeight: "bold", fontColor:
> "blue"}}) ], maxExtent: new OpenLayers.Bounds (-121.616821,
> 13.607919, -77.567276, 34.575615), maxScale: 15000000, minScale:
> 2500 });
>
> // Setup our layer objects
>
> var layer1 = new OpenLayers.Layer.WMS( "BiciMapas Topo",
> "http://HOST/cgi-bin/mapserv?", {map:
> '/PATH/TO/MAPFILE/BCMP_BASE_TOPO.map', format: "image/png",
> layers:'BCMP_BASE_TOPO'}, {singleTile: true, eventListeners: {
> tileloaded: updateStatus } }); map.addLayer (layer1) var
> gpxStyles = new OpenLayers.StyleMap({ "default": new
> OpenLayers.Style({ pointRadius: "5", // sized according to type
> attribute label: "${name}", labelAlign: 'cb', fontSize: 9,
> fontFamily: "Arial", fontColor: "brown", fontWeight: "bold",
> labelYOffset: 6, fillColor: "yellow", strokeColor: "red",
> strokeWidth: 3, strokeOpacity: 1 }), "select": new
> OpenLayers.Style({ fillColor: "#66ccff", strokeColor: "#3399ff",
> graphicZIndex: 2 }) });
>
>
> var lgpx = new OpenLayers.Layer.Vector("Ruta", { strategies: [new
> OpenLayers.Strategy.Fixed()], protocol: new
> OpenLayers.Protocol.HTTP({ url: "CHILUCO.gpx", format: new
> OpenLayers.Format.GPX({extractWaypoints: true, extractRoutes:
> false, extractAttributes: true}) }), //style: {strokeColor:
> "green", strokeWidth: 3, strokeOpacity: 0.5, pointRadius: 4, label:
> "PUNTO"}, styleMap: gpxStyles, projection: map.displayProjection
> });
>
>
> map.addLayer(lgpx);
>
> lgpx.events.register('loadend',lgpx,function() { var bounds =
> this.getDataExtent(); map.zoomToExtent(bounds); });
>
>
>
>
> // GEOLOCATION // var markers = new
> OpenLayers.Layer.Markers("Markers"); // map.addLayer(markers);
> // Recenter on user position //
> navigator.geolocation.getCurrentPosition(function(position) {
>
>
> // var lonLat = new
> OpenLayers.LonLat(position.coords.longitude, //
> position.coords.latitude); // var icon = new
> OpenLayers.Icon('images/Empresa/marker-icon-red.png');
>
> // markers.addMarker(new OpenLayers.Marker(lonLat, icon));
>
> // map.setCenter(lonLat, 14 // Zoom level // );
>
> // });
>
>
> // BUTTONS FOR CACHING
>
> var b1 = new OpenLayers.Control.Button({trigger: startSeeding
> ,displayClass: "btnWrite"}); var b2 = new
> OpenLayers.Control.Button({trigger: clearCache, displayClass:
> "btnClear"});
>
> var hpanel = new OpenLayers.Control.Panel({displayClass:
> "panel"}); hpanel.addControls([b1, b2]); map.addControl(hpanel);
>
>
>
> // try cache before loading from remote resource cacheRead1 = new
> OpenLayers.Control.CacheRead({ eventListeners: { activate:
> function() { cacheRead2.deactivate(); } } }); // try loading from
> remote resource and fall back to cache cacheRead2 = new
> OpenLayers.Control.CacheRead({ autoActivate: false, fetchEvent:
> "tileerror", eventListeners: { activate: function() {
> cacheRead1.deactivate(); } } }); cacheWrite = new
> OpenLayers.Control.CacheWrite({ imageFormat: "image/png",
> eventListeners: { cachefull: function() { if (seeding) {
> stopSeeding(); } status.innerHTML = "Cache full."; } } });
>
> map.addControls([cacheRead1, cacheRead2, cacheWrite]);
>
> var status = document.getElementById("status"), hits =
> document.getElementById("hits"), cacheHits = 0, seeding = false;
>
> function updateStatus(evt) { if (window.localStorage) {
> status.innerHTML = localStorage.length + " entries in cache."; }
> else { status.innerHTML = "Local storage not supported. Try a
> different browser."; } if (evt && evt.tile.url.substr(0, 5) ===
> "data:") { cacheHits++; } hits.innerHTML = cacheHits + " cache
> hits."; }
>
>
>
> // clear all tiles from the cache function clearCache() {
> OpenLayers.Control.CacheWrite.clearCache(); updateStatus(); }
>
> // start seeding the cache function startSeeding() { var layer =
> map.baseLayer, zoom = map.getZoom(); seeding = { zoom: zoom,
> extent: map.getExtent(), center: map.getCenter(), cacheWriteActive:
> cacheWrite.active, buffer: layer.buffer, layer: layer }; // make
> sure the next setCenter triggers a load map.zoomTo(zoom ===
> layer.numZoomLevels-1 ? zoom - 1 : zoom + 1); // turn on cache
> writing cacheWrite.activate(); // turn off cache reading
> cacheRead1.deactivate(); cacheRead2.deactivate();
>
> layer.events.register("loadend", null, seed);
>
> // start seeding map.setCenter(seeding.center, zoom); }
>
> // seed a zoom level based on the extent at the time startSeeding
> was called function seed() { var layer = seeding.layer; var
> tileWidth = layer.tileSize.w; var nextZoom = map.getZoom() + 1; var
> extentWidth = seeding.extent.getWidth() /
> map.getResolutionForZoom(nextZoom); // adjust the layer's buffer
> size so we don't have to pan layer.buffer = Math.ceil((extentWidth
> / tileWidth - map.getSize().w / tileWidth) / 2); map.zoomIn(); if
> (nextZoom === layer.numZoomLevels-1) { stopSeeding(); } }
>
> // stop seeding (when done or when cache is full) function
> stopSeeding() { // we're done - restore previous settings
> seeding.layer.events.unregister("loadend", null, seed);
> seeding.layer.buffer = seeding.buffer;
> map.setCenter(seeding.center, seeding.zoom); if
> (!seeding.cacheWriteActive) { cacheWrite.deactivate(); } //
> if (read.checked) { // setType(); // } seeding =
> false; }
>
> }
>
>
>
>
> -- View this message in context:
> http://osgeo-org.1560.x6.nabble.com/Offline-Storage-Help-tp5096401.html
>
>
Sent from the OpenLayers Users mailing list archive at Nabble.com.
> _______________________________________________ Users mailing list
> Users at lists.osgeo.org
> http://lists.osgeo.org/mailman/listinfo/openlayers-users
>
- --
Frank BRONIEWSKI
METRICO s.à r.l.
géomètres
technologies d'information géographique
rue des Romains 36
L-5433 NIEDERDONVEN
tél.: +352 26 74 94 - 28
fax.: +352 26 74 94 99
http://www.metrico.lu
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.11 (GNU/Linux)
Comment: Using GnuPG with Thunderbird - http://www.enigmail.net/
iQEcBAEBAgAGBQJS72QXAAoJEHopqW0d1cQVev8IALOZJmXEBVZagdFSgW+5uEZR
9ww5hiXPV//3dVl3hlVSk4yBYF2FrUR+nFDHMIBMFWpVDMkVnStlAvQLR9mbUGFo
9dB+3m4ncNoZOL1qjfdiVT149Gx79XUybXG4zbmrsQsZpPo+jG4ar4+g9znWkOB/
l7ZIz2pR6wNYK5lrI/FYgYju+gdLRYeGzlrHVL7vow5lHfUinHPzpGxjJvh/WWN+
VQ+UYcoeeSwWo7eZDu/O9HrQED0P+neHT3uG/ncex05JVloVCih/8Anr9zm5x18V
e53j888cMdMTVRHq6SXo3ALStOk0eV+hK671PptS2ASkkF5DU/yf9NDjjcJj5DU=
=HuFy
-----END PGP SIGNATURE-----
More information about the Users
mailing list