---
title: "Show multiGeometry data from GeoJSON on the map | JavaScript maps SDK"
description: "Add a GeoJSON MultiGeometry 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 multiGeometry data from GeoJSON on the map

In this tutorial, we will demonstrate the process of incorporating a GeoJSON MultiGeometry overlay onto the map. Throughout this tutorial, we will explore the steps to view a GeoJSON and learn how to customize the style for the layers of point, line, and polygon geometries.

## 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.STREETS,
          
       center: [-52.32, 32.91], // starting position [lng, lat]
       zoom: 2, // 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.  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() {
        
     });
    ```
    
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 [GeoJSON multi-geometries sample data](https://docs.maptiler.com/sdk-js/assets/geoJSON_multigeometries.geojson).
    
    ```js
    map.on('load', async function() {
         const geojson = await maptilersdk.data.get('YOUR_MAPTILER_DATASET_ID_HERE');
         map.addSource('geojson-overlay', {
             'type': 'geojson',
             'data': geojson
         });
     });
    ```
    
8.  Add the vector layer. Add a layer for each type of geometry: point, line and polygon
    
    ```js
    map.addLayer({
       'id': 'geojson-overlay-fill',
       'type': 'fill',
       'source': 'geojson-overlay',
       'filter': ['==', '$type', 'Polygon'],
       'layout': {},
       'paint': {
         'fill-color': '#fff',
         'fill-opacity': 0.4
       }
     });
     map.addLayer({
       'id': 'geojson-overlay-line',
       'type': 'line',
       'source': 'geojson-overlay',
       'layout': {},
       'paint': {
         'line-color': 'rgb(68, 138, 255)',
         'line-width': 3
       }
     });
     map.addLayer({
       'id': 'geojson-overlay-point',
       'type': 'circle',
       'source': 'geojson-overlay',
       'filter': ['==', '$type', 'Point'],
       'layout': {},
       'paint': {
         'circle-color': 'rgb(68, 138, 255)',
         'circle-stroke-color': '#fff',
         'circle-stroke-width': 6,
         'circle-radius': 7
       }
     });
    ```
    
9.  Fit the map view to the bounding box of the data.
    
    ```js
    const bounds = [Infinity, Infinity, -Infinity, -Infinity];
     const processCoordinates = function(coords) {
         if (Array.isArray(coords[0])) {
             coords.map(c=>processCoordinates(c));
         } else {
             bounds[0] = Math.min(bounds[0], coords[0]);
             bounds[1] = Math.min(bounds[1], coords[1]);
             bounds[2] = Math.max(bounds[2], coords[0]);
             bounds[3] = Math.max(bounds[3], coords[1]);
         }
     };
     geojson.features.forEach(function(f) {
         if (f.geometry && f.geometry.coordinates) {
             processCoordinates(f.geometry.coordinates);
         }
     });
     map.fitBounds(bounds, {
         padding: 20
     });
    ```
    

## 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 multiGeometry 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.STREETS,
                
             center: [-52.32, 32.91], // starting position [lng, lat]
             zoom: 2, // 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.  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() {
        
     });
    ```
    
