---
title: "Show point data from GeoJSON on the map | JavaScript maps SDK"
description: "Add a GeoJSON point overlay to your map application."
---

> 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.

# Show point data from GeoJSON on the map

This tutorial offers a comprehensive walkthrough on integrating a GeoJSON point overlay onto a map. You will be guided through the following steps to achieve this.

## NPM module setup

1.  Install the npm package.
    
    ```bash
    npm install --save @maptiler/sdk
    ```
    
2.  Include the CSS file.
    
    If you have a bundler that can handle CSS, you can `import` the CSS
    
    ```js
    import "@maptiler/sdk/dist/maptiler-sdk.css";
    ```
    
    or include it with a `<link />` in the head of the document via the CDN
    
    ```html
    <link href='https://cdn.maptiler.com/maptiler-sdk-js/v4.2.0/maptiler-sdk.css' rel='stylesheet' />
    ```
    
3.  Include the following code in your JavaScript file (Example: app.js).
    
    ```js
    import * as maptilersdk from '@maptiler/sdk';
    
     maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
     const map = new maptilersdk.Map({
       container: 'map', // container's id or the HTML element to render the map
       style: maptilersdk.MapStyle.BASE,
          
       center: [-110.75954, 43.72874], // starting position [lng, lat]
       zoom: 4, // starting zoom
          
     });
    ```
    
4.  Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/developer/credentials/api-key/#secure-key) before you publish it.
    
5.  The next is up to you. You can center your map wherever you desire (modifying the `starting position`) and set an appropriate zoom level (modifying the `starting zoom`) to match your users’ needs. Additionally, you can change the map’s look (by updating the `source URL`); choose from a range of visually appealing map styles from our extensive [MapTiler standard maps](https://cloud.maptiler.com/maps/), or create your own to truly differentiate your application.
    
6.  To follow this tutorial you can use Airports from Natural Earth. Download the [Airports sample data](https://www.naturalearthdata.com/downloads/10m-cultural-vectors/airports/)
    
7.  Add event handler for map load event. You will add code to create a GeoJSON source and a vector layer in this handler.
    
    ```js
    map.on('load', async function() {
        
     });
    ```
    
8.  Add a custom image to the map. You can use any image or download the [airport image](./icon-plane-512.png) we used in the tutorial. In the example the image is in the same folder as the index.html file
    
    ```js
    map.on('load', async function() {
      const image = await map.loadImage('./icon-plane-512.png');
      map.addImage('plane', image.data);
    });
    ```
    
9.  Create GeoJSON source. The following snippet creates GeoJSON source hosted on MapTiler (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 link to the GeoJSON. Download the sample data [here](https://www.naturalearthdata.com/downloads/10m-cultural-vectors/airports/).
    
    ```js
    const geojson = await maptilersdk.data.get('YOUR_MAPTILER_DATASET_ID_HERE');
     map.addSource('airports', {
       type: 'geojson',
       data: geojson
     });
    ```
    
10.  Add the vector layer
     
     ```js
     map.addLayer({
        'id': 'airports',
        'type': 'symbol',
        'source': 'airports',
        'layout': {
          'icon-image': 'plane',
          'icon-size': ['*', ['get', 'scalerank'], 0.01]
        },
        'paint': {}
      });
     ```
     

## Basic JavaScript setup

1.  Copy the following code, paste it into your favorite text editor, and save it as a `.html` file.
    
    ```html
    <!DOCTYPE html>
     <html lang="en">
     <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Display a GeoJSON point layer</title>
       <script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.2.0/maptiler-sdk.umd.min.js"></script>
       <link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.2.0/maptiler-sdk.css" rel="stylesheet" />
       <style>
         body { margin: 0; padding: 0; }
         #map { position: absolute; top: 0; bottom: 0; width: 100%; }
       </style>
     </head>
     <body>
       <div id="map"></div>
       <script>
           maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';      
           const map = new maptilersdk.Map({
             container: 'map', // container's id or the HTML element to render the map
             style: maptilersdk.MapStyle.BASE,
                
             center: [-110.75954, 43.72874], // starting position [lng, lat]
             zoom: 4, // starting zoom
                
           });
       </script>
     </body>
     </html>
    ```
    
2.  Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/developer/credentials/api-key/#secure-key) before you publish it.
    
3.  The next is up to you. You can center your map wherever you desire (modifying the `starting position`) and set an appropriate zoom level (modifying the `starting zoom`) to match your users’ needs. Additionally, you can change the map’s look (by updating the `source URL`); choose from a range of visually appealing map styles from our extensive [MapTiler standard maps](https://cloud.maptiler.com/maps/), or create your own to truly differentiate your application.
    
4.  To follow this tutorial you can use Airports from Natural Earth. Download the [Airports sample data](https://www.naturalearthdata.com/downloads/10m-cultural-vectors/airports/)
    
5.  Add event handler for map load event. You will add code to create a GeoJSON source and a vector layer in this handler.
    
    ```js
    map.on('load', async function() {
        
     });
    ```
    
6.  Add a custom image to the map. You can use any image or download the [airport image](./icon-plane-512.png) we used in the tutorial. In the example the image is in the same folder as the index.html file
    
    ```js
    map.on('load', async function() {
      const image = await map.loadImage('./icon-plane-512.png');
      map.addImage('plane', image.data);
    });
    ```
    
7.  Create GeoJSON source. The following snippet creates GeoJSON source hosted on MapTiler (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 link to the GeoJSON. Download the sample data [here](https://www.naturalearthdata.com/downloads/10m-cultural-vectors/airports/).
    
    ```js
    const geojson = await maptilersdk.data.get('YOUR_MAPTILER_DATASET_ID_HERE');
     map.addSource('airports', {
       type: 'geojson',
       data: geojson
     });
    ```
    
8.  Add the vector layer
    
    ```js
    map.addLayer({
       'id': 'airports',
       'type': 'symbol',
       'source': 'airports',
       'layout': {
         'icon-image': 'plane',
         'icon-size': ['*', ['get', 'scalerank'], 0.01]
       },
       'paint': {}
     });
    ```
    

### Complete source code

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Display a GeoJSON Point Layer</title>
  <script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.2.0/maptiler-sdk.umd.min.js"></script>
  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.2.0/maptiler-sdk.css" rel="stylesheet" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
    const map = new maptilersdk.Map({
      container: 'map', // container's id or the HTML element to render the map
      style: maptilersdk.MapStyle.BASE,
      center: [-110.75954, 43.72874], // starting position [lng, lat]
      zoom: 4, // starting zoom
    });
    map.on('load', async function () {
      const image = await map.loadImage('./icon-plane-512.png');
      map.addImage('plane', image.data);
      const geojson = await maptilersdk.data.get('YOUR_MAPTILER_DATASET_ID_HERE');
      map.addSource('airports', {
        type: 'geojson',
        data: geojson
      });
      map.addLayer({
        'id': 'airports',
        'type': 'symbol',
        'source': 'airports',
        'layout': {
          'icon-image': 'plane',
          'icon-size': ['*', ['get', 'scalerank'], 0.01]
        },
        'paint': {}
      });
    });
  </script>
</body>

</html>
```

## Related examples

### [GeoJSON multiGeometry layer](https://docs.maptiler.com/sdk-js/examples/geojson-multigeometry/)

Tutorials

Add a GeoJSON MultiGeometry overlay to your map application.

### [Point layer (point helper)](https://docs.maptiler.com/sdk-js/examples/helper-point-minimal/)

Examples

Add minimal point layer using MapTiler point helper.

### [Point filtering by property](https://docs.maptiler.com/sdk-js/examples/point-filtering/)

Examples

Filter features in real time by property.

### [Create and style clusters](https://docs.maptiler.com/sdk-js/examples/cluster/)

Examples

Visualize point data as clusters using built-in SDK functions.