Adds leaflet-active-area plugin to better handle padding and zoom. #693.
This commit is contained in:
parent
e7dc428c23
commit
fcd187a652
|
@ -4325,6 +4325,11 @@
|
|||
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.3.tgz",
|
||||
"integrity": "sha512-iB2cR9vAkDOu5l3HAay2obcUHZ7xwUBBjph8+PGtmW/2lYhbLizWtG7nTeYht36WfOslixQF9D/uSIzhZgGMfQ=="
|
||||
},
|
||||
"leaflet-active-area": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/leaflet-active-area/-/leaflet-active-area-1.2.1.tgz",
|
||||
"integrity": "sha512-lZdkGt7VzaYCrarYaWnJ4BI2CrzrfivX35GLUc9l4w8y9ru88LLqcQzWZMw7bPzSzHO7do301z77mSfIvhWjFg=="
|
||||
},
|
||||
"levn": {
|
||||
"version": "0.4.1",
|
||||
"resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
|
||||
|
|
|
@ -18,6 +18,7 @@
|
|||
"css-vars-ponyfill": "^2.4.8",
|
||||
"floating-vue": "^1.0.0-beta.18",
|
||||
"leaflet": "^1.9.3",
|
||||
"leaflet-active-area": "^1.2.1",
|
||||
"masonry-layout": "^4.2.2",
|
||||
"moment": "^2.29.4",
|
||||
"node-sass": "^7.0.3",
|
||||
|
|
|
@ -1519,6 +1519,7 @@
|
|||
:zoom="5"
|
||||
:center="[-14.4086569, -51.31668]"
|
||||
:zoom-animation="true"
|
||||
@ready="onMapReady()"
|
||||
@click="clearSelectedMarkers()"
|
||||
:options="{
|
||||
name: 'tainacan-admin-view-mode-map',
|
||||
|
@ -1810,6 +1811,7 @@ import { Icon, latLng } from 'leaflet';
|
|||
import iconUrl from 'leaflet/dist/images/marker-icon.png';
|
||||
import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';
|
||||
import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
|
||||
import * as LeafletActiveArea from 'leaflet-active-area';
|
||||
|
||||
delete Icon.Default.prototype._getIconUrl;
|
||||
Icon.Default.mergeOptions({
|
||||
|
@ -1979,7 +1981,7 @@ export default {
|
|||
) {
|
||||
for ( let i = 0; i < aMetadatum['metadata_type_options']['children_objects'].length; i++ )
|
||||
if ( aMetadatum['metadata_type_options']['children_objects'][i]['metadata_type'] == 'Tainacan\\Metadata_Types\\GeoCoordinate' ) {
|
||||
let childMetadatum = aMetadatum['metadata_type_options']['children_objects'][i];
|
||||
let childMetadatum = JSON.parse(JSON.stringify(aMetadatum['metadata_type_options']['children_objects'][i]));
|
||||
childMetadatum.name = childMetadatum.name + ' (' + aMetadatum.name + ')';
|
||||
geocoordinateMetadata.push(childMetadatum);
|
||||
}
|
||||
|
@ -2407,6 +2409,10 @@ export default {
|
|||
let maxCharacter = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) <= 480 ? 100 : 210;
|
||||
return description.length > maxCharacter ? description.substring(0, maxCharacter - 3) + '...' : description;
|
||||
},
|
||||
onMapReady() {
|
||||
if ( LeafletActiveArea && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].mapObject )
|
||||
this.$refs['tainacan-admin-view-mode-map'].mapObject.setActiveArea('leaflet-active-area');
|
||||
},
|
||||
clearSelectedMarkers() {
|
||||
this.mapSelectedItemId = false;
|
||||
this.selectedMarkerIndexes = [];
|
||||
|
|
|
@ -4,11 +4,29 @@
|
|||
display: flex;
|
||||
height: 60vh;
|
||||
|
||||
|
||||
&.has-selected-item {
|
||||
#tainacan-admin-view-mode-map,
|
||||
#tainacan-view-mode-map {
|
||||
/deep/ .leaflet-active-area {
|
||||
left: 310px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#tainacan-admin-view-mode-map,
|
||||
#tainacan-view-mode-map {
|
||||
border: none;
|
||||
border-left: 1px solid var(--tainacan-input-border-color);
|
||||
|
||||
/deep/ .leaflet-active-area {
|
||||
position: absolute;
|
||||
top: 56px;
|
||||
left: 10px;
|
||||
right: 42px;
|
||||
height: calc(60vh - 76px)
|
||||
}
|
||||
|
||||
/deep/ .leaflet-marker-pane {
|
||||
filter: hue-rotate(-22deg);
|
||||
}
|
||||
|
@ -58,7 +76,7 @@
|
|||
|
||||
.tainacan-records-container--map {
|
||||
height: auto;
|
||||
max-height: calc(60vh - 72px);
|
||||
max-height: calc(60vh - 54px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
width: 286px;
|
||||
|
|
|
@ -6,7 +6,9 @@
|
|||
<slot />
|
||||
|
||||
<!-- MAP VIEW MODE -->
|
||||
<div class="tainacan-leaflet-map-container">
|
||||
<div
|
||||
class="tainacan-leaflet-map-container"
|
||||
:class="{ 'has-selected-item': mapSelectedItemId }">
|
||||
<ul class="tainacan-map-cards-container">
|
||||
<li
|
||||
role="listitem"
|
||||
|
@ -83,6 +85,7 @@
|
|||
:center="[-14.4086569, -51.31668]"
|
||||
:zoom-animation="true"
|
||||
@click="clearSelectedMarkers()"
|
||||
@ready="onMapReady()"
|
||||
:options="{
|
||||
name: 'tainacan-view-mode-map',
|
||||
zoomControl: false
|
||||
|
@ -307,6 +310,7 @@ import { Icon, latLng } from 'leaflet';
|
|||
import iconUrl from 'leaflet/dist/images/marker-icon.png';
|
||||
import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';
|
||||
import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
|
||||
import * as LeafletActiveArea from 'leaflet-active-area';
|
||||
|
||||
delete Icon.Default.prototype._getIconUrl;
|
||||
Icon.Default.mergeOptions({
|
||||
|
@ -420,7 +424,7 @@ export default {
|
|||
) {
|
||||
for ( let i = 0; i < aMetadatum['metadata_type_options']['children_objects'].length; i++ )
|
||||
if ( aMetadatum['metadata_type_options']['children_objects'][i]['metadata_type'] == 'Tainacan\\Metadata_Types\\GeoCoordinate' ) {
|
||||
let childMetadatum = aMetadatum['metadata_type_options']['children_objects'][i];
|
||||
let childMetadatum = JSON.parse(JSON.stringify(aMetadatum['metadata_type_options']['children_objects'][i]));
|
||||
childMetadatum.name = childMetadatum.name + ' (' + aMetadatum.name + ')';
|
||||
geocoordinateMetadata.push(childMetadatum);
|
||||
}
|
||||
|
@ -434,9 +438,9 @@ export default {
|
|||
setTimeout(() => {
|
||||
if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject ) {
|
||||
if (this.itemsLocations.length == 1)
|
||||
this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16, paddingTopLeft: [48, 48], paddingTopRight: [48, 48] });
|
||||
this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16 });
|
||||
else
|
||||
this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16, paddingTopLeft: [48, 48], paddingTopRight: [48, 48] });
|
||||
this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16 });
|
||||
}
|
||||
}, 500)
|
||||
},
|
||||
|
@ -452,6 +456,10 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
onMapReady() {
|
||||
if ( LeafletActiveArea && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject )
|
||||
this.$refs['tainacan-view-mode-map'].mapObject.setActiveArea('leaflet-active-area');
|
||||
},
|
||||
getItemImageHeight(imageWidth, imageHeight) {
|
||||
let itemWidth = 120;
|
||||
return (imageHeight*itemWidth)/imageWidth;
|
||||
|
@ -467,9 +475,9 @@ export default {
|
|||
this.selectedMarkerIndexes = [];
|
||||
if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject ) {
|
||||
if (this.itemsLocations.length == 1)
|
||||
this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16, paddingTopLeft: [48, 48], paddingTopRight: [48, 48] });
|
||||
this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16 });
|
||||
else
|
||||
this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16, paddingTopLeft: [48, 48], paddingTopRight: [48, 48] });
|
||||
this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16 });
|
||||
}
|
||||
},
|
||||
showItemByLocation(index) {
|
||||
|
@ -477,7 +485,7 @@ export default {
|
|||
this.selectedMarkerIndexes = [];
|
||||
this.selectedMarkerIndexes.push(index);
|
||||
if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject )
|
||||
this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds( [ this.itemsLocations[index].location ], { animate: true, maxZoom: 16, paddingTopLeft: [48, 286], paddingTopRight: [48, 48] });
|
||||
this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds( [ this.itemsLocations[index].location ], { animate: true, maxZoom: 16 });
|
||||
},
|
||||
showLocationsByItem(item) {
|
||||
this.mapSelectedItemId = item.id;
|
||||
|
@ -492,9 +500,9 @@ export default {
|
|||
if ( selectedLocationsByItem.length) {
|
||||
if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject ) {
|
||||
if (selectedLocationsByItem.length > 1)
|
||||
this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16, paddingTopLeft: [48, 286], paddingTopRight: [48, 48] });
|
||||
this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16 });
|
||||
else
|
||||
this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16, paddingTopLeft: [48, 286], paddingTopRight: [48, 48] });
|
||||
this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16 });
|
||||
}
|
||||
} else {
|
||||
this.$buefy.snackbar.open({
|
||||
|
|
Loading…
Reference in New Issue