Mariya Galasyuk
Mariya Galasyuk

Reputation: 1

ArcGis Esri Custom Popup

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"});

example

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

Answers (1)

cabesuon
cabesuon

Reputation: 5270

There are two ways for popup to open over a selected feature,

  1. automatically, for example when a feature is selected,
  2. manually, using popup 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,

  1. disable the default behavior if the view (auto open to false),
  2. listen for click events,
  3. on every click event manually open the popup (if a feature was selected), with the map point of the click event as location
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

Related Questions