View local GeoJSON (experimental) | UNL Map JS Docs

Download example GeoJSON here. This example utilizes the File System Access API in newer Chrome and Edge browsers (see article and explanation). Instead of uploading the file to a server and reading it from there, it is accessed locally by the browser without any network transfer. In contrast to the File API, the file handle can be used to also write to the file (not implemented here). This example should be considered experimental, because window.showOpenFilePicker is not supported by all major browsers. See browser compatibility.

Note

If you want to test this example, edit it in JSFiddle or CodePen and replace the "YOUR-OWN-API-KEY" and "YOUR-OWN-VPM-ID" placeholders with your actual api key and vpm id.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>View local GeoJSON (experimental)</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://unpkg.com/unl-map-js@0.1.5/lib/unl-map-js.js"></script>
<link href="https://unpkg.com/unl-map-js@0.1.5/lib/unl-map-js.css" rel="stylesheet" />
<link
href="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.css"
rel="stylesheet"
/>
<style>
	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<style>
#viewbutton {
position: absolute;
top: 0;
left: 0;
}
</style>
<div id="map"></div>
<button id="viewbutton">View local GeoJSON file</button>
<script>
var map = new UnlSdk.Map({
container: "map",
apiKey: "YOUR-OWN-API-KEY",
vpmId: "YOUR-OWN-VPM-ID",
center: [-8.3226655, 53.7654751],
zoom: 8,
});
 
var viewbutton = document.getElementById("viewbutton");
 
async function buttonClickHandler() {
let fileHandle;
[fileHandle] = await window.showOpenFilePicker({
// allow only single file
multiple: false,
 
// apply filter for GeoJSON files
types: [
{
description: "GeoJSON",
accept: { "application/geo+json": [".geojson"] },
},
],
 
// start in download directory
startIn: "downloads",
});
 
// get file handle and read content
const file = await fileHandle.getFile();
const contents = await file.text();
 
// parse file as json and add as source to the map
map.addSource("uploaded-source", {
type: "geojson",
data: JSON.parse(contents),
});
 
map.addLayer({
id: "uploaded-polygons",
type: "fill",
source: "uploaded-source",
paint: {
"fill-color": "#888888",
"fill-outline-color": "red",
"fill-opacity": 0.4,
},
// filter for (multi)polygons; for also displaying linestrings
// or points add more layers with different filters
filter: ["==", "$type", "Polygon"],
});
}
 
if ("showOpenFilePicker" in window) {
viewbutton.addEventListener("click", buttonClickHandler);
} else {
viewbutton.innerText =
"Your browser does not support File System Access API";
// If you want a fallback, try <input type="file">; but this uses classical file upload
}
</script>
 
</body>
</html>