Skip to content
Snippets Groups Projects
Commit 08c70689 authored by Bhabesh Bhabani Mukhopadhyay's avatar Bhabesh Bhabani Mukhopadhyay
Browse files

Fixing Map's interactions

parent fa7ac6d6
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/MapObservation.vue
+ 44
− 69
View file @ 08c70689
<template>
<div>
<div id='map-observation'>
<div v-if="isMyMapPanelVisible"><router-link :to="{name: 'Observation'}" class="btn btn-success ">Back</router-link></div>
<div v-if="isMyMapPanelVisible"><router-link id='btnBack' :to="{name: 'Observation'}" class="btn btn-success ">Back</router-link></div>
</div>
<div id="ObservationMapPanel" v-if="isMyMapPanelVisible">
<div id="ObservationMapPanel" v-if="isMyMapPanelVisible" ref='ObservationMapPanel'>
<div>
<input value="" placeholder="name" style="position:absolute">
</div>
<input value="" placeholder="name">
<div >
<br>
<select>
<option>Select</option>
<option>Select test 1</option>
</select>
<br>
<select>
<option>Select</option>
<option>Select test 2</option>
</select>
</div>
</div>
......@@ -64,7 +63,8 @@ export default {
myGeoInfo:'',
latitude:0,
longitude:0,
mapZoom:0
mapZoom:0,
mapInteractions:'',
}
},
methods : {
......@@ -87,7 +87,9 @@ export default {
let vectorSource = this.myVectorGeoSource();
//vectorSource.addFeature(new Feature(new Circle([5e6, 7e6], 1e6)));
let vectorGeoLayer = this.myVectorGeoLayer(vectorSource);
let mapInteractions = this.myInteractions(this.mapInteractions);
fetch(urlMap)
.then(function (response){
return response.text();
......@@ -115,6 +117,9 @@ export default {
],
controls: [],
interactions : mapInteractions,
//interactions:'',
target: 'map-observation',
view : new View ({
center:fromLonLat([latitude, longitude]),
......@@ -240,6 +245,11 @@ export default {
{
return styles[feature.getGeometry().getType()];
},
myInteractions(mapInteractions)
{
return (mapInteractions) ? [] : '';
}
},
......@@ -253,58 +263,35 @@ export default {
var mapDiv = document.getElementById("map-observation");
var navDiv = document.getElementById("vipsobsappmenu");
var appDiv = document.getElementById("app");
var panelObDiv = document.getElementById("ObservationMapPanel");
var divPrivacy = document.getElementById("divPrivacy");
if(this.isMapPanelVisible)
{
var panelObDiv = document.getElementById("ObservationMapPanel");
}
appDiv.style.marginTop="0";
appDiv.style.paddingRight="0";
appDiv.style.paddingLeft="0";
if(routeParam.isMapPanelVisible)
{
this.isMyMapPanelVisible = routeParam.isMapPanelVisible;
}
if(this.isMapPanelVisible)
{
this.isMyMapPanelVisible = this.isMapPanelVisible;
}
if(this.isMyMapPanelVisible)
{
mapDiv.style.height = (screen.height - navDiv.offsetHeight - panelObDiv.offsetHeight) + "px";
mapDiv.style.height = (screen.height - navDiv.offsetHeight) + "px";
this.mapInteractions='';
}
else
{
console.log('divPrivacy.offsetHeight : '+divPrivacy.offsetHeight);
let linkMap = document.getElementById("linkMap");
//console.log(this.$refs);
//console.log(this.$parent.$refs);
let heightTitleObservation = (this.$parent.$refs.titleObservation) ? this.$parent.$refs.titleObservation.clientHeight : 0;
let heightCameraLauncher = (this.$parent.$refs.cameraLauncher) ? this.$parent.$refs.cameraLauncher.clientHeight : 0;
let heightDivCropId = (this.$parent.$refs.divCropId) ? this.$parent.$refs.divCropId.clientHeight : 0;
let heightDivPestId = (this.$parent.$refs.divPestId) ? this.$parent.$refs.divPestId.clientHeight : 0;
let heightDivDateTime = (this.$parent.$refs.divDateTime) ? this.$parent.$refs.divDateTime.clientHeight : 0;
let heightLinkMap = (linkMap)?linkMap.offsetHeight:0;
let heightDivObservationText = (this.$parent.$refs.divObservationText) ? this.$parent.$refs.divObservationText.clientHeight : 0;
let heightDivPrivacy = this.$refs.divPrivacy.clientHeight;
console.log(this.$parent.$refs.linkMap);
mapDiv.style.height = (
screen.height - (
navDiv.offsetHeight
//+ divPrivacy.offsetHeight
+ heightTitleObservation
+ heightCameraLauncher
+ heightDivCropId
+ heightDivPestId
+ heightDivDateTime
+ heightLinkMap
+ heightDivPrivacy
+ heightDivObservationText
)
) + "px";
mapDiv.style.height = 300 +"px";
this.mapInteractions='interactions:[]';
}
if(routeParam.geoinfo)
......@@ -320,9 +307,6 @@ export default {
{
this.latitude = this.myGeoInfo.features[0].geometry.coordinates[0];
this.longitude = this.myGeoInfo.features[0].geometry.coordinates[1];
//console.log ('geometry : '+JSON.stringify(this.myGeoInfo.features[0].geometry.coordinates[0]));
this.mapZoom = CommonUtil.CONST_GPS_OBSERVATION_ZOOM;
}
else
......@@ -331,21 +315,6 @@ export default {
}
if(routeParam.isMapPanelVisible)
{
this.isMyMapPanelVisible = routeParam.isMapPanelVisible;
}
if(this.isMapPanelVisible)
{
this.isMyMapPanelVisible = this.isMapPanelVisible;
}
this.$nextTick(function () {
this.initMap();
});
......@@ -372,4 +341,10 @@ export default {
bottom: 0;
left: 0;
}
#btnBack{
position: fixed;
z-index: 2000;
}
</style>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment