Rivers: search + Stamen terrain

River map with search and Stamen terrain

Data from:

<!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>

path { stroke-linejoin; round; stroke-linecap: round; fill: none; }
path.river { stroke: #29439c; }

</style>

</head><body>

// 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>

Modified http://cdn.leafletjs.com/leaflet-0.5/leaflet.js to a secure url

Modified http://d3js.org/d3.v3.min.js to a secure url

https://cdn.leafletjs.com/leaflet-0.5/leaflet.js

https://d3js.org/d3.v3.min.js