Revisit zoom behavior after searching for zip codes and cities

[BethMattern]

Right now when a user searches for a zip code or a city, the zoom level is too far out. In user research, users expected the map to zoom closer in to the city or zip they searched for.

[KameronKerger]

Each tile does have the city and zip code information in them, however, we aren’t using the tiles to determine the city or ZIP code location. We would need BE information if were to replace Nominatum’s API. yeah, right now Search is doing the same thing for anything that is put in the search bar. That thing is; send what was typed in, to Nominatum’s API and the API returns a “box” with 4 corners. Those corners are LatMax, LatMin, LonMax and LonMin. Then we pass that “box” to another function that pans the map to the “box”. Some ways to move forward: If we can say that all zip codes need to be zoomed in by X, we should be able to do this. If w can say all cities need to be zoomed in by X, we should be able to do this If we want to discriminate the zoom level for cities and/or ZIP codes based on some other factor (let’s say geographical area), we may need to make that a SPIKE Another approach is to explore other Geocoders (converts a human readable address to a Lat/Lon for a map to consume). Here’s a nice article comparing some popular solutions. (edited)

[vim-usds]

If we wanted to try zooming in and out the results of Nominatum's API, here's some code compliments of openAI. Not tested to see if it actually works or not:

function zoomOut(boundingBox, zoom) {
  const [latMin, latMax, lngMin, lngMax] = boundingBox;
  const latMid = (latMin + latMax) / 2;
  const lngMid = (lngMin + lngMax) / 2;
  const latDiff = latMax - latMin;
  const lngDiff = lngMax - lngMin;
  const newLatMin = latMid - latDiff * zoom;
  const newLatMax = latMid + latDiff * zoom;
  const newLngMin = lngMid - lngDiff * zoom;
  const newLngMax = lngMid + lngDiff * zoom;
  return [newLatMin, newLatMax, newLngMin, newLngMax];
}

function zoomIn(boundingBox, zoom) {
  const [latMin, latMax, lngMin, lngMax] = boundingBox;
  const latMid = (latMin + latMax) / 2;
  const lngMid = (lngMin + lngMax) / 2;
  const latDiff = (latMax - latMin) / zoom;
  const lngDiff = (lngMax - lngMin) / zoom;
  const newLatMin = latMid - latDiff / 2;
  const newLatMax = latMid + latDiff / 2;
  const newLngMin = lngMid - lngDiff / 2;
  const newLngMax = lngMid + lngDiff / 2;
  return [newLatMin, newLatMax, newLngMin, newLngMax];
}