5.  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 [GeoJSON multi-geometries sample data](https://docs.maptiler.com/sdk-js/assets/geoJSON_multigeometries.geojson).
    
    ```js
    map.on('load', async function() {
         const geojson = await maptilersdk.data.get('YOUR_MAPTILER_DATASET_ID_HERE');
         map.addSource('geojson-overlay', {
             'type': 'geojson',
             'data': geojson
         });
     });
    ```
    
6.  Add the vector layer. Add a layer for each type of geometry: point, line and polygon
    
    ```js
    map.addLayer({
       'id': 'geojson-overlay-fill',
       'type': 'fill',
       'source': 'geojson-overlay',
       'filter': ['==', '$type', 'Polygon'],
       'layout': {},
       'paint': {
         'fill-color': '#fff',
         'fill-opacity': 0.4
       }
     });
     map.addLayer({
       'id': 'geojson-overlay-line',
       'type': 'line',
       'source': 'geojson-overlay',
       'layout': {},
       'paint': {
         'line-color': 'rgb(68, 138, 255)',
         'line-width': 3
       }
     });
     map.addLayer({
       'id': 'geojson-overlay-point',
       'type': 'circle',
       'source': 'geojson-overlay',
       'filter': ['==', '$type', 'Point'],
       'layout': {},
       'paint': {
         'circle-color': 'rgb(68, 138, 255)',
         'circle-stroke-color': '#fff',
         'circle-stroke-width': 6,
         'circle-radius': 7
       }
     });
    ```
    
7.  Fit the map view to the bounding box of the data.
    
    ```js
    const bounds = [Infinity, Infinity, -Infinity, -Infinity];
     const processCoordinates = function(coords) {
         if (Array.isArray(coords[0])) {
             coords.map(c=>processCoordinates(c));
         } else {
             bounds[0] = Math.min(bounds[0], coords[0]);
             bounds[1] = Math.min(bounds[1], coords[1]);
             bounds[2] = Math.max(bounds[2], coords[0]);
             bounds[3] = Math.max(bounds[3], coords[1]);
         }
     };
     geojson.features.forEach(function(f) {
         if (f.geometry && f.geometry.coordinates) {
             processCoordinates(f.geometry.coordinates);
         }
     });
     map.fitBounds(bounds, {
         padding: 20
     });
    ```
    

### Complete source code

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Display a GeoJSON Layer</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <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.STREETS,
      center: [-52.32, 32.91], // starting position [lng, lat]
      zoom: 2, // starting zoom
    });
    map.on('load', async function() {
        const result = await maptilersdk.data.get('YOUR_MAPTILER_DATASET_ID_HERE');
        map.addSource('geojson-overlay', {
            'type': 'geojson',
            'data': result
        });
        map.addLayer({
            'id': 'geojson-overlay-fill',
            'type': 'fill',
            'source': 'geojson-overlay',
            'filter': ['==', '$type', 'Polygon'],
            'layout': {},
            'paint': {
                'fill-color': '#fff',
                'fill-opacity': 0.4
            }
        });
        map.addLayer({
            'id': 'geojson-overlay-line',
            'type': 'line',
            'source': 'geojson-overlay',
            'layout': {},
            'paint': {
                'line-color': 'rgb(68, 138, 255)',
                'line-width': 3
            }
        });
        map.addLayer({
            'id': 'geojson-overlay-point',
            'type': 'circle',
            'source': 'geojson-overlay',
            'filter': ['==', '$type', 'Point'],
            'layout': {},
            'paint': {
                'circle-color': 'rgb(68, 138, 255)',
                'circle-stroke-color': '#fff',
                'circle-stroke-width': 6,
                'circle-radius': 7
            }
        });
        const bounds = [Infinity, Infinity, -Infinity, -Infinity];
        const processCoordinates = function(coords) {
            if (Array.isArray(coords[0])) {
                coords.map(c=>processCoordinates(c));
            } else {
                bounds[0] = Math.min(bounds[0], coords[0]);
                bounds[1] = Math.min(bounds[1], coords[1]);
                bounds[2] = Math.max(bounds[2], coords[0]);
                bounds[3] = Math.max(bounds[3], coords[1]);
            }
        };
        geojson.features.forEach(function(f) {
            if (f.geometry && f.geometry.coordinates) {
                processCoordinates(f.geometry.coordinates);
            }
        });
        map.fitBounds(bounds, {
            padding: 20
        });
    });  
  </script>
</body>
</html>
```

## Related examples

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

Tutorials

Add a GeoJSON point overlay to your map application.

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

Tutorials

Add a GeoJSON line overlay to the map application.

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

Tutorials

Add GeoJSON polygon overlay to your web map application.

### [Draw GeoJSON points](https://docs.maptiler.com/sdk-js/examples/geojson-markers/)

Examples

Draw point markers from a GeoJSON collection on maps.