O'Reilly logo

Leaflet.js Essentials by Paul Crickard III

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

GeoJSON in Leaflet.js

GeoJSON is just another data format for you to add to your map. It can be added as a hardcoded variable. Leaflet.js geometries—markers, polylines, and polygons—can be converted to GeoJSON. You can style the data, apply options to each feature, and even filter the data. The next sections will cover these topics, starting with adding GeoJSON as a hardcoded variable.

GeoJSON as a variable

The easiest way to add GeoJSON to your map is to hardcode the data into a variable. In Leaflet.js, you will start by creating a variable that will contain GeoJSON. In the following code, GeoJSON data consisting of two points is assigned to the geojson variable:

vargeojson = [{ "type": "Feature", "geometry": { "type": "Point", "coordinates": [-106.62987,35.10418] ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required