diff --git a/src/views/admin/components/metadata-types/geocoordinate/FormGeoCoordinate.vue b/src/views/admin/components/metadata-types/geocoordinate/FormGeoCoordinate.vue index 2e26e337a..2da61dc97 100644 --- a/src/views/admin/components/metadata-types/geocoordinate/FormGeoCoordinate.vue +++ b/src/views/admin/components/metadata-types/geocoordinate/FormGeoCoordinate.vue @@ -2,11 +2,11 @@
@@ -46,11 +46,11 @@
@@ -120,11 +122,24 @@ latitude: -14.4086569, longitude: -51.31668, selected: [], - url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', - attribution: '© OpenStreetMap contributors', } }, computed: { + mapProvider() { + return this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.map_provider ? this.itemMetadatum.metadatum.metadata_type_options.map_provider : 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'; + }, + initialZoom() { + return this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.initial_zoom ? this.itemMetadatum.metadatum.metadata_type_options.initial_zoom : 5; + }, + maxZoom() { + return this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.maximum_zoom ? this.itemMetadatum.metadatum.metadata_type_options.maximum_zoom : 12; + }, + attribution() { + return this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.attribution ? this.itemMetadatum.metadatum.metadata_type_options.attribution : '© OpenStreetMap contributors'; + }, + extraTileLayers() { + return this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.extra_tile_layers ? this.itemMetadatum.metadatum.metadata_type_options.extra_tile_layers : []; + }, itemMetadatumIdentifier() { return 'tainacan-item-metadatum_id-' + this.itemMetadatum.metadatum.id + (this.itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + this.itemMetadatum.parent_meta_id) : ''); }, @@ -163,16 +178,19 @@ } }, watch: { - selectedLatLng() { - this.$nextTick(() => { - const mapComponentRef = 'map--' + this.itemMetadatumIdentifier; - if ( this.selectedLatLng.length && this.$refs[mapComponentRef] && this.$refs[mapComponentRef].mapObject ) { - if (this.selectedLatLng.length == 1) - this.$refs[mapComponentRef].mapObject.panInsideBounds(this.selectedLatLng, { animate: true }); - else - this.$refs[mapComponentRef].mapObject.flyToBounds(this.selectedLatLng, { animate: true }); - } - }); + selectedLatLng: { + handler() { + this.$nextTick(() => { + const mapComponentRef = 'map--' + this.itemMetadatumIdentifier; + if ( this.selectedLatLng.length && this.$refs[mapComponentRef] && this.$refs[mapComponentRef].mapObject ) { + if (this.selectedLatLng.length == 1) + this.$refs[mapComponentRef].mapObject.panInsideBounds(this.selectedLatLng, { animate: true, maxZoom: this.maxZoom }); + else + this.$refs[mapComponentRef].mapObject.flyToBounds(this.selectedLatLng, { animate: true, maxZoom: this.maxZoom }); + } + }); + }, + immediate: true } }, created() { @@ -288,10 +306,9 @@ const existingSelectedIndex = this.selected.indexOf(this.latitude + ',' + this.longitude); this.editingMarkerIndex = existingSelectedIndex; - const mapComponentRef = 'map--' + this.itemMetadatumIdentifier; if ( this.$refs[mapComponentRef] && this.$refs[mapComponentRef].mapObject ) - this.$refs[mapComponentRef].mapObject.panInsideBounds([ this.selectedLatLng[existingSelectedIndex] ], { animate: true }); + this.$refs[mapComponentRef].mapObject.panInsideBounds([ this.selectedLatLng[existingSelectedIndex] ], { animate: true, maxZoom: this.maxZoom }); } }, onMarkerRemove(index) { diff --git a/src/views/admin/components/metadata-types/geocoordinate/class-tainacan-geocoordinate.php b/src/views/admin/components/metadata-types/geocoordinate/class-tainacan-geocoordinate.php index 42c9a180e..2e3c98562 100644 --- a/src/views/admin/components/metadata-types/geocoordinate/class-tainacan-geocoordinate.php +++ b/src/views/admin/components/metadata-types/geocoordinate/class-tainacan-geocoordinate.php @@ -23,8 +23,8 @@ class GeoCoordinate extends Metadata_Type { $this->set_description( __('Represents a geographical location that is determined by latitude and longitude coordinates.', 'tainacan') ); $this->set_default_options([ 'map_provider' => 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', - 'extra_tile_layer' => [], - 'atrribution' => '© OpenStreetMap contributors', + 'extra_tile_layers' => [], + 'attribution' => '© OpenStreetMap contributors', 'initial_zoom' => 5, 'maximum_zoom' => 12, ]); @@ -42,11 +42,11 @@ class GeoCoordinate extends Metadata_Type { */ public function get_form_labels(){ return [ - 'map_tile_provider' => [ + 'map_provider' => [ 'title' => __( 'Tile provides', 'tainacan' ), 'description' => __( 'Link to the service used as source for displaying tile layers on the map', 'tainacan' ), ], - 'extra_map_tile_layer' => [ + 'extra_tile_layers' => [ 'title' => __( 'Extra tile layer', 'tainacan' ), 'description' => __( 'The extra layer of blocks to be displayed on the map', 'tainacan' ), ], @@ -141,7 +141,20 @@ class GeoCoordinate extends Metadata_Type { wp_enqueue_style( 'tainacan-geocoordinate-item-metadatum', $TAINACAN_BASE_URL . '/assets/css/tainacan-gutenberg-block-geocoordinate-item-metadatum.css', array(), TAINACAN_VERSION); - return ' + $options = $this->get_options(); + $options_as_strings = ''; + foreach ( $options as $option_key => $option ) { + if ( is_array($option) ) + $options_as_strings .= 'data-' . $option_key . '="' . json_encode($option) . '" '; + else if ( $option_key == 'attribution' ) + $options_as_strings .= 'data-' . $option_key . '="' . htmlentities($option) . '" '; + else if ( $option_key == 'map_provider' ) + $options_as_strings .= 'data-' . $option_key . '="' . esc_url($option) . '" '; + else + $options_as_strings .= 'data-' . $option_key . '="' . $option . '" '; + }; + + return ' ' . $return . ' '; } diff --git a/src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/theme.js b/src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/theme.js index 01c8ce4b0..314f625bf 100644 --- a/src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/theme.js +++ b/src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/theme.js @@ -39,8 +39,15 @@ export default (element) => { var tainacanMap = TainacanLeaflet.map(element.id).setView([-14.4086569, -51.31668], 5); - TainacanLeaflet.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { - attribution: '© OpenStreetMap' + const map_provider = element.hasAttribute('data-map_provider') ? element.getAttribute('data-map_provider') : 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'; + const attribution = element.hasAttribute('data-attribution') ? element.getAttribute('data-attribution') : '© OpenStreetMap contributors'; + const initial_zoom = element.hasAttribute('data-initial_zoom') ? element.getAttribute('data-initial_zoom') : 5; + const maximum_zoom = element.hasAttribute('data-maximum_zoom') ? element.getAttribute('data-maximum_zoom') : 12; + + TainacanLeaflet.tileLayer(map_provider, { + attribution: attribution, + zoom: initial_zoom, + maxZoom: maximum_zoom }) .addTo(tainacanMap);