Finger pointing at a map.

WordPress plugin: ACF Mapbox geoJSON field

Jens Nilsson on

I've just released an add-on for Advanced Custom Fields that adds the Mapbox geoJSON field-type. The field has a graphical interface for editing geoJSON-data, drawing PolyLines, Polygons, Rectangles as well as adding markers directly on a map. The plugin is available in the WordPress plugin directory.

The data

The data that the field produces is saved and retrieved as a string of geoJSON-formatted data. Read more about this data-format over at geojson.org.

Below is an example where I've used all of the current features of the field to create a FeatureCollection with four Features.

The geoJSON-formatted data stored for this specific map looks like this:

{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-68.5546875,27.371767300523047],[-56.6015625,14.264383087562662],[-42.890625,16.29905101458183],[-37.96875,31.353636941500987],[-50.2734375,40.713955826286046],[-68.5546875,27.371767300523047]]]}},{"type":"Feature","properties":{},"geometry":{"type":"LineString","coordinates":[[-44.6484375,5.61598581915534],[-17.2265625,-4.915832801313164],[-20.390625,-23.24134610238612]]}},{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-42.1875,48.22467264956519],[-42.1875,58.26328705248601],[-19.6875,58.26328705248601],[-19.6875,48.22467264956519],[-42.1875,48.22467264956519]]]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-20.390625,28.613459424004414]}}]}

Rendering

I've chosen to also use Mapbox to render the data onto a map on my frontend but you can also render it to a Google Maps map via the data layer.

Mapbox

The field require you to have an access token and a map ID from Mapbox to be rendered correctly in wp-admin, it's quite easy to set up. In your map-project you can choose the style of the map that will be displayed.

Download