D3 Examples - PostGIS to include AK and HI in CartoDB

PostGIS to include AK and HI in CartoDB

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.

xxxxxxxxxx
 
<!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="https://cartodb.com/assets/favicon.ico" />
​
    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }
    </style>
​
    <link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
  </head>
  <body>
​
    <div id="map"></div>
​
    <script src="https://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>
    