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.
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:
| Option | Type | Default | Description |
|---|---|---|---|
pointToLayer | Function | Creates Marker | Converts GeoJSON points to Leaflet layers |
style | Function | {} | Styling function for vector layers |
onEachFeature | Function | No-op | Callback executed for each feature |
filter | Function | true | Feature filtering function |
coordsToLatLng | Function | coordsToLatLng | Coordinate transformation function |
markersInheritOptions | Boolean | false | Whether markers inherit group options |
GeoJSON Class Initialization and Options
Core Methods
addData(geojson)
The addData() method processes GeoJSON data and converts it to appropriate Leaflet layers:
addData Method Processing Flow
resetStyle(layer) and setStyle(style)
Style management methods allow dynamic styling updates:
resetStyle()- Resets layer styles to original GeoJSON stylessetStyle()- Applies new styling functions to all layers
Static Utility Functions
Geometry Conversion
geometryToLayer(geojson, options)
Converts GeoJSON geometries to appropriate Leaflet layer types:
| GeoJSON Type | Leaflet Layer | Notes |
|---|---|---|
Point | Marker | Uses pointToLayer option if provided |
MultiPoint | FeatureGroup | Contains multiple markers |
LineString | Polyline | Single line |
MultiLineString | Polyline | Multi-dimensional coordinates |
Polygon | Polygon | Single polygon with optional holes |
MultiPolygon | Polygon | Multi-dimensional coordinates |
GeometryCollection | FeatureGroup | Recursive geometry processing |
FeatureCollection | FeatureGroup | Recursive feature processing |
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)):
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:
Point Layer GeoJSON Conversion
Vector Layers
Polyline toGeoJSON
Polylines convert to LineString or MultiLineString based on coordinate structure:
Polyline GeoJSON Conversion
Polygon toGeoJSON
Polygons handle both simple polygons and multi-polygons with holes:
Polygon GeoJSON Conversion
LayerGroup Collections
LayerGroup handles collections and produces FeatureCollection, GeometryCollection, or MultiPoint output:
LayerGroup GeoJSON Conversion
Feature Normalization
The asFeature() and getFeature() functions ensure consistent GeoJSON Feature format:
| Input Type | Output |
|---|---|
Feature | Returns as-is |
FeatureCollection | Returns as-is |
| Geometry object | Wraps 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);