Fix map sometimes too high
This commit is contained in:
parent
5d84c6a0e6
commit
59f7f153ea
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<v-layout row fill-height wrap>
|
||||
<v-flex xs12 id="map"></v-flex>
|
||||
<v-flex xs12 id="map" :style="{ height: mapElementHeight }"></v-flex>
|
||||
|
||||
<v-btn
|
||||
absolute
|
||||
|
|
@ -58,6 +58,18 @@ export default {
|
|||
isInAutorotateMap() {
|
||||
return this.isRecenterButtonShown ? false : this.hasUserAutorotateMap;
|
||||
},
|
||||
mapElementHeight() {
|
||||
// Recompute automatically the map element max height
|
||||
// Use logic from VToolbar to compute the toolbar height
|
||||
// FIXME: Ugly hack, easier way I found.
|
||||
let toolbarHeight = 56;
|
||||
if (this.$vuetify.breakpoint.mdAndUp) {
|
||||
toolbarHeight = 64;
|
||||
} else if (this.$vuetify.breakpoint.width > this.$vuetify.breakpoint.height) {
|
||||
toolbarHeight = 48;
|
||||
}
|
||||
return `${this.$vuetify.breakpoint.height - toolbarHeight}px`;
|
||||
},
|
||||
olCenter() {
|
||||
// Compute center in OL coordinates system
|
||||
return fromLonLat([this.center[1], this.center[0]]);
|
||||
|
|
@ -125,69 +137,6 @@ export default {
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
setPositionFeatureStyle() {
|
||||
if (!this.map || !this.positionFeature) {
|
||||
return;
|
||||
}
|
||||
|
||||
const positionFeatureStyle = this.positionFeature.getStyle();
|
||||
|
||||
// If heading is specified
|
||||
if (this.headingInRadiansFromNorth !== null) {
|
||||
const rotation = (this.isInAutorotateMap
|
||||
? -Math.PI / 2
|
||||
: (
|
||||
this.headingInRadiansFromNorth
|
||||
+ this.map.getView().getRotation()
|
||||
- Math.PI / 2
|
||||
)
|
||||
);
|
||||
// Check current style and update rotation if an arrow is already drawn
|
||||
if (positionFeatureStyle) {
|
||||
const TextStyle = positionFeatureStyle.getText();
|
||||
if (TextStyle) {
|
||||
TextStyle.setRotation(rotation);
|
||||
return;
|
||||
}
|
||||
}
|
||||
// Replace style by an arrow otherwise
|
||||
this.positionFeature.setStyle(new Style({
|
||||
text: new Text({
|
||||
textBaseline: 'middle',
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
rotation,
|
||||
font: '30px sans-serif',
|
||||
text: '►',
|
||||
fill: new Fill({
|
||||
color: '#3399CC',
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#fff',
|
||||
width: 2,
|
||||
}),
|
||||
}),
|
||||
}));
|
||||
return;
|
||||
}
|
||||
|
||||
// No heading specified, force circle if a circle is not already
|
||||
// displayed
|
||||
if (!positionFeatureStyle || !positionFeatureStyle.getImage()) {
|
||||
this.positionFeature.setStyle(new Style({
|
||||
image: new CircleStyle({
|
||||
radius: constants.POSITION_MARKER_RADIUS,
|
||||
fill: new Fill({
|
||||
color: '#3399CC',
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#fff',
|
||||
width: 2,
|
||||
}),
|
||||
}),
|
||||
}));
|
||||
}
|
||||
},
|
||||
deleteReportMarker(markerID) {
|
||||
const feature = this.reportsMarkersFeatures[markerID];
|
||||
if (feature) {
|
||||
|
|
@ -277,6 +226,69 @@ export default {
|
|||
}
|
||||
view.setZoom(this.zoom);
|
||||
},
|
||||
setPositionFeatureStyle() {
|
||||
if (!this.map || !this.positionFeature) {
|
||||
return;
|
||||
}
|
||||
|
||||
const positionFeatureStyle = this.positionFeature.getStyle();
|
||||
|
||||
// If heading is specified
|
||||
if (this.headingInRadiansFromNorth !== null) {
|
||||
const rotation = (this.isInAutorotateMap
|
||||
? -Math.PI / 2
|
||||
: (
|
||||
this.headingInRadiansFromNorth
|
||||
+ this.map.getView().getRotation()
|
||||
- Math.PI / 2
|
||||
)
|
||||
);
|
||||
// Check current style and update rotation if an arrow is already drawn
|
||||
if (positionFeatureStyle) {
|
||||
const TextStyle = positionFeatureStyle.getText();
|
||||
if (TextStyle) {
|
||||
TextStyle.setRotation(rotation);
|
||||
return;
|
||||
}
|
||||
}
|
||||
// Replace style by an arrow otherwise
|
||||
this.positionFeature.setStyle(new Style({
|
||||
text: new Text({
|
||||
textBaseline: 'middle',
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
rotation,
|
||||
font: '30px sans-serif',
|
||||
text: '►',
|
||||
fill: new Fill({
|
||||
color: '#3399CC',
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#fff',
|
||||
width: 2,
|
||||
}),
|
||||
}),
|
||||
}));
|
||||
return;
|
||||
}
|
||||
|
||||
// No heading specified, force circle if a circle is not already
|
||||
// displayed
|
||||
if (!positionFeatureStyle || !positionFeatureStyle.getImage()) {
|
||||
this.positionFeature.setStyle(new Style({
|
||||
image: new CircleStyle({
|
||||
radius: constants.POSITION_MARKER_RADIUS,
|
||||
fill: new Fill({
|
||||
color: '#3399CC',
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#fff',
|
||||
width: 2,
|
||||
}),
|
||||
}),
|
||||
}));
|
||||
}
|
||||
},
|
||||
showRecenterButton() {
|
||||
if (!this.isRecenterButtonShown) {
|
||||
this.isRecenterButtonShown = true;
|
||||
|
|
@ -437,6 +449,11 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
mapElementHeight() {
|
||||
// Force a redraw of the map after a few milliseconds and the DOM
|
||||
// has updated
|
||||
setTimeout(() => this.map.updateSize(), 200);
|
||||
},
|
||||
markers(newMarkers, oldMarkers) {
|
||||
// Map should have been created
|
||||
if (this.reportsMarkersVectorSource === null) {
|
||||
|
|
@ -576,10 +593,6 @@ export default {
|
|||
</style>
|
||||
|
||||
<style>
|
||||
#map {
|
||||
max-height: calc(100vh - 56px);
|
||||
}
|
||||
|
||||
#map .ol-control button {
|
||||
height: 3em !important;
|
||||
width: 3em !important;
|
||||
|
|
|
|||
Loading…
Reference in New Issue