Skip to content

GeoJSON Support

This document covers Leaflet's comprehensive GeoJSON support system, which enables parsing, displaying, and converting geographic data in the GeoJSON format. The system provides both input capabilities (loading GeoJSON data onto maps) and output capabilities (converting Leaflet layers back to GeoJSON format).

For information about vector layer rendering and styling, see Vector Layers. For marker-specific functionality, see Markers and Icons.

Architecture Overview

Leaflet's GeoJSON support is built around a central GeoJSON class that extends FeatureGroup, along with static utility functions for coordinate transformations and geometry conversions. The system also extends core layer types with toGeoJSON() methods to enable round-trip conversions.

SVG
100%

Architecture: GeoJSON Support System

GeoJSON Class

The GeoJSON class serves as the primary interface for working with GeoJSON data in Leaflet. It extends FeatureGroup to provide layer management capabilities while adding GeoJSON-specific functionality.

Constructor and Options

The GeoJSON class accepts optional GeoJSON data and configuration options:

OptionTypeDefaultDescription
pointToLayerFunctionCreates MarkerConverts GeoJSON points to Leaflet layers
styleFunction{}Styling function for vector layers
onEachFeatureFunctionNo-opCallback executed for each feature
filterFunctiontrueFeature filtering function
coordsToLatLngFunctioncoordsToLatLngCoordinate transformation function
markersInheritOptionsBooleanfalseWhether markers inherit group options
SVG
100%

GeoJSON Class Initialization and Options

Core Methods

addData(geojson)

The addData() method processes GeoJSON data and converts it to appropriate Leaflet layers:

SVG
100%

addData Method Processing Flow

resetStyle(layer) and setStyle(style)

Style management methods allow dynamic styling updates:

  • resetStyle() - Resets layer styles to original GeoJSON styles
  • setStyle() - Applies new styling functions to all layers

Static Utility Functions

Geometry Conversion

geometryToLayer(geojson, options)

Converts GeoJSON geometries to appropriate Leaflet layer types:

GeoJSON TypeLeaflet LayerNotes
PointMarkerUses pointToLayer option if provided
MultiPointFeatureGroupContains multiple markers
LineStringPolylineSingle line
MultiLineStringPolylineMulti-dimensional coordinates
PolygonPolygonSingle polygon with optional holes
MultiPolygonPolygonMulti-dimensional coordinates
GeometryCollectionFeatureGroupRecursive geometry processing
FeatureCollectionFeatureGroupRecursive feature processing
SVG
100%

geometryToLayer Conversion Logic

Coordinate Transformations

coordsToLatLng(coords) and coordsToLatLngs(coords, levelsDeep, coordsToLatLng)

Handle coordinate system conversions between GeoJSON format ([lng, lat, alt]) and Leaflet format (LatLng(lat, lng, alt)):

SVG
100%

Coordinate System Transformations

Layer toGeoJSON Extensions

Leaflet extends core layer types with toGeoJSON() methods to enable converting layers back to GeoJSON format.

Point-based Layers

Point-based layers (Marker, Circle, CircleMarker) share a common PointToGeoJSON mixin:

SVG
100%

Point Layer GeoJSON Conversion

Vector Layers

Polyline toGeoJSON

Polylines convert to LineString or MultiLineString based on coordinate structure:

SVG
100%

Polyline GeoJSON Conversion

Polygon toGeoJSON

Polygons handle both simple polygons and multi-polygons with holes:

SVG
100%

Polygon GeoJSON Conversion

LayerGroup Collections

LayerGroup handles collections and produces FeatureCollection, GeometryCollection, or MultiPoint output:

SVG
100%

LayerGroup GeoJSON Conversion

Feature Normalization

The asFeature() and getFeature() functions ensure consistent GeoJSON Feature format:

Input TypeOutput
FeatureReturns as-is
FeatureCollectionReturns as-is
Geometry objectWraps in Feature with empty properties

Usage Patterns

Basic GeoJSON Loading

new GeoJSON(geojsonData, {
    style: function (feature) {
        return {color: feature.properties.color};
    },
    onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.description);
    }
}).addTo(map);

Custom Point Rendering

new GeoJSON(geojsonData, {
    pointToLayer: function (feature, latlng) {
        return new CircleMarker(latlng, {radius: feature.properties.size});
    }
});

Round-trip Conversion

// Layer to GeoJSON
const geojson = layerGroup.toGeoJSON();

// GeoJSON back to layers
const layers = new GeoJSON(geojson);