---
title: "View local GeoJSON | JavaScript maps SDK"
description: "View local GeoJSON without server upload."
---
> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.
# View local GeoJSON
Download the example [Average Wind Speeds GeoJSON](https://data-roscoco.opendata.arcgis.com/datasets/0371f25602be4f5f9145e9b76e2de54b_0.geojson?outSR=%7B%22latestWkid%22%3A2157%2C%22wkid%22%3A2157%7D). Instead of uploading the file to a server and reading it from there, the browser directly accesses the file locally, eliminating the need for any network transfer. If you wish to write to the file that has been opened, you can refer to the following example that utilizes the File System Access API: [View local GeoJSON (experimental)](https://docs.maptiler.com/sdk-js/examples/local-geojson-experimental/).
### NPM module setup
```bash
npm install --save @maptiler/sdk
```
#### main.js
```js
import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new Map({
container: 'map',
style: MapStyle.STREETS,
center: [-8.3226655, 53.7654751],
zoom: 8
});
function handleFileSelect(evt) {
const file = evt.target.files[0]; // Read first selected file
const reader = new FileReader();
reader.onload = function (theFile) {
// Parse as (geo)JSON
const 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);
```
#### index.html
```html
View local GeoJSON | NPM example
```
#### style.css
```css
body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}
```
### Basic JavaScript setup
```html
View local GeoJSON
```
## Related examples
### [View local GeoJSON (experimental)](https://docs.maptiler.com/sdk-js/examples/local-geojson-experimental/)
Examples
View local GeoJSON with experimental File System Access API.
### [GeoJSON multiGeometry layer](https://docs.maptiler.com/sdk-js/examples/geojson-multigeometry/)
Tutorials
Add a GeoJSON MultiGeometry overlay to your map application.
### [Add GeoJSON to AR maps](https://docs.maptiler.com/sdk-js/examples/ar-control-geojson-line/)
Examples
Display GeoJSON biking or hiking routes in AR maps.
### [Add a vector tile source](https://docs.maptiler.com/sdk-js/examples/vector-source/)
Examples
Add and display custom vector tile sources on maps.