InputfieldMapDrawFeatures.module

<?php namespace ProcessWire;

/**
 * ProcessWire Draw Map Features Inputfield
 *
 * #pw-summary Provides the Inputfield for FieldtypeMapDrawFeatures
 *
 * @copyright 2023 NB Communication Ltd
 * @license Mozilla Public License v2.0 http://mozilla.org/MPL/2.0
 *
 * @property string $defaultLat
 * @property string $defaultLng
 * @property int $minZoom
 * @property int $maxZoom
 * @property int $defaultZoom
 * @property int $height
 * @property array $controls
 * @property string $colour
 *
 */

class InputfieldMapDrawFeatures extends Inputfield {

	/**
	 * getModuleInfo is a module required by all modules to tell ProcessWire about them
	 *
	 * @return array
	 *
	 */
	public static function getModuleInfo() {
		return [
			'title' => 'Draw Map Features Inputfield',
			'version' => 2,
			'summary' => 'Provides the Inputfield for FieldtypeMapDrawFeatures',
			'author' => 'nbcommunication',
			'requires' => 'FieldtypeMapDrawFeatures',
			'icon' => 'object-group',
		];
	}

	const COLOUR = '#3bb2d0';
	const CONTROLS = ['point', 'line_string', 'polygon', 'combine_features', 'uncombine_features'];
	const HEIGHT = 480;
	const LNGLAT = 0.0;

	public function __construct() {
		require_once dirname(__FILE__) . '/MapDrawFeatures.php';
		$this->set('defaultLat', (string) self::LNGLAT);
		$this->set('defaultLng', (string) self::LNGLAT);
		$this->set('minZoom', 0);
		$this->set('maxZoom', 24);
		$this->set('defaultZoom', 12.0);
		$this->set('controls', self::CONTROLS);
		$this->set('height', self::HEIGHT);
		$this->set('colour', self::COLOUR);
		parent::__construct();
	}

	/**
	 * Add the CDN scripts
	 *
	 * @return bool
 	 *
	 */
	public function renderReady(Inputfield $parent = null, $renderValueMode = false) {

		$config = $this->wire()->config;

		$url = 'https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl'; // todo update once sorted on v3
		$config->scripts->add("$url.js");
		$config->styles->add("$url.css");

		$urlDraw = 'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.4.1/mapbox-gl-draw';
		$config->scripts->add("$urlDraw.js");
		$config->styles->add("$urlDraw.css");

		return parent::renderReady($parent, $renderValueMode);
	}

