D3 Examples - TopoJSON vector maps from OSM

Fun with vector maps

Quick TopoJSON vector tile demo map, derived from an earlier GeoJSON demo. Original README follows.

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.

Layers used here:

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.

xxxxxxxxxx
 
<!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="https://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
<!--[if lte IE 8]>
    <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
<![endif]-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.5/leaflet.min.js"></script>
<script src="https://www.somebits.com/rivers/lib/leaflet-hash.js"></script>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="TileLayer.d3_topoJSON.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: #b42; }
path.water { stroke: #bcf; fill: #abf; }
path.landuse { stroke: #bb2; fill: #cc2; opacity: 0.4 }
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: 7, maxZoom: 15 } );
​
var hash = new L.Hash(map);
if (!window.location.hash) {
    map.setView([39.28, -121.18], 10);
}
​
// Make the base map; a raster tile relief map from ESRI
var esriRelief = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}'
var basemap = L.tileLayer(esriRelief, {
        attribution: '<a href="https://www.arcgis.com/home/item.html?id=9c5370d0b54f4de1b48a3792d7377ff2">ESRI shaded relief</a>, <a href="https://www.horizon-systems.com/NHDPlus/NHDPlusV2_home.php">NHDPlus v2</a>, OpenStreetMap',
        maxZoom: 13
});
basemap.addTo(map);
​
// 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": "#b3c",
  "commercial": "#b3c",
  "retail": "#b3c",
  "parking": "#b3c",
  "quarry": "#b3c",
  "school": "#b3c",
  "hospital": "#b3c",
  "college": "#b3c",
  "university": "#b3c",
}
function rando(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
new L.TileLayer.d3_topoJSON("https://tile.openstreetmap.us/vectiles-land-usages/{z}/{x}/{y}.topojson", {
  class: "landuse",
  layerName: "vectile",
  style: function(d) {
    var c = landColors[d.properties.kind];
    if (!c) { c = "#fff"; }
    if (c == 1) {    // random greens
      c = "hsl(" + rando(100, 130) + ", " + rando(50,70) + "%, " + rando(30, 50) + "%)";
    }
    return "fill: " + c;
  }
}).addTo(map);
​
// Water Areas from OpenStreetMap
new L.TileLayer.d3_topoJSON("https://tile.openstreetmap.us/vectiles-water-areas/{z}/{x}/{y}.topojson", {
  class: "water",
  layerName: "vectile",
  style: ""
}).addTo(map);
​
// Highways from OpenStreetMap
var roadSizes = {
  "highway": "5px",
  "major_road": "3px",
  "minor_road": "1px",
  "rail": "0px",
  "path": "0.5px"
};
new L.TileLayer.d3_topoJSON("https://tile.openstreetmap.us/vectiles-highroad/{z}/{x}/{y}.topojson", {
  class: "road",
  layerName: "vectile",
  style: function(d) { return "stroke-width: " + roadSizes[d.properties.kind]; }
}).addTo(map);
​
​
</script>
</body></html>
​
    