Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pointer event lat lng position doesn't factor in terrain #2248

Open
jonshutt opened this issue Aug 3, 2023 · 8 comments
Open

Pointer event lat lng position doesn't factor in terrain #2248

jonshutt opened this issue Aug 3, 2023 · 8 comments
Labels

Comments

@jonshutt
Copy link

jonshutt commented Aug 3, 2023

Description

In the example shown below, when clicking the map to add points, the markers appear correct until you move the map. It appears that however the mouse screen X Y position is converted to a lat lng coordinates is not factoring in terrain.

A similar issue happens with draggable markers, or clicking on the map to show features at that position.

<Map initialViewState={{ latitude: 32.6141, longitude: -114.34411, zoom: 14, bearing: 80, pitch: 80 }} maxPitch={85} mapStyle="mapbox://styles/mapbox/satellite-v9" mapboxAccessToken={TOKEN} terrain={{source: 'mapbox-dem', exaggeration: 3}} onClick={event => { setPoints([...points, event.lngLat]); }} > <Source id="mapbox-dem" type="raster-dem" url="mapbox://mapbox.mapbox-terrain-dem-v1" tileSize={512} maxzoom={14} /> <Layer {...skyLayer} /> {points.map(point => ( <Marker longitude={point.lng} latitude={point.lat} /> ))} </Map>

Expected Behavior

When moving the map, the position on the marker remains in the same place. Eg, the lat lng position is correct

Steps to Reproduce

Using the terrain example, add a click event and markers

based on terrain\src\app.tsx in the repo

`import React, {useEffect, useRef, useState} from 'react';

import {createRoot} from 'react-dom/client';
import Map, {Source, Layer, Marker} from 'react-map-gl';

import ControlPanel from './control-panel';

import type {SkyLayer} from 'react-map-gl';

const TOKEN = ''; // Set your mapbox token here

const skyLayer: SkyLayer = {
id: 'sky',
type: 'sky',
paint: {
'sky-type': 'atmosphere',
'sky-atmosphere-sun': [0.0, 0.0],
'sky-atmosphere-sun-intensity': 15
}
};

export default function App() {
const [points, setPoints] = useState([]);

return (
<>
<Map
initialViewState={{
latitude: 32.6141,
longitude: -114.34411,
zoom: 14,
bearing: 80,
pitch: 80
}}
maxPitch={85}
mapStyle="mapbox://styles/mapbox/satellite-v9"
mapboxAccessToken={TOKEN}
terrain={{source: 'mapbox-dem', exaggeration: 3}}
onClick={event => {
setPoints([...points, event.lngLat]);
}}
>

<Layer {...skyLayer} />
{points.map(point => (

))}


</>
);
}

export function renderToDom(container) {
createRoot(container).render();
}
`

Environment

  • Framework version:
  • Map library:
  • Browser:
  • OS:

Logs

No response

@jonshutt jonshutt added the bug label Aug 3, 2023
@jonshutt jonshutt changed the title Point lat lng position doesn't factor in terrain Pointer event lat lng position doesn't factor in terrain Aug 3, 2023
@jonshutt
Copy link
Author

jonshutt commented Aug 3, 2023

Just been checking behaviour over previous release versions (all using same underlying mapbox-gl

  • 7.0.15 = markers placed in wrong location
  • 7.0.14 = works but camera itself moves up and down as user pans around map
  • 7.0.11 - terrain goes flat on when clicking to add a marker - markers also keep changing position
  • 7.0.8 - markers wobble up and down as pan camera - but camera movement ok
  • older - markers placed in incorrect location

@jonshutt
Copy link
Author

jonshutt commented Aug 6, 2023

I've been playing around with the source code, and found that the issue started happening when changes were made to the _onAfterRepaint function.

After various trail and error attempts, I found that simply commenting out the map.transform = tr; on line 747 of src\mapbox\mapbox.ts seems to fix things.

@jonshutt
Copy link
Author

jonshutt commented Aug 6, 2023

@Pessimistress
Copy link
Collaborator

Try 7.1.6.

@jonshutt
Copy link
Author

Hi @Pessimistress - Sorry for the delay responding. I've tried the latest versions, and the issue still exists.

I've made a code sandbox here - you'll need to add a mapbox token. Click the map to add some markers - then right click to drag the pitch/bearing - and the markers haven't been added to the lat/lng you would have expected.
https://codesandbox.io/s/react-map-gl-3d-terrain-with-locations-added-to-click-position-sxrnqc?file=/src/App.js

places.in.wrong.place.mp4

@jonshutt
Copy link
Author

@Pessimistress wondering if there's any update to this?

I've tried to investigate further, and what I'm seeing is that the transform being applied on line 704 of
src\components\src\mapbox\mapbox.ts doesn't have the elevation property, but _renderTransform does have it

console.log(Boolean(tr.elevation)) // false
console.log(Boolean(this._renderTransform.elevation)) // true

I've tried to look where the elevation is being added/removed, but can't spot it. My guess is both should have elevation properties - and by not adding it, click events are picking the lat/lng using a transform with no elevation.

@jonshutt
Copy link
Author

jonshutt commented Dec 18, 2023

Another thought -

_queryRenderedFeatures() sets the transforms map.transform = this._renderTransform;, then after sets it back map.transform = tr;

But this doesn't happen anywhere for basic click events.

if I add

_onPointerEvent() {

  ...
  if (e.type === 'mousedown') {
      this._map.transform = this._renderTransform;
    }`
   ...
}

the click event picks the correct point

@AnDanilova
Copy link

I have the same problem. Even if pitch and exaggeration params are 0, just adding a raster-dem source is enouth.
Makers jumps on map (not marker) hover, map move, zoom

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants