How to Draw and Store Map Polygons in WordPress Using GeoJSON

The Client Request: Mark Buildings and Areas, Not Just Points

What the Client Actually Wanted vs What Was Technically Feasible

The brief was clear: mark campus buildings on the map so that users can click on a building and see information about it. What was less clear was exactly what “mark a building” meant to the client versus what it meant to a developer.

The client imagined clicking on a building footprint and having it automatically selected, the way Google Maps highlights a place when you tap it. What was actually feasible — and ultimately more flexible — was drawing a polygon manually over each building using a drawing tool in the WordPress admin.

Manual Polygon Drawing vs Automatic Building Selection: Expectations vs Reality

Automatic building selection from OpenStreetMap data is technically possible but requires a backend process to fetch, parse, and cache that data, and the results are only as accurate as the OSM contributors in that area. Manual polygon drawing in a controlled admin interface produces more accurate results and gives the content editor full control over what is highlighted.

What Is GeoJSON and Why It Is the Right Format

GeoJSON Structure Explained Simply

GeoJSON is an open standard format for representing geographic features using JSON. A polygon in GeoJSON is a Feature object with a geometry type of “Polygon” and an array of coordinate rings.

{
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": [[[4.895, 52.370],[4.896, 52.370],[4.896, 52.371],[4.895, 52.370]]]
    },
    "properties": {}
  }]
}

Why GeoJSON Works Natively with Leaflet.js

Leaflet has built-in support for rendering GeoJSON via the L.geoJSON method. This means you can store your polygon data as a GeoJSON string in WordPress, decode it on the frontend, and hand it directly to Leaflet without any transformation.

Implementing Leaflet Draw in the WordPress Admin

Enqueueing Leaflet Draw Assets Correctly

Leaflet Draw needs to be loaded after Leaflet itself, and only in the WordPress admin on the location editing screen — not on every admin page. Always check the post type before enqueuing.

Setting Up the Drawing Toolbar for Polygons

The Leaflet Draw toolbar is initialized with a configuration object that specifies which drawing tools to enable. For a location editor that supports polygons but not other shape types, restrict the toolbar to polygon drawing only to simplify the interface for content editors.

Supporting Multiple Polygons per Location

Some locations — a building complex, for example — may require more than one polygon. Leaflet Draw supports this naturally: each drawn shape is added to the feature group, and when saved, the entire feature group is serialized as a GeoJSON FeatureCollection.

Saving and Retrieving GeoJSON in WordPress

Storing GeoJSON as Post Meta

Use wp_unslash before sanitizing to handle JSON characters that WordPress may have escaped, and store the raw JSON string rather than a PHP array to avoid serialization overhead on retrieval. Always validate that the value is parseable JSON before saving.

Rendering GeoJSON on the Frontend with L.geoJSON

On the frontend, parse the GeoJSON string with JSON.parse inside a try-catch block to handle any malformed data gracefully. Pass the parsed object to L.geoJSON with a style function that applies the location’s category color.

Common Pitfalls with Polygons in WordPress

Invalid GeoJSON Breaking the Map Silently

GeoJSON validation errors are silent by default in Leaflet. Always wrap GeoJSON parsing and rendering in try-catch blocks, and log a warning with the location title when a parse error occurs.

Auto-Calculating Center Point from Polygon Bounds

When a location has a polygon but no manually set coordinates for its marker, calculate the center automatically from the polygon’s bounds using Leaflet’s getBounds().getCenter() method.

Summary and What Comes Next

GeoJSON is the right format for storing polygon data in WordPress. It is natively supported by Leaflet, human-readable, and flexible enough to represent single polygons, multiple polygons, and complex shapes in a single field. Always validate before saving and handle parse errors gracefully on the frontend.

With polygon support in place, the next step is adding categories. The next article covers custom taxonomy registration, RGBA color pickers, and how to apply category colors to polygons dynamically.