Charger icons do not point to the correct location

rrlevy · February 15, 2023, 2:59pm

Has anyone else been annoyed by the issue that the charger icons on the map do not point to the correct location of the chargers?

For example, this icon makes it look that the charger is on the southern bank of the river:

Howwever, if you zoom in a lot, you will see that it is actually on the northern bank:

I mentioned this issue on GitHub a couple of months ago, but no one seems to care.

Has this issue been discussed before?

Calif_Ioniq5 · February 15, 2023, 9:40pm

I haven’t seen it discussed but agree that the point at the bottom of the icon should be on the location. At present it appears the center of the icon is at the location.

Christopher · February 16, 2023, 2:02am

Thanks for raising the issue, I admit I don’t really check those often and didn’t see that issue. If someone wants to look into it in more detail that would be great. The most important thing would be to determine if the latitude/longitude in a particular POI is actually correct, then correct the mapbox marker options as required.

github.com

openchargemap/ocm-app/blob/master/src/app/services/mapping/providers/MapBox.ts#L300


      
          let markerOptions = {
            element: icon,
            color: color
          };
          
          
let markerTooltip = (isNativePOI ? "OCM-" : "EXT-") + poi.ID + ": " + poi.AddressInfo.Title + ":";
          if (poi.UsageType != null) { markerTooltip += " " + poi.UsageType.Title; }
          
          
if (poi.StatusType != null) { markerTooltip += " " + poi.StatusType.Title; }
          
          
let newMarker = new mapboxgl.Marker(markerOptions)
            .setLngLat([poi.AddressInfo.Longitude, poi.AddressInfo.Latitude])
            .addTo(map);
          
          
(<any>newMarker).poi = poi;
          
          
let markerElement = newMarker.getElement();
          
          
(<any>markerElement).poi = poi;
          markerElement.addEventListener('click', (el) => {
            const clickedPOI = (<any>el.currentTarget).poi;

While the marker position could well be slightly offset vs the marker image I’m not aware of it being wildly wrong as I’m sure it would hopefully have come up sometime in the 7 years since this version of the app was released, so check the data first.

Christopher · February 16, 2023, 3:10am

Looking at this further, you are correct that there is a significant discrepancy depending on zoom level.

Here’s my own test for RAC, West Perth OCM-16670, -31.947956 , 115.84884

Google Maps for -31.947956 , 115.84884

OCM web app for this POI:

At max zoom (as close as possible) they appear identical however I can see the tip of the marker does vary significantly in precision at different zoom levels.

If I zoom out a bit the tip of the icon clearly no longer points to the right spot:

Looking at the mapbox docs there is an option to set the anchor of the icon and we are just using the default which is center.

I will update our web app to standardise on ‘bottom’ for the icon anchor. This has the debatable disadvantage in that markers will move slightly from their previous position, but the margin of error will vary depending on whether users adding/editing POIs are zoomed in or not (if they’re not zoomed in then the accuracy is poor anyway).