When pulling out CartoDB or PostGIS data into a web mapping environment like LeaftletJS or Google Maps, it is handy to know the bounding box of the data in question. The bounding box is a convenient way to ensure your data is fully visible to the user, no matter what platform they are using or how responsive the viewport is.

A quick way to extract the bounding box from a PostGIS data layer is:

SELECT st_astext(st_envelope(st_union(the_geom))) FROM << table >>

As noted in this blog post, it is possible to do lots of pure PostGISy things directly in the CartoDB UI, this trick above is one of them. Just add the above snippet into the ‘SQL’ tab, and you will be presented with the same result PGAdminIII or PSQL (the more typical PostGIS interfaces) would provide,  a string which looks like:

[[-122.899495685641,53.9576281860941],[-122.899495685641,53.9727081860345],[-122.859095858743,53.9727081860345],[-122.859095858743,53.9576281860941],[-122.899495685641,53.9576281860941]]

Now, note that this coordinate string is in the form:

[[x1,y1],[x2,y2][x3,y3],[x4,y4],[x1,y1]]

You will see that the first coordinate is repeated; this closes the bounding box. Also, the individual vertex coordinates are in the form of [x,y] NOT [lat,long].

You could do the mind-bending trick of figuring out the appropriate coordinate order to determine a Lat-Long bounding box. Or you could, let the computer figure it out. Below is a quick way to convert the above string into a Leaflet or Google Maps bounding box.

LeafletJS

var envelope = [[-122.899495685641,53.9576281860941],[-122.899495685641,53.9727081860345],[-122.859095858743,53.9727081860345],[-122.859095858743,53.9576281860941],[-122.899495685641,53.9576281860941]]
 
 var dataBounds = new L.latLngBounds(L.latLng(envelope[0][1], envelope[0][0]))
 for (i = 1; i < envelope.length; i++) {
     dataBounds.extend(L.latLng(enveolpe[i][1],envelope[i][0]))
 }

map.fitBounds(dataBounds)

 

Google Maps

var envelope = [[-122.899495685641,53.9576281860941],[-122.899495685641,53.9727081860345],[-122.859095858743,53.9727081860345],[-122.859095858743,53.9576281860941],[-122.899495685641,53.9576281860941]]
 
var dataBounds = new google.maps.LatLngBounds({lat:envelope[0][1], lng:envelope[0][0]})
for (i = 0; i < envelope.length; i++) {
    dataBounds.extend({lat:enveolpe[i][1],lng:envelope[i][0]})
}

map.fitBounds(dataBounds)

Isn’t it interesting how similar these code snippets are! Now, you could pump the dataBounds object out to a console.log() and then copy the calculated result back into your map code…

… alternatively you could leave the calculation in place, but it will be run at every rendering of the map code, obviously not optimal, but somewhat convenient.

Observations • Will Cadell

It’s All Big Data, Machine Learning and Platforms

If there were one central theme to this year’s SatSummit, it would be: “machine learning will find all the things, but we need more training data.” It is clear that…

Observations • Will Cadell

The Climate Source

Over the last few months we have worked closely with the Woods Hole Research Center to build The Climate Source. The Climate Source provides a single online resource for access…

Observations • James Banting

Vector Tile Server using PostGIS

We recently held a hackathon at Sparkgeo where we split into a couple teams and turned an idea we had been toying with, but never actually had the time to…

Need a geospatial partner?

Our team complements organizations like yours—by providing on-tap access to geospatial, analytics, and mapping expertise.

Let’s talk

Join our team?

We’re always looking for skilled technologists to help us build the future of geospatial. Got a minute to find out more about us?

Working Here