Skip to content

Instantly share code, notes, and snippets.

@rgdonohue

rgdonohue/README.md

Last active November 25, 2015 20:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rgdonohue/4beb7bd76b1e191a4239 to your computer and use it in GitHub Desktop.
Save rgdonohue/4beb7bd76b1e191a4239 to your computer and use it in GitHub Desktop.
Download ZIP
PostGIS to include AK and HI in CartoDB
Raw
README.md

This example demonstrates the use of PostGIS to move and scale Alaska and Hawaii to fit SW off the continental US in a traditional map layout, client-side using CartoDB.js.

The continental US is first transformed out of Geo Web Mercator to an USA Contiguous Albers Equal Area Conic projection using the PostGIS function ST_Transform. Inspired by Free Your Maps From Web Mercator.

Alaska and Hawaii are then transformed using their respective projections, and then moved using St_Transform. Alaska's area is also reduced in size using the ST_Scale function.

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Including Alaska &amp; Hawaii</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script type="cartocss/html" id="county-styles">
// store the CartoCSS style here b/c it's a pain to write below
#us_counties_ms_30{
polygon-fill: #4A87B4;
polygon-opacity: 0.7;
line-color: #FFF;
line-width: 0.5;
line-opacity: 1;
}
</script>
<script>
var map = new L.Map("map", {
center: [-1,-4], // adjust the center a bit. we're reprojecting to meters, so not lat/lon here
zoom: 4
});
// create the layer source objects
var counties = {
user_name: 'rgdonohue',
type: 'cartodb',
sublayers: [{
sql: "SELECT ST_Transform(the_geom, 102003) AS the_geom_webmercator FROM us_counties_ms_30 WHERE statefp != '02' and statefp != '15' and statefp != '72'",
cartocss: $("#county-styles").text()
}]
},
alaskaCounties = {
user_name: 'rgdonohue',
type: 'cartodb',
sublayers: [{
sql: "SELECT ST_Scale(ST_Translate(ST_Transform(the_geom, 102006),-3563330,-3083900),.7,.7) AS the_geom_webmercator FROM us_counties_ms_30 WHERE statefp = '02'",
cartocss: $("#county-styles").text()
}]
},
hawaiiCounties = {
user_name: 'rgdonohue',
type: 'cartodb',
sublayers: [{
sql: "SELECT ST_Scale(ST_Translate(ST_Transform(the_geom, 102007),-1600000,-1700000),1,1) AS the_geom_webmercator FROM us_counties_ms_30 WHERE statefp = '15'",
cartocss: $("#county-styles").text()
}]
}
// store the objects
var layers = [counties, alaskaCounties, hawaiiCounties];
// loop through and mug those puppies to the map
layers.forEach(function(layer){
cartodb.createLayer(map, layer)
.addTo(map);
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment