Using AlbersUsa on mapbox.gl, adding points on dirty projection

[radames]

Hi, Trying to use AbersUsa on mapbox.gl, following your hacked dirty-reprojector.

Just curious if I can converted the LatLgn back to mapbox.gl coordinates. Is there any specific offset to put points on the hacked projected map? I've tried using d3 projection to convert the LatLgn and unproject, both not successful.

Could you please give me some workaround on how did you do that?

const projection = d3.geoAlbersUsa();

const a = new mapboxgl.Marker()
  .setLngLat(map.unproject(projection([-122.2708026,37.8043722])))
  .addTo(map);

const b = new mapboxgl.Marker()
    .setLngLat([-122.2708026,37.8043722])
    .addTo(map);

[dereklieu]

@radames the first approach seems like it should work if you scale your projection accordingly

[dereklieu]

Actually I don't think you want to use map.unproject here as that will give you lng/lat relative to the container. You want to take a lng/lat, project it to albers at the correct scale, then project that back to web mercator I believe.

[radames]

@dereklieu thanks for the perfect tip! it amazing works! thanks

let R = 6378137.0; // radius of Earth in meters
const projection = d3.geoAlbersUsa().translate([0, 0]).scale(R);
const projectionMercartor = d3.geoMercator().translate([0, 0]).scale(R);

const a = new mapboxgl.Marker()
  .setLngLat(projectionMercartor.invert(projection([-122.2708026,37.8043722])))
  .addTo(map);