Looking to create an offline map using topoJSON and openlayers for map generation.
I stored the JSON data in indexeddb as a blob and tried converting it back to JSON. Everything was going smoothly until I encountered an error while converting the blob back, resulting in: [object%20Promise] Failed to load resource: the server responded with a status of 404 (Not Found).
(Just a quick note that Dexie is an indexeddb wrapper)
var db = new Dexie("json_db");
db.version(1).stores({
jsons: '++id'
});
getBlobAndPutInDB("https://openlayers.org/en/v4.6.5/examples/data/topojson/world-110m.json");
function initMap() {
var style = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.6)'
}),
stroke: new ol.style.Stroke({
color: '#319FD3',
width: 1
})
});
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
url: blobToJSON(),
format: new ol.format.TopoJSON({
layers: ['countries']
}),
overlaps: false
}),
style: style
});
var map = new ol.Map({
layers: [vector],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 1
})
});
}
async function blobToJSON() {
let blob = await db.jsons.get(2);
var file = new File([blob], "map.json", { type: "application/json", lastModified: Date.now() });
return file;
}
function getBlobAndPutInDB(url) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = function (e) {
if (this.status === 200) {
var myBlob = this.response;
db.jsons.put(myBlob);
}
};
xhr.send();
}<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<script src="https://unpkg.com/dexie@latest/dist/dexie.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="OfflineMap.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>initMap();</script>
</body>
</html>If anyone has suggestions or solutions, I'd greatly appreciate it :)