Reputation: 1
I am using Vue.js for my web application. I created a custom html popup element and tried to add it to the UI (on top of the house icon which you can see in the example), but I cannot make it appear on coordinates which are clicked. I know that I can do it with adding to the view UI and setting position to "manual", but I couldn't find any examples of setting the specific coordinates. Thank you in advance for your help.
this.viewt.ui.add(document.getElementsByClassName("popup")[0], {position: "manual"});
Template code
<template>
<div class="popup" v-if="openPopUp" ref="popupwindow">
<article class="house-card" id="popup-test">
<div class="img-wrapper">
<img class="post-image"
src="https://www.comitatoaurora.com/wp-content/uploads/2019/11/contemporary-exterior.jpg"/>
<div class="middle">
€{{ Math.round(this.object.Price) }}
</div>
</div>
<div class="article-details" :key="this.object.Address" @mouseover="hover = true"
@mouseleave="hover = false">
<div class="post-category">
<div>
{{
this.object.Address.replace(this.object.Address.substring(this.object.Address.indexOf(','),
this.object.Address.indexOf(',') + 9), ', ')
}}<span
style="margin: 0.3vw"></span>
</div>
</div>
<div class="percentage-circle">
<div class="progress-single">
<v-progress-circular
color="rgba(81, 87, 102, 0.99)"
:size="30"
:width="2"
:value="this.object.Risk"
>{{ this.object.Risk }}
</v-progress-circular>
<div class="progress-text">
<p>Risk</p>
<p>Score</p>
</div>
</div>
<div class="progress-single">
<v-progress-circular
color="rgba(81, 87, 102, 0.99)"
:size="30"
:width="2"
:value="this.object.Gross_rental_yield*10"
>{{
Math.round((this.object.Gross_rental_yield +
Number.EPSILON) * 10) / 10
}}
</v-progress-circular>
<div class="progress-text">
<p>Gross</p>
<p>Yield</p>
</div>
</div>
<div class="progress-single">
<v-progress-circular
color="rgba(81, 87, 102, 0.99)"
:size="30"
:width="2"
:value="this.object.Net_yield*100/5"
>{{ Math.round((this.object.Net_yield + Number.EPSILON) * 10) / 10 }}
</v-progress-circular>
<div class="progress-text">
<p>Net</p>
<p>Yield</p>
</div>
</div>
</div>
<div class="percentage-circle metrics-level">
<div class="bottom-metric"><img height="12vh"
src="../../public/img/year.svg"
alt="year"/><b>{{
this.object.ConstructionYear
}} </b></div>
<div class="headerDivider"></div>
<div class="bottom-metric"><img height="12vh"
src="../../public/img/rent.svg"
alt="rent"/><b>{{ this.object.Estimated_Rent }}€/mo</b>
</div>
<div class="headerDivider"></div>
<div class="bottom-metric" style="margin-left: 0.15vw !important;"><img height="12vh"
src="../../public/img/square.svg"
alt="square"/>
<b>{{ this.object.Sqm }}m<sup>2</sup></b></div>
</div>
<transition name="fadeo">
<div v-if="hover" class="overlay">
<router-link :to="{name:'card', params: { id: this.id }}">
<div class="overlay-text"> View Asset</div>
</router-link>
</div>
</transition>
</div>
</article>
</div>
</template>
Upvotes: 0
Views: 899
Reputation: 5270
There are two ways for popup to open over a selected feature,
open
method.If you opted for 1), you have to set the PopupTemplate for the layer or the graphic. You have a couple of ways to define custom content for the PopupTemplate
, like using a funtion or a promise.
ArcGIS API - PopupTemplate content
If you opted for 2), then you need to,
view.popup.autoOpenEnabled = false; // <- disable view popup auto open
view.on("click", function (event) { // <- listen to view click event
if (event.button === 0) { // <- check that was left button or touch
view.popup.open({ // <- open popup
location: event.mapPoint, // <- use map point of the click event
fetchFeatures: true // <- fetch the selected features (if any)
});
}
});
Upvotes: 2