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. 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

To add your own data, you only need one step: put your GeoJSON into the URL.

Because URLs cannot contain certain characters, you need to URL-encode the GeoJSON first. You can either do it manually using this tool: https://www.urlencoder.org/, or simply let any standard URL-encoder handle it for you.

Once it’s encoded, just place it in the link as a parameter and open the map. The map reads the data directly from the URL and displays your shapes, routes, or points right away.

No uploads, no special setup, and nothing else to manage — just paste the encoded GeoJSON into the link and you're done.

?geojson=<your-encoded-geojson>

GeoJSON Examples

To make it easy to get started, here are simple template examples for each supported geometry type. You can copy them, adjust the coordinates, encode them, and use them directly in the URL parameter.

Below is an example of an encoded LineString displayed on the map.

If you want to test it yourself, simply copy the following string and past it to the end of your Clockwork Micro map URL.

&geojson=%7B%0A%20%20"type"%3A%20"Feature"%2C%0A%20%20"geometry"%3A%20%7B%0A%20%20%20%20"type"%3A%20"LineString"%2C%0A%20%20%20%20"coordinates"%3A%20%5B%0A%20%20%20%20%20%20%5B-74.006%2C%2040.7128%5D%2C%0A%20%20%20%20%20%20%5B-0.1278%2C%2051.5074%5D%2C%0A%20%20%20%20%20%20%5B2.3522%2C%2048.8566%5D%0A%20%20%20%20%5D%0A%20%20%7D%2C%0A%20%20"properties"%3A%20%7B%0A%20%20%20%20"line-color"%3A%20"%23ff6b6b"%2C%0A%20%20%20%20"line-width"%3A%204%2C%0A%20%20%20%20"line-opacity"%3A%200.8%0A%20%20%7D%0A%7D

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 two European capitals: Lisbon and Madrid. Each point has simple styling properties, and you can replace them with any locations you like. Points are perfect for highlighting specific places, assets, events, or anything that exists at a single location on the map.

{
  "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
      }
    }
  ]
}

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.