	/**
	 * Render the markup needed to draw the Inputfield
	 *
	 * @return string
	 *
	 */
	public function ___render() {

		$name = $this->attr('name');
		$id = $this->attr('id');
		$value = $this->attr('value');

		$center = $value->center;
		if(count($center) < 2 || (float) $center[0] === self::LNGLAT && (float) $center[1] === self::LNGLAT) {
			$center = [(float) $this->defaultLng, (float) $this->defaultLat];
			if(!$value->zoom) {
				$value->set('zoom', $this->defaultZoom);
			}
		}

		$controls = [];
		foreach($this->controls as $control) {
			$controls[$control] = true;
		}
		$controls['trash'] = true;

		$this->wire()->config->jsConfig($this->className, [
			'name' => $name,
			'map' => [
				'center' => $center,
				'minZoom' => $this->minZoom,
				'maxZoom' => $this->maxZoom,
				'style' => $this->get('style'),
				'zoom' => $value->zoom,
			],
			'draw' => [
				'controls' => $controls,
				'styles' => json_decode(str_replace(
					self::COLOUR,
					$this->colour,
					'[{"id":"gl-draw-polygon-fill-inactive","type":"fill","filter":["all",["==","active","false"],["==","$type","Polygon"],["!=","mode","static"]],"paint":{"fill-color":"#3bb2d0","fill-outline-color":"#3bb2d0","fill-opacity":0.1}},{"id":"gl-draw-polygon-fill-active","type":"fill","filter":["all",["==","active","true"],["==","$type","Polygon"]],"paint":{"fill-color":"#fbb03b","fill-outline-color":"#fbb03b","fill-opacity":0.1}},{"id":"gl-draw-polygon-midpoint","type":"circle","filter":["all",["==","$type","Point"],["==","meta","midpoint"]],"paint":{"circle-radius":3,"circle-color":"#fbb03b"}},{"id":"gl-draw-polygon-stroke-inactive","type":"line","filter":["all",["==","active","false"],["==","$type","Polygon"],["!=","mode","static"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-color":"#3bb2d0","line-width":2}},{"id":"gl-draw-polygon-stroke-active","type":"line","filter":["all",["==","active","true"],["==","$type","Polygon"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-color":"#fbb03b","line-dasharray":[0.2,2],"line-width":2}},{"id":"gl-draw-line-inactive","type":"line","filter":["all",["==","active","false"],["==","$type","LineString"],["!=","mode","static"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-color":"#3bb2d0","line-width":2}},{"id":"gl-draw-line-active","type":"line","filter":["all",["==","$type","LineString"],["==","active","true"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-color":"#fbb03b","line-dasharray":[0.2,2],"line-width":2}},{"id":"gl-draw-polygon-and-line-vertex-stroke-inactive","type":"circle","filter":["all",["==","meta","vertex"],["==","$type","Point"],["!=","mode","static"]],"paint":{"circle-radius":5,"circle-color":"#fff"}},{"id":"gl-draw-polygon-and-line-vertex-inactive","type":"circle","filter":["all",["==","meta","vertex"],["==","$type","Point"],["!=","mode","static"]],"paint":{"circle-radius":3,"circle-color":"#fbb03b"}},{"id":"gl-draw-point-point-stroke-inactive","type":"circle","filter":["all",["==","active","false"],["==","$type","Point"],["==","meta","feature"],["!=","mode","static"]],"paint":{"circle-radius":5,"circle-opacity":1,"circle-color":"#fff"}},{"id":"gl-draw-point-inactive","type":"circle","filter":["all",["==","active","false"],["==","$type","Point"],["==","meta","feature"],["!=","mode","static"]],"paint":{"circle-radius":3,"circle-color":"#3bb2d0"}},{"id":"gl-draw-point-stroke-active","type":"circle","filter":["all",["==","$type","Point"],["==","active","true"],["!=","meta","midpoint"]],"paint":{"circle-radius":7,"circle-color":"#fff"}},{"id":"gl-draw-point-active","type":"circle","filter":["all",["==","$type","Point"],["!=","meta","midpoint"],["==","active","true"]],"paint":{"circle-radius":5,"circle-color":"#fbb03b"}},{"id":"gl-draw-polygon-fill-static","type":"fill","filter":["all",["==","mode","static"],["==","$type","Polygon"]],"paint":{"fill-color":"#404040","fill-outline-color":"#404040","fill-opacity":0.1}},{"id":"gl-draw-polygon-stroke-static","type":"line","filter":["all",["==","mode","static"],["==","$type","Polygon"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-color":"#404040","line-width":2}},{"id":"gl-draw-line-static","type":"line","filter":["all",["==","mode","static"],["==","$type","LineString"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-color":"#404040","line-width":2}},{"id":"gl-draw-point-static","type":"circle","filter":["all",["==","mode","static"],["==","$type","Point"]],"paint":{"circle-radius":5,"circle-color":"#404040"}}]',
				), 1),
			]
		]);

		return "<input type=hidden id=$id name=$name value='$value->features'>" .
			"<input type=hidden id=_{$id}_south name=_{$name}_south value='$value->south'>" .
			"<input type=hidden id=_{$id}_west name=_{$name}_west value='$value->west'>" .
			"<input type=hidden id=_{$id}_north name=_{$name}_north value='$value->north'>" .
			"<input type=hidden id=_{$id}_east name=_{$name}_east value='$value->east'>" .
			"<input type=hidden id=_{$id}_zoom name=_{$name}_zoom value='$value->zoom'>" .
			"<div id=_{$id}_map  class={$this->className}Map style=height:" . ($this->height ? (int) $this->height : self::HEIGHT) . "px;></div>";
	}

