Display UPCS Cell Bounds on Your Own Map

The cell object returned with a selected or resolved location contains bounds (north, south, east and west) and a center. Those values are enough to outline the exact cell on a map you control, such as a dispatcher's dashboard.

What you get

{
  "cell": {
    "bounds": { "north": 31.52042, "south": 31.52039, "east": 74.35873, "west": 74.35870 },
    "center": { "lat": 31.520405, "lng": 74.358715 }
  }
}

The numbers above are illustrative. bounds has north, south, east and west; center has lat and lng.

Drawing it with Leaflet

Leaflet is a third-party mapping library, used here only as an example:

const b = result.cell.bounds;
const bounds = [[b.south, b.west], [b.north, b.east]];

const rect = L.rectangle(bounds, { weight: 2 }).addTo(map);
map.fitBounds(bounds, { maxZoom: 19 });

Practical notes

• A 3 m cell is tiny. At low zoom it looks like a dot, so also add a marker at the centre.
• Show the code next to the shape, for example in a popup.
• Satellite imagery from your map provider helps staff see which building or gate the cell sits on.
• Latitude comes before longitude in most libraries but some APIs use longitude first; check your library's order.

Where the data comes from

You can take bounds from the embed's onSelect callback (handling the onSelect response), from a server-side resolve call, or store them with the order. If you keep only the code, a lookup returns the location coordinates.

When not to bother

If staff only need to navigate, the code's share link already opens the location. Draw bounds yourself only when you need the cell inside your own tooling. For storing the coordinates reliably, see storing coordinates in a database.