Skip to content

Instantly share code, notes, and snippets.

@nrenner

nrenner/index.html

Last active December 17, 2015 15:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nrenner/5635334 to your computer and use it in GitHub Desktop.
Save nrenner/5635334 to your computer and use it in GitHub Desktop.
Download ZIP
rivers-leaflet-geojson-nopopup (optimized)
Raw
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-src.js"></script>
<script src="http://www.somebits.com/rivers/lib/leaflet-hash.js"></script>
<script src="http://www.somebits.com/rivers/lib/TileLayer.GeoJSON.js"></script>
<script type="text/javascript" src="http://www.somebits.com/rivers/us-states.js"></script>
<script src="optimize.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;
}
.leaflet-layer img { -webkit-filter: grayscale(100%); }
</style>
</head><body>
<div id="map"></div>
<a href="https://github.com/NelsonMinar/vector-river-map"><img
style="position:absolute;top:0;right:0;border:0;"
width="149" height="149" src="http://www.somebits.com/rivers/forkme.png" alt="Fork me on GitHub"
/></a>
<div style="font-size: 11px; line-height: 16px; position: absolute;
background-color: rgba(255, 255, 255, 0.7); padding: 0px 5px 0px 5px;
bottom: 0px; left: 0px; z-index: 8">
Vector tile tutorial
(<a href="https://github.com/NelsonMinar/vector-river-map">GitHub</a>).
By <A href="http://www.somebits.com/">Nelson Minar</a>.
Views: <a href="http://www.somebits.com/rivers/rivers-leaflet.html">Leaflet</a> &bull;
<a href="http://www.somebits.com/rivers/rivers-polymaps.html">Polymaps</a> &bull;
<a href="http://www.somebits.com/rivers/rivers-d3.html">D3.js</a> &bull;
<a href="http://www.somebits.com/rivers/rivers-d3leaflet.html">D3+Leaflet</a></div>
<script type="text/javascript">
// Construct map, center if no location provided
var map = L.map('map', { maxZoom: 13 } );
var hash = new L.Hash(map);
if (!window.location.hash) {
map.setView([37.958, -120.976], 8);
}
// Make the base map; a raster tile relief map from ESRI
var esriRelief = 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}'
var basemap = L.tileLayer(esriRelief, {
attribution: '<a href="http://www.arcgis.com/home/item.html?id=9c5370d0b54f4de1b48a3792d7377ff2">ESRI shaded relief</a>, <a href="http://www.horizon-systems.com/NHDPlus/NHDPlusV2_home.php">NHDPlus v2</a>',
maxZoom: 13
});
basemap.addTo(map);
// Add a single GeoJSON vector file for state boundaries
// This was loaded statically as a script; could also be AJAX
var stateLayer = new L.geoJson(usStates);
stateLayer.setStyle({ "color": "#444",
"weight": 1
//"fill": false,
//"opacity": 1.0
});
stateLayer.addTo(map);
// Style the river lines; width depends on its Strahler number
function riverStyle(feature) {
return { //"color": "#29439c",
"weight": feature.properties.strahler * map.getZoom()/13
//"opacity": 1.0,
};
}
// Make the river overlay layer, vector tiles from our TileStache/Gunicorn server
var geojsonURL = "http://somebits.com:8001/rivers/{z}/{x}/{y}.json";
var geojsonTileLayer = new L.TileLayer.GeoJSON(geojsonURL, { },
{ style: riverStyle });
map.addLayer(geojsonTileLayer);
</script>
</body></html>
Raw
optimize.js
//
// avoid calling "L.Mixin.Events.addEventListener" by registering events that are not used
//
L.FeatureGroup.EVENTS = '';
//
// avoid calling L.Util.extend and setting default styles on each element
//
// set default styles on the svg root element right after it's initialized
L.Map.include({
_initPathRootOrig: L.Map.prototype._initPathRoot,
_initPathRoot: function () {
var init = !this._pathRoot;
this._initPathRootOrig();
if (init) {
this._pathRoot.setAttribute("stroke", "#29439c");
this._pathRoot.setAttribute('fill', 'none');
this._pathRoot.setAttribute("stroke-opacity", 1.0);
}
}
});
L.Path.include({
// clear default options, not used, see initialize
options: {},
initialize: function (options) {
// overwrite default options to avoid calling L.Util.extend (L.setOptions)
this.options = options || {};
this.options.clickable = false;
this.options.zoomAnimation = false;
},
_initStyle: function () {
// no default styles
this._updateStyle();
},
_updateStyle: function () {
// only set styles needed
if (this.options.weight) {
this._path.setAttribute('stroke-width', this.options.weight);
}
if (this.options.color) {
this._path.setAttribute('stroke', this.options.color);
}
}
});
// --------------------------------------------------------------------------
// L.TileLayer.GeoJSON
//
// avoid "Recalculate Style" while adding svg elements
//
var _tilesLoaded = L.TileLayer.GeoJSON.prototype._tilesLoaded;
L.TileLayer.GeoJSON.prototype._tilesLoaded = function(evt) {
console.profile('addData');
console.time('addData');
// remove svg root from DOM while adding elements to it
this._map._panes.overlayPane.removeChild(this._map._pathRoot);
_tilesLoaded.apply(this, arguments);
this._map._panes.overlayPane.appendChild(this._map._pathRoot);
console.timeEnd('addData');
console.profileEnd();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment