Introducing Custom GeoJSON Layers via URL Parameters
We’ve just released a powerful new feature that makes working with our maps more flexible and developer-friendly than ever: you can now add your own GeoJSON layers directly through URL parameters. This means you can instantly visualize your own LineString, Polygon, and Point data on top of our map with no additional setup, plugin, or code changes required. Just pass your GeoJSON in the URL and the map renders it on the fly.
Why This Matters
Until now, displaying custom geographic data meant going through the Map-Maker to upload and configure your layers. It worked, but it added friction for quick demos, rapid data exploration, or sharing map snippets with teammates or clients.
With this update, you can:
- Prototype faster — paste your GeoJSON into the URL and view it immediately
- Share dynamic maps easily — send a link and others see the same custom layers
- Experiment interactively — adjust the data in your URL and refresh
It’s a simple feature with huge workflow benefits.
How It Works
Just include your GeoJSON as a URL-encoded parameter, and the map will automatically:
- Parse the GeoJSON
- Detect the geometry type
- Render it as a custom layer on top of the base map
?geojson=<your-encoded-geojson>
- Route previews: Show a custom LineString representing a hike, bike ride, or transit route.
- Property or boundary visualization: Add polygons to outline land parcels, service areas, or event zones.
- POI marking: Drop custom points for locations of interest, project assets, or field-collected data.
- Geo debugging: Quickly visualize output from a spatial script or backend service.
If you can express it in GeoJSON, you can see it instantly.
GeoJSON Examples
To make it easier to get started, here are simple template examples for each supported geometry type. You can copy these, modify the coordinates, encode them, and use them directly in the URL parameter.
LineString Example
This LineString represents a multi-segment flight path: New York to London with a connection, then London to Paris. It shows how you can chain multiple route legs together in a single geometry. Feel free to replace the coordinates to draw your own routes, road trips, or paths.
{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[-74.006, 40.7128],
[-0.1278, 51.5074],
[2.3522, 48.8566]
]
},
"properties": {
"line-color": "#ff6b6b",
"line-width": 4,
"line-opacity": 0.8
}
}This example shows how to format a LineString for routes, paths, or any connected sequence of coordinates.
Polygon Example
This example shows a simple square-shaped polygon that covers Portugal and Spain. It demonstrates how to define an area by listing coordinate pairs that form a closed shape. You can change or add more points if you want a more detailed border.
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-10.0, 36.0],
[3.0, 36.0],
[3.0, 44.0],
[-10.0, 44.0],
[-10.0, 36.0]
]
]
},
"properties": {
"line-color": "#00ffea",
"line-width": 18,
"line-opacity": 1,
"fill-color": "#ff00f7",
"fill-opacity": 0.6
}
}Use this structure to define areas such as boundaries, zones, or regions of interest.
Point Example
This example contains point features for several European capital cities. Each point includes simple styling properties, and you can add your own attributes or swap in any locations you want. Points are ideal for highlighting places, assets, events, or anything that exists at a single coordinate.
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-9.1393, 38.7223]
},
"properties": {
"point-color": "#39ff14",
"point-size": 6,
"point-opacity": 1
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-3.7038, 40.4168]
},
"properties": {
"point-color": "#39ff14",
"point-size": 6,
"point-opacity": 1
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [2.3522, 48.8566]
},
"properties": {
"point-color": "#39ff14",
"point-size": 6,
"point-opacity": 1
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [4.3517, 50.8503]
},
"properties": {
"point-color": "#39ff14",
"point-size": 6,
"point-opacity": 1
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [4.9041, 52.3676]
},
"properties": {
"point-color": "#39ff14",
"point-size": 6,
"point-opacity": 1
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [13.4050, 52.5200]
},
"properties": {
"point-color": "#39ff14",
"point-size": 6,
"point-opacity": 1
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [12.4964, 41.9028]
},
"properties": {
"point-color": "#39ff14",
"point-size": 6,
"point-opacity": 1
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [16.3738, 48.2082]
},
"properties": {
"point-color": "#39ff14",
"point-size": 6,
"point-opacity": 1
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [14.4378, 50.0755]
},
"properties": {
"point-color": "#39ff14",
"point-size": 6,
"point-opacity": 1
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [12.5683, 55.6761]
},
"properties": {
"point-color": "#39ff14",
"point-size": 6,
"point-opacity": 1
}
}
]
}Shareable, Reproducible Links
One of the most exciting aspects is how easy it becomes to share your work. Because the layers live in the URL, the map becomes a self-contained, portable representation of your data. Anyone you send the link to sees the same layers exactly as intended.
Try It Out
Give it a spin! Take any GeoJSON snippet, encode it, append it to the map URL, and refresh. You’ll see your custom data drawn directly on top of the map, no extra configuration needed.