diff --git a/src/assetbundles/entrycoordinatesfield/dist/js/EntryCoordinates.js b/src/assetbundles/entrycoordinatesfield/dist/js/EntryCoordinates.js index 3f9602a..9a4fec6 100644 --- a/src/assetbundles/entrycoordinatesfield/dist/js/EntryCoordinates.js +++ b/src/assetbundles/entrycoordinatesfield/dist/js/EntryCoordinates.js @@ -57,7 +57,9 @@ class CoordinatesField { options = { originalLocation: null, - suffix: null + suffix: null, + zoomLevel: null, + defaultZoomLevel: null, } map = null; @@ -65,28 +67,22 @@ class CoordinatesField { searchInput = null; coordsInput = null; + zoomInput = null; mapElement = null; constructor (name, options) { this.options = options; + if (this.options.zoomLevel === '' || this.options.zoomLevel === null) { + this.options.zoomLevel = options.defaultZoomLevel; + } + this.searchInput = document.querySelector('.location-search-' + this.options.suffix); this.coordsInput = document.querySelector('.location-coords-' + this.options.suffix); this.addressInput = document.querySelector('.location-address-' + this.options.suffix); - this.mapElement = document.querySelector('.fields-map-' + this.options.suffix); - this.deleteButton = document.querySelector('.location-delete-' + this.options.suffix); - - // let marker = this.marker; - let deleteMarker = this.deleteMarker; - - let marker = this.marker; - let coordsInput = this.coordsInput; - let addressInput = this.addressInput; - let searchInput = this.searchInput; + this.zoomInput = document.querySelector('.location-zoom-' + this.options.suffix); - this.deleteButton.addEventListener('click', function () { - deleteMarker(this.marker, coordsInput, addressInput, searchInput); - }); + this.mapElement = document.querySelector('.fields-map-' + this.options.suffix); } // Deletes all markers in the array by removing references to them. @@ -101,6 +97,7 @@ class CoordinatesField { draggable: true, }); this.marker = marker; + } let coordsInput = this.coordsInput; @@ -132,15 +129,20 @@ class CoordinatesField { }); } - deleteMarker(marker, coordsInput, addressInput, searchInput) { - if (marker) { - marker.setMap(null); - marker = null; + deleteMarker = () => { + if (this.marker) { + this.marker.setMap(null); + this.marker = null; } - coordsInput.value = ''; - searchInput.value = ''; - addressInput.value = ''; + this.coordsInput.value = ''; + this.searchInput.value = ''; + this.addressInput.value = ''; + this.zoomInput.value = ''; + } + + setZoomLevel = (zoomLevel) => { + this.zoomInput.value = zoomLevel.toString(); } transformLatLngToString(latLng) { @@ -159,15 +161,23 @@ class CoordinatesField { return this.transformLocationToLatLng(location); } + if (this.options.defaultCenterCoordinates !== null && this.options.defaultCenterCoordinates !== '') { + return this.transformLocationToLatLng(this.options.defaultCenterCoordinates); + + } return this.transformLocationToLatLng("52.3793773,4.8981"); } initThisMap() { let placeMarker = this.placeMarker; + let deleteMarker = this.deleteMarker; + let setZoomLevel = this.setZoomLevel; + + let zoomLevel = this.options.zoomLevel; // Create map instance const map = new google.maps.Map(this.mapElement, { - zoom: 13, + zoom: parseInt(zoomLevel), center: this.getCenter(this.options.originalLocation) }); @@ -195,6 +205,10 @@ class CoordinatesField { placeMarker(event.latLng); }); + map.addListener('zoom_changed', function() { + setZoomLevel(map.getZoom()); + }); + // // Set marker for original location if (this.options.originalLocation) { placeMarker(this.transformLocationToLatLng(this.options.originalLocation)); @@ -211,6 +225,13 @@ class CoordinatesField { } }); } + + this.deleteButton = document.querySelector('.location-delete-' + this.options.suffix); + + this.deleteButton.addEventListener('click', function () { + deleteMarker(); + }); + } } diff --git a/src/fields/EntryCoordinates.php b/src/fields/EntryCoordinates.php index f9ce507..2e9ac74 100644 --- a/src/fields/EntryCoordinates.php +++ b/src/fields/EntryCoordinates.php @@ -47,6 +47,9 @@ class EntryCoordinates extends Field */ public $googleApiKey = null; + public $defaultCenterCoordinates = null; + public $defaultZoomLevel = null; + // Static Methods // ========================================================================= @@ -81,6 +84,16 @@ public function rules(): array ['googleApiKey', 'string'], ['googleApiKey', 'default', 'value' => ''], ]); + + $rules = array_merge($rules, [ + ['defaultCenterCoordinates', 'string'], + ['defaultCenterCoordinates', 'default', 'value' => "52.3793773,4.8981"], + ]); + + $rules = array_merge($rules, [ + ['defaultZoomLevel', 'number', 'min' => 1, 'max' => 20], + ['defaultZoomLevel', 'default', 'value' => 13], + ]); return $rules; } @@ -128,13 +141,23 @@ public function normalizeValue(mixed $value, ?\craft\base\ElementInterface $elem } if ($value === null) { - $value = []; + return null; + } + + $coordinates = array_key_exists('coordinates', $value) ? $value['coordinates'] : null; + $searchQuery = array_key_exists('searchQuery', $value) ? $value['searchQuery'] : null; + $address = array_key_exists('address', $value) ? $value['address'] : null; + $zoomLevel = array_key_exists('zoomLevel', $value) ? $value['zoomLevel'] : null; + + if ($coordinates === null || $coordinates === '') { + return null; } return new EntryCoordinatesModel([ - 'coordinates' => array_key_exists('coordinates', $value) ? $value['coordinates'] : null, - 'searchQuery' => array_key_exists('searchQuery', $value) ? $value['searchQuery'] : null, - 'address' => array_key_exists('address', $value) ? $value['address'] : null, + 'coordinates' => $coordinates, + 'searchQuery' => $searchQuery, + 'address' => $address, + 'zoomLevel' => $zoomLevel, ]); } @@ -377,6 +400,8 @@ public function getInputHtml(mixed $value, ?\craft\base\ElementInterface $elemen 'namespacedId' => $namespacedId, 'googleApiKey' => Craft::parseEnv($this->googleApiKey), + 'defaultCenterCoordinates' => $this->defaultCenterCoordinates, + 'defaultZoomLevel' => $this->defaultZoomLevel, ] ); } diff --git a/src/models/EntryCoordinatesModel.php b/src/models/EntryCoordinatesModel.php index 0275491..9bde2a5 100644 --- a/src/models/EntryCoordinatesModel.php +++ b/src/models/EntryCoordinatesModel.php @@ -13,6 +13,8 @@ class EntryCoordinatesModel extends BaseModel public ?string $address = null; public ?string $latitude = null; public ?string $longitude = null; + public ?string $zoomLevel = null; + public function __construct($attributes = [], array $config = []) { diff --git a/src/templates/_components/fields/EntryCoordinates_input.twig b/src/templates/_components/fields/EntryCoordinates_input.twig index 4bb07ec..e602258 100644 --- a/src/templates/_components/fields/EntryCoordinates_input.twig +++ b/src/templates/_components/fields/EntryCoordinates_input.twig @@ -16,6 +16,15 @@ {% import "_includes/forms" as forms %} {% set suffix = random() %} +{% if value is empty %} + {% set value = { + searchQuery: "", + coordinates: "", + address: "", + zoomLevel: "", + } %} +{% endif %} +
{{ forms.text({ @@ -58,11 +67,20 @@ name: name ~ '[address]', value: value.address }) }} - -
+ {{ tag('input', { + type: 'hidden', + id: name, + class: 'location-zoom-' ~ suffix, + name: name ~ '[zoomLevel]', + value: value.zoomLevel + + }) }} + + + {% js %} EntryCoordinates.setApiKey('{{ googleApiKey }}'); - EntryCoordinates.addField('{{ name }}', { suffix: '{{ suffix }}', originalLocation: '{{ value.coordinates }}', apiKey: '{{ googleApiKey }}'}); + EntryCoordinates.addField('{{ name }}', { suffix: '{{ suffix }}', originalLocation: '{{ value.coordinates }}', zoomLevel: '{{ value.zoomLevel }}', defaultCenterCoordinates: '{{ defaultCenterCoordinates }}', defaultZoomLevel: '{{ defaultZoomLevel ?? 1 }}', apiKey: '{{ googleApiKey }}'}); {% endjs %} \ No newline at end of file diff --git a/src/templates/_components/fields/EntryCoordinates_settings.twig b/src/templates/_components/fields/EntryCoordinates_settings.twig index 6533921..3a83760 100644 --- a/src/templates/_components/fields/EntryCoordinates_settings.twig +++ b/src/templates/_components/fields/EntryCoordinates_settings.twig @@ -25,3 +25,21 @@ value: field['googleApiKey'], suggestEnvVars: true}) }} + +{{ forms.autosuggestField({ + label: 'Default Zoom Level', + instructions: 'Default zoom level for the map. Enter a number between 1 and 20.', + id: 'defaultZoomLevel', + name: 'defaultZoomLevel', + value: field['defaultZoomLevel'], + suggestEnvVars: true}) +}} + +{{ forms.autosuggestField({ + label: 'Default Center Coordinates', + instructions: 'Default center coordinates for the map. Default is Amsterdam.', + id: 'defaultCenterCoordinates', + name: 'defaultCenterCoordinates', + value: field['defaultCenterCoordinates'], + suggestEnvVars: true}) +}}