GeoJSON for Web Maps: A Guide

GeoJSON is the leading format for exchanging geodata on the web. All popular mapping libraries — Leaflet, Mapbox GL JS, OpenLayers, deck.gl — support GeoJSON natively. With osm2cdr.ru you can export any OpenStreetMap area to GeoJSON in seconds.

The structure of GeoJSON

A GeoJSON file is plain JSON with objects of type FeatureCollection. Each Feature contains a geometry (point, line or polygon) and properties — OpenStreetMap tags: name, object type, address and other attributes.

How to connect it to Leaflet

The simplest way to show GeoJSON on a web map:

fetch('/data/moscow-buildings.geojson')
  .then(r => r.json())
  .then(data => L.geoJSON(data, {
    style: { color: '#3388ff', weight: 1, fillOpacity: 0.3 }
  }).addTo(map));

Styling by properties

GeoJSON from osm2cdr.ru preserves OSM tags: highway, building, amenity, natural and others. This lets you style objects by type:

L.geoJSON(data, {
  style: function(feature) {
    if (feature.properties.building) return { color: '#e74c3c' };
    if (feature.properties.natural === 'water') return { color: '#3498db' };
    return { color: '#95a5a6' };
  }
});

Optimising for large datasets

GeoJSON works well for small and medium areas (up to 50 km²). For larger territories:

• GeoJSON-Seq — a streaming format; the file loads line by line.
• PMTiles — a cloud-native tile format that instantly displays millions of objects.
• Vector tiles — loaded as you navigate the map.

Tools for working with GeoJSON

• geojson.io — an online editor for viewing and editing.
• Mapshaper — geometry simplification and conversion.
• Turf.js — spatial analysis right in the browser.
• QGIS — a full-featured GIS for complex processing.