Regarding the issue of converting latitude and longitude to plane pixels

[Xiaohantx]

Hello, Author,

I noticed that the custom control feature has been supported, but it doesn’t quite meet my expectations. In Vue, I want to be able to flexibly customize the div elements within the slots. After providing latitude and longitude information to these elements, I want to be able to drag them with the mouse so they move according to the latitude and longitude. However, I encountered issues with converting latitude and longitude to plane pixels. I’ve seen conversions in other issues, but it seems the latitude and longitude conversion doesn’t correspond to the top and left properties on the plane. Thank you.

const coords = this.viewer.mouseEventToCoords(event);
const x = (coords[1] / 360 + 0.5) * imageWidthInPixels;
const y = (0.5 - coords[0] / 180) * imageHeightInPixels;

[mpetroff]

That looks correct for going to image pixel coordinates for a full equirectangular image, although I'm not entirely sure what you're trying to do with these data.

Where is the mouse event coming from?

[Xiaohantx]

That looks correct for going to image pixel coordinates for a full equirectangular image, although I'm not entirely sure what you're trying to do with these data.

Where is the mouse event coming from?

<div class="vue-pannellum" @mousedown="onMouseDown" @mouseup="onMouseUp" @mousemove="onTouchMove"
    @touchend="onTouchEnd">
    <div class="info">{{ info }}</div>
    <div class="default-slot">
      <slot />
    </div>
  </div>

Here is the template section of the code. Since I haven't found a way for two-way data binding with the points created through hotSpots (and need to insert nodes using the createElement method), I hope to directly insert HTML elements through slot, and similar to hotSpots, have the element move with the latitude and longitude as I move the mouse.

[Xiaohantx]

That looks correct for going to image pixel coordinates for a full equirectangular image, although I'm not entirely sure what you're trying to do with these data.

Where is the mouse event coming from?

My current idea is to use document.querySelectorAll('.card') to iterate through the slot nodes like <p class="card" :position="[-11.13456785055232, -165.49457914693835]">left</p>. I have added latitude and longitude information to each element, but I am having trouble accurately placing the latitude and longitude information obtained via mouseEventToCoords in the corresponding position on the canvas.

[mpetroff]

I am having trouble accurately placing the latitude and longitude information obtained via mouseEventToCoords in the corresponding position on the canvas.

Now I'm confused. When you opened this issue, you referred to the image width and height, but now you're referring to positioning elements on the <canvas>. The mouseEventToCoords method gives you coordinates in the panorama sphere, and the code in your initial issue converts these to pixel coordinates in the equirectangular panorama. None of this has anything to do with placing elements on the <canvas> / in the rectilinear panorama view.

(I will also note that vue-pannellum is an independent project not affiliated with me or Pannellum. I have no experience with Vue.)

[Xiaohantx]

I am having trouble accurately placing the latitude and longitude information obtained via mouseEventToCoords in the corresponding position on the canvas.

Now I'm confused. When you opened this issue, you referred to the image width and height, but now you're referring to positioning elements on the <canvas>. The mouseEventToCoords method gives you coordinates in the panorama sphere, and the code in your initial issue converts these to pixel coordinates in the equirectangular panorama. None of this has anything to do with placing elements on the <canvas> / in the rectilinear panorama view.

(I will also note that vue-pannellum is an independent project not affiliated with me or Pannellum. I have no experience with Vue.)

The problem is quite simple and unrelated to Vue. I just want to add a div element to the page and have it move along with the mouse drag, just like hotSpots. (I feel that hotSpots sometimes may not fully meet my requirements for custom elements.) I'm using style.top and style.left to control the position of the element, but the calculated position does not match the latitude and longitude coordinates.

For example, is there any consideration for an API that supports converting latitude and longitude into canvas-based x, y coordinates?

[Xiaohantx]

I am having trouble accurately placing the latitude and longitude information obtained via mouseEventToCoords in the corresponding position on the canvas.

Now I'm confused. When you opened this issue, you referred to the image width and height, but now you're referring to positioning elements on the <canvas>. The mouseEventToCoords method gives you coordinates in the panorama sphere, and the code in your initial issue converts these to pixel coordinates in the equirectangular panorama. None of this has anything to do with placing elements on the <canvas> / in the rectilinear panorama view.

(I will also note that vue-pannellum is an independent project not affiliated with me or Pannellum. I have no experience with Vue.)

Or, for an individual div element, is there a better way to handle its position, similar to hotSpots, so that it can continuously move along?

[Xiaohantx]

I am having trouble accurately placing the latitude and longitude information obtained via mouseEventToCoords in the corresponding position on the canvas.

Now I'm confused. When you opened this issue, you referred to the image width and height, but now you're referring to positioning elements on the <canvas>. The mouseEventToCoords method gives you coordinates in the panorama sphere, and the code in your initial issue converts these to pixel coordinates in the equirectangular panorama. None of this has anything to do with placing elements on the <canvas> / in the rectilinear panorama view.

(I will also note that vue-pannellum is an independent project not affiliated with me or Pannellum. I have no experience with Vue.)

Additionally, I want to report an issue, and I'm not sure if it's normal. After clicking, I use mouseEventToCoords to get the latitude and longitude information, then I apply it with viewer.setYaw(28.7274495387245) and viewer.setPitch(406.53421069188386). However, I notice that the position after applying the latitude and longitude does not match the position where the coordinates were originally obtained.

[mpetroff]

I just want to add a div element to the page and have it move along with the mouse drag, just like hotSpots.

Using createTooltipFunc / createTooltipArgs / cssClass, you can edit the hot spot elements however you like. You get a <div> with the pnlm-hotspot-base CSS class, and that <div> object is passed to the createTooltipFunc function, along with createTooltipArgs. Otherwise, you need to replicate the functionality of the internal renderHotSpot function.

The mouseEventToCoords function is entirely unrelated to this.

Additionally, I want to report an issue, and I'm not sure if it's normal. After clicking, I use mouseEventToCoords to get the latitude and longitude information, then I apply it with viewer.setYaw(28.7274495387245) and viewer.setPitch(406.53421069188386).

That pitch is invalid. It is clamped to the range of [minPitch, maxPitch], which is [-90, 90] by default. Thus, 406.5 is clamped to 90.