Zoom is NaN when using rectangular bounds

[mathieubruguier]

When calling geoViewport.viewport([33.841629, -118.91905, 34.27888, -117.954399], [384, 318]);, I get the following results:

center: (2) [34.0602545, -118.4367245]
zoom: NaN

It seems to work fine when using a fixed value ([34.16811, -118.231895, 34.16811, -118.231895]), so I'm guessing I must be doing something wrong with the data I'm passing in.

Any ideas?

[TheDutchCoder]

I'm getting the same error.

[zhangwj999]

function viewport(bounds, dimensions, minzoom, maxzoom, tileSize, allowFloat) {
    minzoom = (minzoom === undefined) ? 0 : minzoom;
    maxzoom = (maxzoom === undefined) ? 20 : maxzoom;
    var merc = fetchMerc(tileSize);
    var base = maxzoom,
        bl = merc.px([bounds[0], bounds[1]], base),
        tr = merc.px([bounds[2], bounds[3]], base),
        width = Math.abs(tr[0] - bl[0]),
        height = Math.abs(bl[1] - tr[1]),
        ratios = [width / dimensions[0], height / dimensions[1]],
        center = [(bounds[0] + bounds[2]) / 2, (bounds[1] + bounds[3]) / 2],
        adjusted = getAdjusted(base, ratios, allowFloat),
        zoom = Math.max(minzoom, Math.min(maxzoom, adjusted));

    return { center: center, zoom: zoom };
}

use Math.abs calculate width and height

[hellojere]

Make sure you're following the correct order for "WSEN array of bounds", meaning west, south, east & north.

Solved mine simply using:

Math.min(start.longitude, end.longitude),
Math.min(start.latitude, end.latitude),
Math.max(start.longitude, end.longitude),
Math.max(start.latitude, end.latitude)

[Frexuz]

Had the issue that the bounds crossed the internation date line (Russia, New Zealand, Fiji, Kiribati)

Solved by moving maxLong to the right

export function getViewport(values: GetViewportProps): GeoViewport {
  // Some countries bounds cross the international date line,
  // so we have to convert the max longitude to a positive value (right of minLongitude)
  if (values.maxLongitude < values.minLongitude) {
    values.maxLongitude += 360
  }
  // They should be [West,South,East,North] or [minimum longitude, minimum latitude, maximum longitude, maximum latitude].
  return viewport(
    [
      values.minLongitude,
      values.minLatitude,
      values.maxLongitude,
      values.maxLatitude,
    ],
    [values.mapWidth, values.mapHeight],
    undefined, // min zoom
    undefined, // max zoom
    undefined, // tile size
    true, // allFloat
  )
}