bsudekum/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Fun with vector maps

A goofy slippy map of various vector tile data sources.
With some fun colours, greetz to Aaron and Mike and Mike and the
whole Prettymaps crew.
Sacramento, CA •
SF bay area, CA •
New Orleans, LA •
Boulder, CO •
Albuquerque, NM •
Crater Lake, OR •
Bagdad Cafe, CA •
Hillsboro, KS •
Galveston Bay, TX •
Cape Cod, MA
Layers used here:

ESRI's shaded relief tiles
My vector river tiles
OpenStreetMap vector tiles

Want to make maps like this? See my
vector tiles tutorial.
Tested with Chrome. If the background tiles are pepto-bismol pink instead of gunmetal grey, your browser doesn't support -webkit-filter.

  
## index.html
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0"/>

<title>Leaflet vector tile map of rivers</title>

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
<![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
<script src="http://www.somebits.com/rivers/lib/leaflet-hash.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="tilejson.js"></script>

<style type="text/css">
html, body { height: 100% }
#map { min-height: 100%; }
body {
    margin: 0;
    font-family: Helvetica, Arial, sans-serif; font-size: 12px;
    overflow: hidden;
    background-color: #f00;
}
.leaflet-popup-content-wrapper {
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

path { stroke-linejoin; round; stroke-linecap: round; fill: none}
path.river { stroke : #24b; }
path.road { stroke: #535353; }
path.water { stroke: #B1D1F5; fill: #B1D1F5; }
path.landuse { stroke: #ADCCAF; fill: #86C489; opacity: 0.3 }
path.building { stroke: #f00; fill: #f00; }
img { -webkit-filter: grayscale(100%) brightness(40%) contrast(150%);}
</style>

</head><body>

<div id="map"></div>


<script type="text/javascript">

// Construct map, center if no location provided
var map = L.map('map', { minZoom: 10, maxZoom: 18 } );

var hash = new L.Hash(map);
if (!window.location.hash) {
    map.setView([37.7667,-122.4284], 14);
}


// Add a fake GeoJSON line to coerce Leaflet into creating the <svg> tag that d3_geoJson needs
new L.geoJson({"type": "LineString","coordinates":[[0,0],[0,0]]}).addTo(map);

// Land use areas from OpenStreetMap
var landColors = {
  "farm": 1,
  "meadow": 1,
  "scrub": 1,
  "forest": 1,
  "farmyard": 1,
  "farmland": 1,
  "wood": 1,
  "park": 1,
  "cemetery": 1,
  "golf_course": 1,
  "grass": 1,
  "nature_reserve": 1,
  "pitch": 1,
  "common": 1,
  "residential": "#ddd",
  "industrial": "red",
  "commercial": "#C4C078",
  "retail": "#C4C078",
  "parking": "#C4C078",
  "quarry": "#C4C078",
  "school": "#C4C078",
  "hospital": "#C4C078",
  "college": "#C4C078",
  "university": "#C4C078",
}
function rando(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
new L.TileLayer.d3_geoJSON("http://tile.openstreetmap.us/vectiles-land-usages/{z}/{x}/{y}.json", {
  class: "landuse"
}).addTo(map);


// Water Areas from OpenStreetMap
new L.TileLayer.d3_geoJSON("http://tile.openstreetmap.us/vectiles-water-areas/{z}/{x}/{y}.json", {
  class: "water",
  style: ""
}).addTo(map);

// Highways from OpenStreetMap
var roadSizes = {
  "highway": "7px",
  "major_road": "3px",
  "minor_road": "1px",
  "rail": "0px",
  "path": "0.5px"
};
var roadColor = {
  "highway": "#F78545",
  "major_road": "#FFCD2F",
  "minor_road": "#707070",
  "rail": "orange",
  "path": "white"
};

new L.TileLayer.d3_geoJSON("http://tile.openstreetmap.us/vectiles-highroad/{z}/{x}/{y}.json", {
  class: "road",
  style: function(d) { return "stroke-width: " + roadSizes[d.properties.kind] +"; stroke: " + roadColor[d.properties.kind]},

}).addTo(map);

</script>
</body></html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## tilejson.js
/* Experimental vector tile layer for Leaflet
 * Uses D3 to render GeoJSON; faster than Leaflet's native.
 * Originally by Ziggy Jonsson: http://bl.ocks.org/ZJONSSON/5602552
 * Reworked by Nelson Minar: http://bl.ocks.org/NelsonMinar/5624141
 *
 * Todo:
 *   Make this work even if <svg> isn't in the DOM yet
 *   Make this work for tile types that aren't FeatureCollection
 *   Match D3 idioms for .classed(), .style(), etc
 *   Work on allowing feature popups, etc.
 */
L.TileLayer.d3_geoJSON =  L.TileLayer.extend({
    onAdd : function(map) {
        L.TileLayer.prototype.onAdd.call(this,map);
        this._path = d3.geo.path().projection(function(d) {
            var point = map.latLngToLayerPoint(new L.LatLng(d[1],d[0]));
            return [point.x,point.y];
        });
        this.on("tileunload",function(d) {
            if (d.tile.xhr) d.tile.xhr.abort();
            if (d.tile.nodes) d.tile.nodes.remove();
            d.tile.nodes = null;
            d.tile.xhr = null;
        });
    },
    _loadTile : function(tile,tilePoint) {
        var self = this;
        this._adjustTilePoint(tilePoint);

        if (!tile.nodes && !tile.xhr) {
            tile.xhr = d3.json(this.getTileUrl(tilePoint),function(geoJson) {
                tile.xhr = null;
                tile.nodes = d3.select(map._container).select("svg").append("g");
                tile.nodes.selectAll("path")
                    .data(geoJson.features).enter()
                  .append("path")
                    .attr("d", self._path)
                    .attr("class", self.options.class)
                    .attr("style", self.options.style);
            });
        }
    }
});
	<!DOCTYPE html>
	<html lang="en"><head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0"/>

	<title>Leaflet vector tile map of rivers</title>

	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
	<!--[if lte IE 8]>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
	<![endif]-->
	<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
	<script src="http://www.somebits.com/rivers/lib/leaflet-hash.js"></script>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="tilejson.js"></script>

	<style type="text/css">
	html, body { height: 100% }
	#map { min-height: 100%; }
	body {
	margin: 0;
	font-family: Helvetica, Arial, sans-serif; font-size: 12px;
	overflow: hidden;
	background-color: #f00;
	}
	.leaflet-popup-content-wrapper {
	-webkit-border-radius: 5px;
	border-radius: 5px;
	}

	path { stroke-linejoin; round; stroke-linecap: round; fill: none}
	path.river { stroke : #24b; }
	path.road { stroke: #535353; }
	path.water { stroke: #B1D1F5; fill: #B1D1F5; }
	path.landuse { stroke: #ADCCAF; fill: #86C489; opacity: 0.3 }
	path.building { stroke: #f00; fill: #f00; }
	img { -webkit-filter: grayscale(100%) brightness(40%) contrast(150%);}
	</style>

	</head><body>

	<div id="map"></div>


	<script type="text/javascript">

	// Construct map, center if no location provided
	var map = L.map('map', { minZoom: 10, maxZoom: 18 } );

	var hash = new L.Hash(map);
	if (!window.location.hash) {
	map.setView([37.7667,-122.4284], 14);
	}


	// Add a fake GeoJSON line to coerce Leaflet into creating the <svg> tag that d3_geoJson needs
	new L.geoJson({"type": "LineString","coordinates":[[0,0],[0,0]]}).addTo(map);

	// Land use areas from OpenStreetMap
	var landColors = {
	"farm": 1,
	"meadow": 1,
	"scrub": 1,
	"forest": 1,
	"farmyard": 1,
	"farmland": 1,
	"wood": 1,
	"park": 1,
	"cemetery": 1,
	"golf_course": 1,
	"grass": 1,
	"nature_reserve": 1,
	"pitch": 1,
	"common": 1,
	"residential": "#ddd",
	"industrial": "red",
	"commercial": "#C4C078",
	"retail": "#C4C078",
	"parking": "#C4C078",
	"quarry": "#C4C078",
	"school": "#C4C078",
	"hospital": "#C4C078",
	"college": "#C4C078",
	"university": "#C4C078",
	}
	function rando(min, max) {
	return Math.floor(Math.random() * (max - min + 1)) + min;
	}
	new L.TileLayer.d3_geoJSON("http://tile.openstreetmap.us/vectiles-land-usages/{z}/{x}/{y}.json", {
	class: "landuse"
	}).addTo(map);



	// Water Areas from OpenStreetMap
	new L.TileLayer.d3_geoJSON("http://tile.openstreetmap.us/vectiles-water-areas/{z}/{x}/{y}.json", {
	class: "water",
	style: ""
	}).addTo(map);

	// Highways from OpenStreetMap
	var roadSizes = {
	"highway": "7px",
	"major_road": "3px",
	"minor_road": "1px",
	"rail": "0px",
	"path": "0.5px"
	};
	var roadColor = {
	"highway": "#F78545",
	"major_road": "#FFCD2F",
	"minor_road": "#707070",
	"rail": "orange",
	"path": "white"
	};

	new L.TileLayer.d3_geoJSON("http://tile.openstreetmap.us/vectiles-highroad/{z}/{x}/{y}.json", {
	class: "road",
	style: function(d) { return "stroke-width: " + roadSizes[d.properties.kind] +"; stroke: " + roadColor[d.properties.kind]},

	}).addTo(map);

	</script>
	</body></html>
	/* Experimental vector tile layer for Leaflet
	* Uses D3 to render GeoJSON; faster than Leaflet's native.
	* Originally by Ziggy Jonsson: http://bl.ocks.org/ZJONSSON/5602552
	* Reworked by Nelson Minar: http://bl.ocks.org/NelsonMinar/5624141
	*
	* Todo:
	* Make this work even if <svg> isn't in the DOM yet
	* Make this work for tile types that aren't FeatureCollection
	* Match D3 idioms for .classed(), .style(), etc
	* Work on allowing feature popups, etc.
	*/
	L.TileLayer.d3_geoJSON = L.TileLayer.extend({
	onAdd : function(map) {
	L.TileLayer.prototype.onAdd.call(this,map);
	this._path = d3.geo.path().projection(function(d) {
	var point = map.latLngToLayerPoint(new L.LatLng(d[1],d[0]));
	return [point.x,point.y];
	});
	this.on("tileunload",function(d) {
	if (d.tile.xhr) d.tile.xhr.abort();
	if (d.tile.nodes) d.tile.nodes.remove();
	d.tile.nodes = null;
	d.tile.xhr = null;
	});
	},
	_loadTile : function(tile,tilePoint) {
	var self = this;
	this._adjustTilePoint(tilePoint);

	if (!tile.nodes && !tile.xhr) {
	tile.xhr = d3.json(this.getTileUrl(tilePoint),function(geoJson) {
	tile.xhr = null;
	tile.nodes = d3.select(map._container).select("svg").append("g");
	tile.nodes.selectAll("path")
	.data(geoJson.features).enter()
	.append("path")
	.attr("d", self._path)
	.attr("class", self.options.class)
	.attr("style", self.options.style);
	});
	}
	}
	});