	/**
	 * Process the input after a form submission
	 *
	 * @param WireInputData $input
	 * @return $this
	 *
	 */
	public function ___processInput(WireInputData $input) {

		$name = $this->attr('name');
		$item = $this->attr('value');

		if(!isset($input->$name)) return $this;

		$features = $input->$name;
		$item->set('features', empty($features) || $features === '[]' ? '' : $features);

		foreach(['south', 'west', 'north', 'east', 'zoom'] as $key) {
			$item->set($key, (float) $input["_{$name}_{$key}"]);
		}

		return $this;
	}

	/**
	 * Module configuration
	 *
	 */
	public function getConfigInputfields() {

		$inputfields = parent::___getConfigInputfields();

		$fieldset = $this->wire()->modules->get('InputfieldFieldset');
		$fieldset->name = "_{$this->className}";
		$fieldset->label = $this->_('Map Configuration');
		$fieldset->icon = 'map';

		$fieldset->add([
			'type' => 'text',
			'name' => 'defaultLng',
			'label' => $this->_('Default Longitude'),
			'value' => $this->defaultLng,
			'columnWidth' => 50,
			'icon' => 'globe',
		]);

		$fieldset->add([
			'type' => 'text',
			'name' => 'defaultLat',
			'label' => $this->_('Default Latitude'),
			'value' => $this->defaultLat,
			'columnWidth' => 50,
			'icon' => 'globe',
		]);

		$fieldset->add([
			'type' => 'integer',
			'name' => 'minZoom',
			'label' => $this->_('Minimum Zoom'),
			'value' => $this->minZoom,
			'attr' => [
				'type' => 'number',
				'min' => 0,
				'max' => 23,
			],
			'columnWidth' => 25,
			'icon' => 'search-minus',
		]);

		$fieldset->add([
			'type' => 'integer',
			'name' => 'maxZoom',
			'label' => $this->_('Maximum Zoom'),
			'value' => $this->maxZoom,
			'attr' => [
				'type' => 'number',
				'min' => 1,
				'max' => 24,
			],
			'columnWidth' => 25,
			'icon' => 'search-plus',
		]);

		$fieldset->add([
			'type' => 'integer',
			'name' => 'defaultZoom',
			'label' => $this->_('Default Zoom'),
			'value' => $this->defaultZoom,
			'attr' => [
				'type' => 'number',
				'min' => 0,
				'max' => 24,
			],
			'columnWidth' => 25,
			'icon' => 'search',
		]);

		$fieldset->add([
			'type' => 'integer',
			'name' => 'height',
			'label' => $this->_('Map Height (in pixels)'),
			'value' => $this->height,
			'attr' => [
				'type' => 'number',
				'min' => 256,
				'max' => 1024,
			],
			'columnWidth' => 25,
			'icon' => 'arrows-v',
		]);

		$fieldset->add([
			'type' => 'checkboxes',
			'name' => 'controls',
			'label' => $this->_('Draw Controls'),
			'options' => array_combine(self::CONTROLS, array_map(function($name) {
				return ucwords(str_replace('_', ' ', $name));
			}, self::CONTROLS)),
			'value' => $this->controls,
			'icon' => 'pencil',
			'optionColumns' => 1,
			'columnWidth' => 75,
		]);

		$fieldset->add([
			'type' => 'text',
			'name' => 'colour',
			'label' => $this->_('Default Colour'),
			'value' => $this->colour,
			'icon' => 'paint-brush',
			'columnWidth' => 25,
			'attr' => [
				'type' => 'color',
			],
		]);

		$inputfields->add($fieldset);

		return $inputfields;
	}
}