D3 Examples - Rivers: search + Stamen terrain

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" />
<link rel="stylesheet" href="Control.NominatimGeocoder.css" />
​
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.5/leaflet.min.js"></script>
<script src="leaflet-hash.js"></script>
<script src="Control.NominatimGeocoder.js"></script>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="TileLayer.d3_geoJSON.js"></script>
​
<style type="text/css">
html, body { height: 100% }
#map { min-height: 100%; }
body {
    margin: 0;
    font-family: Helvetica Neue, 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: #29439c; }
​
</style>
​
</head><body>
​
<div id="map"></div>
​
<script type="text/javascript">
​
// Construct map, center if no location provided
var map = L.map('map', { maxZoom: 18 } );
var hash = new L.Hash(map);
if (!window.location.hash) {
    map.setView([37.958, -120.976], 8);
}
​
// Add Nominatim search
var geocoder = new L.Control.NominatimGeocoder({"collapsed": false});
map.addControl(geocoder);
​
// Fake GeoJSON line to make Leaflet create the <svg> tag that d3_geoJson needs
new L.geoJson({"type": "LineString","coordinates":[[0,0],[0,0]]}).addTo(map);
​
// Make the base map
var baseUrl = 'https://{s}.tile.stamen.com/terrain/{z}/{x}/{y}.png';
var basemap = L.tileLayer(baseUrl, {
        attribution: '<a href="https://maps.stamen.com/">Stamen base map</a>, <a href="https://www.horizon-systems.com/NHDPlus/NHDPlusV2_home.php">NHDPlus v2</a>, <a href="https://www.mapquest.com/" target="_blank">MapQuest Nominatim</a>',
        maxZoom: 20
});
basemap.addTo(map);
​
​
// Style the river lines; width depends on its Strahler number
function riverStyle(feature) {
    return "stroke-width: " + feature.properties.strahler * map.getZoom()/13 + "px;";
}
​
// Make the river overlay layer, vector tiles from our TileStache/Gunicorn server
var geojsonURL = "https://www.somebits.com:8001/rivers/{z}/{x}/{y}.json";
var riverLayer = new L.TileLayer.d3_geoJSON(geojsonURL, {
  class: "river",
  style: riverStyle,
});
map.addLayer(riverLayer);
​
</script>
</body></html>
​
    