Skip to content

Instantly share code, notes, and snippets.

View gdal_wms_osm.xml
<GDAL_WMS>
<Service name="TMS">
<ServerUrl>http://tile.openstreetmap.org/${z}/${x}/${y}.png</ServerUrl>
</Service>
<DataWindow>
<UpperLeftX>-20037508.34</UpperLeftX>
<UpperLeftY>20037508.34</UpperLeftY>
<LowerRightX>20037508.34</LowerRightX>
<LowerRightY>-20037508.34</LowerRightY>
<TileLevel>18</TileLevel>
@turban
turban / index.html
Last active Aug 29, 2015
Mapbox GL JS
View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.7.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
@turban
turban / README.md
Last active Apr 14, 2016
UTM zones with D3.js
View README.md

As the name implies, the Universal Transverse Mercator (UTM) projection is based on the cylindrical Transverse Mercator projection.

The UTM system divides the Earth between 80°S and 84°N latitude into 60 zones, each 6° of longitude in width. The zones are numbered from 1 to 60 proceeding east from the anitmeridian (180°).

This rotating Transverse Mercator projection shows the 60 UTM zones around the Earth. The projection has constant scale along the changing central meridian, and regions near it are mapped with low distortion. Just like on the regular Mercator projection, areas further away from the central meridian are increasingly distorted.

UTM is often used to show regions or countries with a greater north-south extent, like mainland Norway, which is usually depicted in UTM 33.

More informatio

View L.Wax.js
L.Wax = L.Class.extend({
initialize: function (map) {
this.map = map;
var layers = map.options.layers || [];
var wax = false;
var self = this;
map.on('layeradd', function(e) {
if (e.layer.options.wax) {
View labels.mss
@serif: "Times New Roman Regular","FreeSerif Medium","DejaVu Serif Book";
@serif-italic: "Times New Roman Italic","FreeSerif Italic","DejaVu Serif Italic";
@sans: "Arial Regular","Liberation Sans Regular","DejaVu Sans Book";
@sans-bold: "Arial Bold","Liberation Sans Bold","DejaVu Sans Bold";
#labels[zoom > 4][zoom < 8][desc_code = "METR"] {
text-name: "''";
text-face-name: @sans-bold;
text-halo-radius: 1;
text-halo-fill: rgba(255,255,255,0.75);
View leaflet-wax.js
// Load TileJSON
wax.tilejson('http://earthatlas.info/nz/tiles/nz-popden.tilejson', function(tilejson) {
// Create map and add image tiles
var map = new L.Map('map-div')
.addLayer(new wax.leaf.connector(tilejson))
.setView(new L.LatLng(51, 0), 1);
// Create map legend
wax.leaf.legend(map, tilejson).appendTo(map._container);
View UTFGrid
{
"grid": [
" !!#######$$$",
" !########$$$",
" #########$$$$",
" %%#####$$$$$$$",
" %%%%%$#$$$$$$$$",
" &%%%%%$$$$$$$$$$",
" &&&%%%%%%%$$$$$$$$$",
" &&&&%%%%%%%$$$$$$$$$",
View nz-popden.tilejson
{
"tilejson": "2.0.0",
"scheme": "xyz",
"bounds": [ 166, -47.5, 179, -34 ],
"center": [ 173.3, -41.273, 5 ],
"minzoom": 0,
"maxzoom": 12,
"name": "Population density map of New Zealand",
"description": "Created by Bjørn Sandvik\nhttp://blog.thematicmapping.org/",
"legend": "<div class='my-legend'>\n<div class='legend-title'>Population density<br/>per km<sup>2</sup> (2011)</div>\n<div class='legend-scale'>\n <ul class='legend-labels'>\n <li><span style='background:#FFFFFF;'></span>None</li>\n <li><span style='background:#FFFFE5;'></span>< 1</li>\n <li><span style='background:#FFF7BC;'></span>1 - 5</li>\n <li><span style='background:#FEE391;'></span>5 - 10</li>\n <li><span style='background:#FEC44F;'></span>10 - 50</li>\n <li><span style='background:#FE9929;'></span>50 - 100</li>\n <li><span style='background:#EC7014;'></span>100 - 250</li>\n <li><span style='background:#CC4C02;'></span>250 - 500</li>\n <li><span style='background:#993404;'></span>
View tooltip.tpl
<div>
<strong>{{{au_name}}}</strong><br>
Population: {{{pop2011}}} (2011)<br>
Area: {{{area}}} km<sup>2</sup><br>
Density: {{{popdens}}} per km<sup>2</sup>
</div>
View legend.html
<div class='my-legend'>
<div class='legend-title'>Population density<br/>per km<sup>2</sup> (2011)</div>
<div class='legend-scale'>
<ul class='legend-labels'>
<li><span style='background:#FFFFFF;'></span>None</li>
<li><span style='background:#FFFFE5;'></span>< 1</li>
<li><span style='background:#FFF7BC;'></span>1 - 5</li>
<li><span style='background:#FEE391;'></span>5 - 10</li>
<li><span style='background:#FEC44F;'></span>10 - 50</li>
<li><span style='background:#FE9929;'></span>50 - 100</li>