---
title: "Add GeoJSON to AR maps | Augmented reality | JavaScript maps SDK"
description: "Display GeoJSON biking or hiking routes in AR maps."
---
# Add GeoJSON to AR maps
To create a three-dimensional (3D) representation of a cycling or hiking route on an augmented reality (AR) map, you have the option to add a GeoJSON, GPX, or KML line. Compatible with **WebXR** or **Apple Quick Look**.
In addition to lines, you can also incorporate various types of data, such as points and polygons, into your maps. These data can be viewed within the AR model.
If you’re using iOS (Quick Look), the activateAR option in the control allows for automatic activation of the AR model as soon as the data becomes available.
Create GeoJSON source. Check out the [How to Upload GeoJSON to MapTiler](https://docs.maptiler.com/guides/maps-apis/maps-platform/prepare-geojson-with-attributes-for-choropleth-map-and-upload-geojson-to-maptiler-cloud#PrepareGeoJSONwithattributesforchoroplethmapanduploadGeoJSONtoMapTilerCloud-UploadGeoJSONtoMapTilerCloud) tutorial. Publish the dataset and copy the geojson dataset ID. Download the sample data [here](../geojson-line/Line_GeoJSON_example.geojson).
### NPM module setup
```bash
npm install --save @maptiler/sdk @maptiler/ar-control
```
#### main.js
```js
import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
import { MaptilerARControl } from '@maptiler/ar-control';
config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
// Creating a map
const map = new Map({
container: 'map',
style: MapStyle.OUTDOOR,
center: [-110.75954, 43.72874], // starting position [lng, lat]
zoom: 13.5, // starting zoom
bearing: -7.2,
pitch: 45
});
// Waiting for the map to be ready
map.on("load", async (e) => {
const arControl = new MaptilerARControl({
activateAR: true //When the platform allows automatically activates the AR mode as soon as the data is ready
});
arControl.on("computeStart", (e) => {
overlay.style.display = "inherit";
})
arControl.on("computeEnd", (e) => {
overlay.style.display = "none";
})
map.addControl(arControl, "top-left");
const geojson = await maptilersdk.data.get('YOUR_MAPTILER_DATASET_ID_HERE');
map.addSource('gps_tracks', {
'type': 'geojson',
'data': geojson
});
map.addLayer({
'id': 'grand_teton',
'type': 'line',
'source': 'gps_tracks',
'layout': {},
'paint': {
'line-color': '#e11',
'line-width': 4
}
});
})
```
#### index.html
```html
Add GeoJSON to AR maps | NPM example
```
## Related examples
### [Custom AR experience](https://docs.maptiler.com/sdk-js/examples/ar-control-custom/)
Examples
Customize the appearance of the augmented reality map control.
### [Start with AR maps](https://docs.maptiler.com/sdk-js/examples/ar-control/)
Examples
Add an AR control button to map 3D viewports.
### [Trigger AR control actions](https://docs.maptiler.com/sdk-js/examples/ar-control-no-button/)
Examples
Trigger AR map control actions using keyboard input.
### [QR code to access AR maps](https://docs.maptiler.com/sdk-js/examples/ar-control-qr/)
Examples
Provide a QR code to access mobile AR maps.