The great thing is - because the GeoJSON file is a `json` file - it means it acn be parsed easily using the builtin JavaScript json functions (e.g.,
JSON.parse(..)
).
Interactive Map
Example of using the GeoJSON data to create an interactive map (viewing world data).
Example loading and using the GeoJSON data to create a 3d interactive visualization.
Looking Inside
We can start of by loading a GeoJSON file (one of the basic world map resource) - after loading - we'll parse the data then loop over and dump the name of all the top level objects:
// Load GeoJSON data (using a simplified world map) const response = await fetch('https://raw.githubusercontent.com/nvkelso/natural-earth-vector/master/geojson/ne_110m_admin_0_countries.geojson'); const geoDataRaw = await response.text(); const geoData = JSON.parse( geoDataRaw );
If we look at the official specification, we can get information for what these objects are:
• "type" (Standard GeoJSON Property) Indicates the type of GeoJSON object (e.g., feature collection, point, ...)
• "name" - metadata field for information (e.g., name of the file)
• "crs" (Coordinate Reference System, Optional in GeoJSON) - defines the spatial reference system (e.g., "EPSG:4326" for WGS84). Modern GeoJSON defaults to WGS84 (longitude/latitude), so "crs" is often omitted.
• "features" (Standard in FeatureCollection) - An array of GeoJSON Feature objects (each containing a geometry and properties). This is only present if "type": "FeatureCollection".
We can do a bit better and modify the code so it prints out the contents of each objects. We modify the loop:
for (o in geoData) { console.log( o + ' : ' + geoData[ o ] ); }
All geometry objects must have a type and a coordinates array.
• "type": Specifies the geometry type (e.g., "Point", "LineString", "Polygon", "MultiPolygon", etc.).
• "coordinates": An array defining the vertices of the geometry. The structure varies by type.
As you can see - our example is a MultiPolygon - which represents multiple distinct polygons (e.g., islands, disjoint regions). Its coordinates are a 3D array structured as:
• The first ring is the exterior boundary.
• Subsequent rings (if any) are holes inside the exterior.
• Each ring must be closed (first and last points are identical).
Now we can write a simple canvas to draw the polygon data. If it's a
MultiPolygon
we only draw the first Polygon for the exterior boundary. If it's just a
Polygon
we just draw it. The data inside a Polygon is just an array of points which we can conenct together using a line drawing function.
Draw a line for the polygon object points - connect together the points.
We also need to create a
project
function which converts geographic coordinates (longitude and latitude) into canvas pixel coordinates so they can be drawn on an HTML5
<canvas>
.
// Set up canvas let canvas = document.createElement('canvas'); canvas.width = canvas.height = 512; document.body.appendChild(canvas); const ctx = canvas.getContext('2d');
// Normalize coordinates to fit canvas function project(lon, lat) { // Mercator-like projection (simplified) const x = (lon + 180) * (canvas.width / 360); const y = (90 - lat) * (canvas.height / 180); return { x, y }; }
// Draw the exterior ring of the first polygon function drawPolygonExterior( polygon ) { ctx.beginPath();
// Start from the first point const start = project(polygon[0][0], polygon[0][1]); ctx.moveTo(start.x, start.y);
// Draw lines to subsequent points for (let i = 1; i < polygon.length; i++) { const [lon, lat] = polygon[i]; const { x, y } = project(lon, lat); ctx.lineTo(x, y); }
for (let i=0; i<geoData[ 'features' ].length; i++) { let geometryobject = geoData[ 'features' ][ i ][ 'geometry' ];
console.log('geometryobject.type:', geometryobject.type ); if ( geometryobject.type == 'MultiPolygon' ) { const polygon = geometryobject.coordinates[0][0]; // First polygon's exterior ring drawPolygonExterior( polygon ); } if ( geometryobject.type == 'Polygon' ) { drawPolygonExterior( geometryobject.coordinates[0] ); } }
We're drawing the geometric data as lines - if we want to draw the polygons as solid shapes - we need to trianglulate the shape. As the shape is not convex this can be a bit more complex (do more than a convex hull wrapping algorithm).
Loading Data (Triangles)
The following gives you a working eample of loading in the map data from a geojson file (parsing and converting it into triangles) which can be rendered using WebGL or WebGPU.
// Load GeoJSON data (using a simplified world map) const response = await fetch('https://raw.githubusercontent.com/nvkelso/natural-earth-vector/master/geojson/ne_110m_admin_0_countries.geojson'); const geoData = await response.json();
// Process GeoJSON into triangle data const positions = []; // flattened array of triangle vertices const countryIds = []; // country index per vertex const countryInfo = []; // metadata for each country
let countryIndex = 0; for (const feature of geoData.features) { const properties = feature.properties;
// Store country info countryInfo.push({ name: properties.NAME || properties.NAME_LONG || 'Unnamed', iso: properties.ISO_A2 || '', population: properties.POP_EST || 0, gdp: properties.GDP_MD_EST || 0 });
// Handle different geometry types const geometry = feature.geometry; if (geometry.type === 'Polygon') { processPolygon(geometry.coordinates, countryIndex); } else if (geometry.type === 'MultiPolygon') { for (const polygon of geometry.coordinates) { processPolygon(polygon, countryIndex); } }
countryIndex++; }
// Helper function to process a single polygon (with possible holes) function processPolygon(coordinates, countryIdx) { // The first ring is the exterior, others are holes const exteriorRing = coordinates[0];
// Convert polygon to triangles using ear clipping algorithm const triangles = earClip(exteriorRing);
// Add the triangles to our buffers for (const triangle of triangles) { for (const [x, y] of triangle) { positions.push(x, y); countryIds.push(countryIdx); } }
// TODO: Handle holes - would need to clip them from the exterior }
// Simple ear-clipping triangulation for convex polygons function earClip(polygon) { const triangles = []; const vertices = polygon.slice();
// Remove duplicate last point if it exists if (vertices.length > 1 && vertices[0][0] === vertices[vertices.length-1][0] && vertices[0][1] === vertices[vertices.length-1][1]) { vertices.pop(); }
// For convex polygons, we can just fan triangulate if (vertices.length >= 3) { for (let i = 1; i < vertices.length - 1; i++) { triangles.push([ vertices[0], vertices[i], vertices[i + 1] ]); } }
