Skip to content

Instantly share code, notes, and snippets.

@GordonSmith
Last active April 8, 2016 09:14
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 GordonSmith/62c69a2d99cf18241e0ae433054b2408 to your computer and use it in GitHub Desktop.
Save GordonSmith/62c69a2d99cf18241e0ae433054b2408 to your computer and use it in GitHub Desktop.
British Isles
license: Apache-2.0

British Isles

Combining several choropleths via layers.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.rawgit.com/hpcc-systems/Visualization/v1.14.0-rc2/dist-amd/hpcc-viz.js"></script>
</head>
<body style="padding:0px; margin:0px; overflow:hidden">
<div id="placeholder" style="width:100%; height:100vh">
</div>
<script>
require(["src/map/Layered", "src/map/TopoJSONChoropleth", "src/map/Graticule"], function (Layered, TopoJSONChoropleth, Graticule) {
var widget = new Layered()
.target("placeholder")
.layers([
new TopoJSONChoropleth().region("GB").opacity(0.75).meshStrokeWidth(0.75),
new TopoJSONChoropleth().region("ND").opacity(0.75).meshStrokeWidth(0.75),
new TopoJSONChoropleth().region("IE").opacity(0.75).meshStrokeWidth(0.75),
new Graticule().opacity(0.25).meshStrokeWidth(0.75)
])
.projection("orthographic")
.centerLat(55)
.centerLong(-5)
.zoom(20)
.render()
;
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment