I'm working on an app that contains a map; right now, the map just includes the Continental US, but it would be great if Alaska and Hawaii could be included as well.

So far, I've found shapefiles for the US from the Census Bureau, converted them to GeoJSON using ogr2ogr, and started modifying the files with TurfJS. Most of my experience is in raw WGS84 mapping without any transformations, so this process is new to me and I'm not entirely comfortable yet.

I looked through the TurfJS docs, and noticed that I could use some of their methods to find the rhumb bearings and distances necessary to move GeoJSONs around. However, this doesn't seem to work well, since the polygons for Alaska and Hawaii end up very distorted. Here's an example of what I'm running into:

This is the code I'm using, where geoJSON contains data for US states, alaska and hawaii correspond to their respective features inside of geoJSON:

// Rescale and translate Alaska
alaska = turf.transformScale(alaska, 0.6)
let alaskaCentroid = turf.centroid(alaska)
let alaskaTarget = turf.point([-140, 40])
let alaskaTranslateDistance = turf.rhumbDistance(alaskaCentroid, alaskaTarget)
let alaskaTranslateBearing = turf.rhumbBearing(alaskaCentroid, alaskaTarget)
alaska = turf.transformTranslate(alaska, alaskaTranslateDistance, alaskaTranslateBearing)
fs.writeFileSync(`${geoJSON.name}_alaska_adjusted.geojson`, JSON.stringify(alaska))
geoJSON.features[alaskaIndex] = alaska
// Translate Hawaii
hawaii = turf.transformScale(hawaii, 0.8)
let hawaiiCentroid = turf.centroid(hawaii)
let hawaiiTarget = turf.point([-130, 30])
let hawaiiTranslateDistance = turf.rhumbDistance(hawaiiCentroid, hawaiiTarget)
let hawaiiTranslateBearing = turf.rhumbBearing(hawaiiCentroid, hawaiiTarget)
hawaii = turf.transformTranslate(hawaii, hawaiiTranslateDistance, hawaiiTranslateBearing)
fs.writeFileSync(`${geoJSON.name}_hawaii_adjusted.geojson`, JSON.stringify(hawaii))
geoJSON.features[hawaiiIndex] = hawaii
// Save final file
fs.writeFileSync(`${geoJSON.name}_adjusted.geojson`, JSON.stringify(geoJSON))

It seems like there's some concept about projections/transformations that I'm missing here, but I've already looked around and I'm stumped at this point.

Why have I come to the conclusion that transforming Alaska and Hawaii is the best way to solve my problem?

  • The map is going to be plotting points in real time, but there won't be a scale/legend, so getting each state's shape to match what it looks like on a flat, Mercator map is important
  • Unfortunately, since I'm plotting lots of points on a map, I want to limit the number of transformations I need to do for each point, so a Lambert or Albers projection isn't practical; moreover, some users may wish to turn the Alaska/Hawaii feature off, and I'm not able to support two different projection options right now
  • Inset maps cause a huge performance hit, are more difficult to program for, and since I'm charged per map viewed, would triple my mapping bill (I'd say 97% of the points I'm plotting are outside Alaska and Hawaii, so it's not worth running IMO)
  • Why do you think the polygons for Alaska and Hawaii end up very distorted when they are already distorted in their original positions on Mercator projection? – swatchai Jul 25 at 14:15
  • @swatchai I just looked at a globe, and the "un-distorted" forms of Alaska and Hawaii have very similar shapes to when they are distorted with the Mercator projection. In both the globe and the Mercator projection, Hawaii's Big Island is clearly discernible, but this is not the case in my projection (see the screenshot I attached). – LiRa Jul 25 at 16:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.