View local GeoJSON | TrackAsia GL JS Docs

Download example GeoJSON here. Instead of uploading the file to a server and reading it from there, it is accessed locally by the browser without any network transfer. If you also want to write to the opened file, see example with File System Access API.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>View local GeoJSON</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>
#file {
position: absolute;
top: 0;
left: 0;
}
</style>
<div id="map"></div>
<input
type="file"
id="file"
name="file"
accept="application/geo+json,application/vnd.geo+json,.geojson"
/>
<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
});
 
function handleFileSelect(evt) {
var file = evt.target.files[0]; // Read first selected file
 
var reader = new FileReader();
 
reader.onload = function (theFile) {
// Parse as (geo)JSON
var geoJSONcontent = JSON.parse(theFile.target.result);
 
// Add as source to the map
map.addSource('uploaded-source', {
'type': 'geojson',
'data': geoJSONcontent
});
 
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']
});
};
 
// Read the GeoJSON as text
reader.readAsText(file, 'UTF-8');
}
 
document
.getElementById('file')
.addEventListener('change', handleFileSelect, false);
</script>
 
</body>
</html>