View local GeoJSON (experimental) | TrackAsia GL 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.

<!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/trackasia-gl@1.0.5/dist/trackasia-gl.js"></script>
<link href="https://unpkg.com/trackasia-gl@1.0.5/dist/trackasia-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 trackasiagl.Map({
container: 'map',
style: 'https://maps.track-asia.com/styles/v1/streets.json?key=public_key',
center: [-8.3226655, 53.7654751],
zoom: 5
});
 
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>