PHPackages                             androlax2/acf-image-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. androlax2/acf-image-map

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

androlax2/acf-image-map
=======================

An ACF field to map shapes in image.

1.1.1(11mo ago)9706↓50%2[8 PRs](https://github.com/Androlax2/acf-image-map/pulls)MITJavaScriptPHP >=7.3CI passing

Since Sep 6Pushed 11mo ago1 watchersCompare

[ Source](https://github.com/Androlax2/acf-image-map)[ Packagist](https://packagist.org/packages/androlax2/acf-image-map)[ RSS](/packages/androlax2-acf-image-map/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (8)Dependencies (6)Versions (17)Used By (0)

ACF Image Map
=============

[](#acf-image-map)

[![Example](https://user-images.githubusercontent.com/39646949/132213349-31b4fee3-1a54-4f9a-82cb-fddbebf5aead.gif)](https://user-images.githubusercontent.com/39646949/132213349-31b4fee3-1a54-4f9a-82cb-fddbebf5aead.gif)

Requirements
------------

[](#requirements)

- [PHP](https://secure.php.net/manual/en/install.php) >= 7.3
- [Composer](https://getcomposer.org/download/)

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

[](#installation)

### Bedrock

[](#bedrock)

Install via Composer:

```
$ composer require androlax2/acf-image-map
```

### Manual

[](#manual)

Download the release `.zip` and install into `wp-content/plugins`.

Usage
-----

[](#usage)

First you need to define an image that will be used to add different shapes on it.

### Shapes

[](#shapes)

You can use different shapes, for now you can use **polygon** and **points**. On the front end :

- It will return an array with your coords in an `area_coords` for the **polygon**,
- It will return an array with the point coord in an `x` & `y` for the **point**.

### ACF Composer

[](#acf-composer)

If you are using [ACF Builder](https://github.com/StoutLogic/acf-builder) :

#### Point

[](#point)

```
$field
  ->addImage('my_image')
  ->addField('my_point_coords', 'image_map', [
    'image_field_label' => 'my_image',
    'shape' => 'point',
    'percentage' => true,
  ]);
```

#### Polygon

[](#polygon)

```
$field
  ->addImage('my_image')
  ->addField('my_poly_coords', 'image_map', [
    'image_field_label' => 'my_image',
    'shape' => 'poly',
  ]);
```

### HTML

[](#html)

#### Point

[](#point-1)

For the point, you have the `x` and `y` coords.

Let's imagine that we have the fields defined above:

```
$field
  ->addImage('my_image')
  ->addField('my_point_coords', 'image_map', [
    'image_field_label' => 'my_image',
    'shape' => 'point',
    'percentage' => true,
  ]);
```

So we would have an HTML structure that would look like this to display our point on the image:

```
$image = get_field('my_image');
$point = get_field('my_point_coords');