PHPackages                             considbrs-webdev/modularity-arcgis-map - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. considbrs-webdev/modularity-arcgis-map

ActiveWordpress-plugin[Utility & Helpers](/categories/utility)

considbrs-webdev/modularity-arcgis-map
======================================

055↓88.3%PHP

Since Mar 9Pushed 2mo agoCompare

[ Source](https://github.com/Considbrs-Webdev/modularity-arcgis-map)[ Packagist](https://packagist.org/packages/considbrs-webdev/modularity-arcgis-map)[ RSS](/packages/considbrs-webdev-modularity-arcgis-map/feed)WikiDiscussions dev Synced 3w ago

READMEChangelogDependenciesVersions (2)Used By (0)

Modularity ArcGIS Map
=====================

[](#modularity-arcgis-map)

`modularity-arcgis-map` is a WordPress plugin that adds an ArcGIS-powered map module to [Modularity](https://github.com/helsingborg-stad/modularity). It is built for Modularity/Municipio-style installations where editors configure maps through ACF, while the frontend lazy-loads the ArcGIS JavaScript SDK and renders the selected web map.

The plugin also includes:

- a global settings page for shared ArcGIS defaults
- a custom ACF map picker based on Leaflet, OpenStreetMap tiles, and Nominatim search
- a reusable PHP helper for rendering ArcGIS map containers outside the Modularity module
- optional GeoJSON overlay support when using the helper directly

Features
--------

[](#features)

- Registers an `ArcGIS Map` Modularity module
- Adds a global settings page under `Settings -> ArcGIS Map Settings`
- Stores map coordinates as structured latitude, longitude, and zoom values
- Lets editors search for locations in the admin UI
- Supports default global portal URL, map ID, marker, and start position
- Supports per-module overrides for portal URL, map ID, marker, marker size, height, and map description
- Loads the ArcGIS SDK once per page and reuses it across multiple map instances
- Adds a Layer List widget to the map UI
- Exposes a `MapRenderer` helper so other PHP code can render compatible map containers

Runtime Expectations
--------------------

[](#runtime-expectations)

This plugin is not a fully standalone WordPress plugin in practice. The code expects a project that already provides:

- WordPress
- [Advanced Custom Fields](https://www.advancedcustomfields.com/) with options-page support
- [Modularity](https://github.com/helsingborg-stad/modularity)
- the Component Library Blade renderer used by Modularity
- the `AcfExportManager` class used for ACF import/export

The plugin repository itself contains no third-party Composer packages. Composer is only used to generate PSR-4 autoloading for the plugin namespace.

How It Works
------------

[](#how-it-works)

1. `modularity-arcgis-map.php` boots the plugin, loads translations, imports ACF field groups, exposes the Blade view path, and starts the app.
2. `source/php/App.php` registers the Modularity module, settings page, custom ACF field, admin assets, and frontend assets.
3. `source/php/Module/ArcgisMap.php` reads module fields and passes them to `ModularityArcgisMap\Helper\MapRenderer`.
4. `source/js/modularity-arcgis-map.js` scans for `.modularity-arcgis-map` elements, loads the ArcGIS SDK, and initializes the actual map view.
5. `source/php/AcfField/OpenStreetMap.php` and `source/js/acf-field-osm.js` power the admin-side coordinate picker.

Installation
------------

[](#installation)

### 1. Place the plugin in your WordPress plugins directory

[](#1-place-the-plugin-in-your-wordpress-plugins-directory)

Example:

```
wp-content/plugins/modularity-arcgis-map

```

### 2. Install JavaScript dependencies and build frontend assets

[](#2-install-javascript-dependencies-and-build-frontend-assets)

```
npm ci
npm run build
```

If you prefer the bundled helper script:

```
php build.php
```

### 3. Regenerate Composer autoloading when needed

[](#3-regenerate-composer-autoloading-when-needed)

```
composer dump-autoload
```

### 4. Activate the plugin

[](#4-activate-the-plugin)

Activate `Modularity ArcGIS Map` from the WordPress admin.

Global Configuration
--------------------

[](#global-configuration)

After activation, go to `Settings -> ArcGIS Map Settings`.

### Settings fields

[](#settings-fields)

FieldPurpose`SDK URL`URL to the ArcGIS JavaScript SDK loader. The plugin defaults to `https://js.arcgis.com/4.33/`.`Theme URL`URL to the matching ArcGIS stylesheet. The plugin defaults to `https://js.arcgis.com/4.33/esri/themes/light/main.css`.`Default portal URL`The ArcGIS portal or ArcGIS Online URL used when a module does not define its own portal.`Default map ID`Fallback ArcGIS web map ID used when a module does not define one.`Default marker`Global fallback marker image. If empty, the plugin uses `assets/images/marker.svg`.`Default map position`Default latitude, longitude, and zoom used when new modules are created and no explicit position has been chosen yet.### Recommended setup

[](#recommended-setup)

- Keep `SDK URL` and `Theme URL` on the same ArcGIS version.
- Set a global `Default portal URL` and `Default map ID` if most modules should reuse the same ArcGIS content.
- Set a `Default map position` so editors get a sensible starting view in the coordinate picker.

Using the Modularity Module
---------------------------

[](#using-the-modularity-module)

Create a new Modularity module of type `ArcGIS Map`.

### Module settings

[](#module-settings)

FieldPurpose`Map position`Coordinate picker storing latitude, longitude, and zoom.`Height in pixels`Frontend map height. Default `500`, minimum `300`, maximum `1000`.`Show marker`Enables a picture marker at the configured coordinates.`Description`Optional text rendered as a `` below the map.`Portal URL`Optional per-module portal override.`Theme URL`Present in the field group, but not currently used by the frontend runtime. Use the global setting instead.`Map ID`Optional per-module web map ID override.`Marker`Optional per-module marker image override.`Marker width`Marker width in pixels. Defaults to `27`.`Marker height`Marker height in pixels. Defaults to `40`.### Frontend output

[](#frontend-output)

The module view renders:

- the module title, unless Modularity is configured to hide it
- a `` wrapper
- a `.modularity-arcgis-map` container with data attributes consumed by the frontend script
- an optional `` when a description is set

Admin Coordinate Picker
-----------------------

[](#admin-coordinate-picker)

The custom `arcgis_open_street_map` ACF field is used for both:

- the global default map position
- the module-specific map position

### Editor behavior

[](#editor-behavior)

- The field shows a Leaflet map with OpenStreetMap tiles.
- Editors can click the map to place or move a marker.
- Dragging the marker updates the saved coordinates.
- Zoom changes are saved when a marker exists.
- The search field uses Nominatim to search for places.
- `Reset to default` clears the stored value and resets the view to the configured default location.

### Stored value format

[](#stored-value-format)

The raw stored value is a JSON string like:

```
{"lat":59.3293,"lng":18.0686,"zoom":13}
```

When the field is read through ACF, the plugin formats it into:

```
[
    'lat'  => 59.3293,
    'lng'  => 18.0686,
    'zoom' => 13,
]
```

Developer Usage
---------------

[](#developer-usage)

### Rendering a map outside Modularity

[](#rendering-a-map-outside-modularity)

Use `ModularityArcgisMap\Helper\MapRenderer` when you want to render a compatible ArcGIS map container from custom PHP code:

```