View local GeoJSON | UNL Map 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.

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</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>
#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 UnlSdk.Map({
container: "map",
apiKey: "YOUR-OWN-API-KEY",
vpmId: "YOUR-OWN-VPM-ID",
center: [-8.3226655, 53.7654751],
zoom: 8,
});
 
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>