influxdata / influxdata/giraffe

GeoWidget: Maps with data presentation layers are not centered on the correct coordinates

Open
#440 0 comments 0 reactions 2 assignees Claimed by @kristinarobinson View on GitHub
team/ui
Dominant language
TypeScript
Stars
189
Forks
33
Avg merge
3d 15h
Merged PRs (30d)
4

Description

I've checked the current state of `dubsky/giraffe` branch `feat/chronograf-geo-integration` against the tests at

https://github.com/bonitoo-io/giraffe-cypress

dubsky/giraffe latest commit is

```
commit e07fafd4f4846c8ba7429e6f2dc45d35f092eb73 (HEAD -> feat/chronograf-geo-integration, origin/feat/chronograf-geo-integration)
Author: dubsky
Date: Tue Dec 22 10:48:00 2020 +0100

chore: improving type definitions

```
I've also just checked the current state of `influxdata/giraffe` branch `master` against the same test suite.

```
commit 9f047c6e60db1111d3a7b066b3528f8edb39161a (HEAD -> master, origin/master, origin/HEAD)
Author: dubsky
Date: Fri Dec 18 18:36:08 2020 +0100

```

The comment that I made in [PR 365](https://github.com/influxdata/giraffe/pull/365#issuecomment-747342826) still applies.

Leaflet tiles render as they should, but there is an _error in the location_.

The tests in the test suites are centered over Futuroscope just north of Poitiers France.

```javascript
const latitude = 46.6671;
const longitude = 0.3700;
```

For some reason the current giraffe code with leaflet.css in this test case renders the center of the test map nearer to Tours, which is at a higher latitude. Other test case also have the maps off-center but in other locations.

![TracksAndMarkersInfluxdataPR425](https://user-images.githubusercontent.com/25881301/102471691-cb2c2d80-4055-11eb-9a39-44047cb42415.png)

I was writing tests against PR 365 up until the Christmas break. This is how the data rendered then after the same test.

![TracksAndMarkersDubskyPR365](https://user-images.githubusercontent.com/25881301/102471969-18a89a80-4056-11eb-9ccc-d6569f7d9bd2.png)

For comparison, this is how the coordinates render on Open Street Map's own site.

![OpenStreet046_6671x0_3700](https://user-images.githubusercontent.com/25881301/102472118-442b8500-4056-11eb-8c2b-d35b41600ee6.png)

The map should zoom in to Futuropolis.

![OpenStreet046_6671x0_3700_L16](https://user-images.githubusercontent.com/25881301/102472249-6ae9bb80-4056-11eb-9f23-73a879951b5d.png)

Note, I've further noticed that without any data presentation layers, the map seems to render the correct location. However, after an SVG or Canvas presentation layer is added, the location seems to be off.

### Sample test run

https://user-images.githubusercontent.com/25881301/103655607-c3cab680-4f67-11eb-9ce9-89ce012138b3.mp4

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.