I have created a simple openlayers 3 map HERE , the map initialization code looks like so:
var styles = [ 'Road', 'Aerial', 'AerialWithLabels', 'collinsBart', 'ordnanceSurvey']; var layers = []; var i, ii; var coordinate1, coordinate2; coordinate1 = ol.proj.fromLonLat([77.6013, 12.9044]); coordinate2 = ol.proj.fromLonLat([77.6885, 12.9536]); for (i = 0, ii = styles.length; i < ii; ++i) { layers.push(new ol.layer.Tile({ visible: false, preload: Infinity, extent: [coordinate1[0], coordinate1[1], coordinate2[0], coordinate2[1]], myattribute: styles, source: new ol.source.BingMaps({ key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3', imagerySet: styles // use maxZoom 19 to see stretched tiles instead of the BingMaps // "no photos at this zoom level" tiles // maxZoom: 19 }) })); } var map = new ol.Map({ layers: layers, // Improve user experience by loading tiles while dragging/zooming. Will make // zooming choppy on mobile or slow devices. loadTilesWhileInteracting: true, target: 'map', view: new ol.View({ center: ol.proj.fromLonLat([77.6244159, 12.9370699]), maxZoom: 20, minZoom: 13, zoom: 13 }) }); var select = document.getElementById('layer-select'); function onChange() { var style = select.value; for (var i = 0, ii = layers.length; i < ii; ++i) { layers.setVisible(styles === style); console.log(layers.get('extent')); } } select.addEventListener('change', onChange); onChange(); Now my map has a special feature if you noticed , I.E. it has an extent set , I.E. tiles beyond a certain extent won't load, now what i really want to acomplish is, i want the tiles for this extent to be loaded from locally I.E. when the user visits my website the second time around , the tiles sound load form his localstorage , How can this be accomplished ? or can this be accomplished at all , this is a requirement for my project and i have been stuck for some days now on this , can anybody shed some light on this as to how is this possible?
EDIT:: I would be highly grateful , if somebody can atleast give me a vague idea as to how to go about doing this.
Thank you.
أكثر...
var styles = [ 'Road', 'Aerial', 'AerialWithLabels', 'collinsBart', 'ordnanceSurvey']; var layers = []; var i, ii; var coordinate1, coordinate2; coordinate1 = ol.proj.fromLonLat([77.6013, 12.9044]); coordinate2 = ol.proj.fromLonLat([77.6885, 12.9536]); for (i = 0, ii = styles.length; i < ii; ++i) { layers.push(new ol.layer.Tile({ visible: false, preload: Infinity, extent: [coordinate1[0], coordinate1[1], coordinate2[0], coordinate2[1]], myattribute: styles, source: new ol.source.BingMaps({ key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3', imagerySet: styles // use maxZoom 19 to see stretched tiles instead of the BingMaps // "no photos at this zoom level" tiles // maxZoom: 19 }) })); } var map = new ol.Map({ layers: layers, // Improve user experience by loading tiles while dragging/zooming. Will make // zooming choppy on mobile or slow devices. loadTilesWhileInteracting: true, target: 'map', view: new ol.View({ center: ol.proj.fromLonLat([77.6244159, 12.9370699]), maxZoom: 20, minZoom: 13, zoom: 13 }) }); var select = document.getElementById('layer-select'); function onChange() { var style = select.value; for (var i = 0, ii = layers.length; i < ii; ++i) { layers.setVisible(styles === style); console.log(layers.get('extent')); } } select.addEventListener('change', onChange); onChange(); Now my map has a special feature if you noticed , I.E. it has an extent set , I.E. tiles beyond a certain extent won't load, now what i really want to acomplish is, i want the tiles for this extent to be loaded from locally I.E. when the user visits my website the second time around , the tiles sound load form his localstorage , How can this be accomplished ? or can this be accomplished at all , this is a requirement for my project and i have been stuck for some days now on this , can anybody shed some light on this as to how is this possible?
EDIT:: I would be highly grateful , if somebody can atleast give me a vague idea as to how to go about doing this.
Thank you.
أكثر...