Display a GeoJSON Layer

--- title: "Show Polygon Data from GeoJSON on the Map | Leaflet" description: "Add GeoJSON polygon overlays to Leaflet JS maps." --- # Show Polygon Data from GeoJSON on the Map This tutorial shows how to add a GeoJSON overlay to the map using Leaflet JS. 1. Copy the following code, paste it into your favorite text editor, and save it as a `.html` file. ```html Display a GeoJSON Layer

``` 1. Install the npm package. ```bash npm install --save leaflet ``` 2. Include the CSS file. If you have a bundler that can handle CSS, you can [`import`](#) the CSS or include it with a [``](#) in the head of the document via the CDN ```js import "leaflet/dist/leaflet.css"; ``` ```html ``` 3. Include the following code in your JavaScript file (Example: main.js). ```js import L from 'leaflet'; const key = 'YOUR_MAPTILER_API_KEY_HERE'; const map = L.map('map').setView([45.137451890638886, -68.13734351262877], 6); //starting position L.tileLayer(`https://api.maptiler.com/maps/streets-v4/{z}/{x}/{y}.png?key=${key}`,{ //style URL tileSize: 512, zoomOffset: -1, minZoom: 1, attribution: "\u003ca href=\"https://www.maptiler.com/copyright/\" target=\"_blank\"\u003e\u0026copy; MapTiler\u003c/a\u003e \u003ca href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\"\u003e\u0026copy; OpenStreetMap contributors\u003c/a\u003e", crossOrigin: true }).addTo(map); ``` 1. 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/credentials/api-key/#secure-key) before you publish it. 2. 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. 1. Create GeoJSON layer. The following snippet creates GeoJSON layer with one feature (without attributes) and polygon geometry. ```js L.geoJSON({ 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [ [ [-67.13734351262877, 45.137451890638886], [-66.96466, 44.8097], [-68.03252, 44.3252], [-69.06, 43.98], [-70.11617, 43.68405], [-70.64573401557249, 43.090083319667144], [-70.75102474636725, 43.08003225358635], [-70.79761105007827, 43.21973948828747], [-70.98176001655037, 43.36789581966826], [-70.94416541205806, 43.46633942318431], [-71.08482, 45.3052400000002], [-70.6600225491012, 45.46022288673396], [-70.30495378282376, 45.914794623389355], [-70.00014034695016, 46.69317088478567], [-69.23708614772835, 47.44777598732787], [-68.90478084987546, 47.184794623394396], [-68.23430497910454, 47.35462921812177], [-67.79035274928509, 47.066248887716995], [-67.79141211614706, 45.702585354182816], [-67.13734351262877, 45.137451890638886] ] ] } }, { style: { color: "#088", opacity: 0.8, fillColor: "#088", fillOpacity: 0.8 } }).addTo(map); ``` ### Complete source code ```html Display a map

``` ## Related examples ### [Choropleth GeoJSON](https://docs.maptiler.com/leaflet/examples/choropleth-geojson/) Tutorials Create a styled choropleth map using GeoJSON and Leaflet. ### [Display thousands of polygons in Leaflet](https://docs.maptiler.com/leaflet/examples/helpers-polygon/) Examples Display thousands of polygons efficiently in Leaflet using maptilersdk.