105 index.html
View file
@@ -1,30 +1,97 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.4/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.4/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<meta charset=utf-8 />
<title>Impact Maps</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.2.4/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.2.4/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>

<div id='map'></div>

<style>
.menu-ui {
background:#fff;
position:absolute;
top:10px;right:10px;
z-index:1;
border-radius:3px;
width:120px;
border:1px solid rgba(0,0,0,0.4);
}
.menu-ui a {
font-size:13px;
color:#404040;
display:block;
margin:0;padding:0;
padding:10px;
text-decoration:none;
border-bottom:1px solid rgba(0,0,0,0.25);
text-align:center;
}
.menu-ui a:first-child {
border-radius:3px 3px 0 0;
}
.menu-ui a:last-child {
border:none;
border-radius:0 0 3px 3px;
}
.menu-ui a:hover {
background:#f8f8f8;
color:#404040;
}
.menu-ui a.active {
background:#3887BE;
color:#FFF;
}
.menu-ui a.active:hover {
background:#3074a4;
}
</style>
<div id='map'>
<nav id='map-ui' class='menu-ui'>
<a href='#' class='active' id='temperature'>Temperature</a>
<a href='#' class='active' id='precipitation'>Precipitation</a>
</nav>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiaHlkcm9sb2dpY2FsIiwiYSI6ImNpaWh1Y2JjejAwZXp2NG01aWs0YXYyOXEifQ.4g5WxB4lRYonq7YdyUmsIAq7YdyUmsIA';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/hydrological/cijq8bdx1004i8vlwcnkd8etb', //stylesheet location
center: [-74.50, 40], // starting position
maxZoom: 19,
minZoom: 4,
zoom: 9 // starting zoom
});
L.mapbox.accessToken = 'pk.eyJ1IjoiaHlkcm9sb2dpY2FsIiwiYSI6ImNpaWh1Y2JjejAwZXp2NG01aWs0YXYyOXEifQ.4g5WxB4lRYonq7YdyUmsIA';
var map = L.mapbox.map('map', 'mapbox.streets').setView([37, -99], 3);

// Add each wms layer using L.tileLayer.wms
var temperature = L.tileLayer.wms('http://gis.srh.noaa.gov/arcgis/services/NDFDTemps/MapServer/WMSServer', {
format: 'img/png',
transparent: true,
layers: 16
}).addTo(map);

var precipitation = L.tileLayer.wms('http://nowcoast.noaa.gov/arcgis/services/nowcoast/analysis_meteohydro_sfc_qpe_time/MapServer/WmsServer', {
format: 'image/png',
transparent: true,
layers: '5'
}).addTo(map);

// Layer switcher
document.getElementById('temperature').onclick = function () {
var enable = this.className !== 'active';
temperature.setOpacity(enable ? 1 : 0);
this.className = enable ? 'active' : '';
return false;
};

document.getElementById('precipitation').onclick = function () {
var enable = this.className !== 'active';
precipitation.setOpacity(enable ? 1 : 0);
this.className = enable ? 'active' : '';
return false;
};
</script>


</body>
</html>
97 index_precip.html
View file
@@ -0,0 +1,97 @@
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Displaying WMS layers</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.2.4/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.2.4/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>


<style>
.menu-ui {
background:#fff;
position:absolute;
top:10px;right:10px;
z-index:1;
border-radius:3px;
width:120px;
border:1px solid rgba(0,0,0,0.4);
}
.menu-ui a {
font-size:13px;
color:#404040;
display:block;
margin:0;padding:0;
padding:10px;
text-decoration:none;
border-bottom:1px solid rgba(0,0,0,0.25);
text-align:center;
}
.menu-ui a:first-child {
border-radius:3px 3px 0 0;
}
.menu-ui a:last-child {
border:none;
border-radius:0 0 3px 3px;
}
.menu-ui a:hover {
background:#f8f8f8;
color:#404040;
}
.menu-ui a.active {
background:#3887BE;
color:#FFF;
}
.menu-ui a.active:hover {
background:#3074a4;
}
</style>
<div id='map'>
<nav id='map-ui' class='menu-ui'>
<a href='#' class='active' id='temperature'>Temperature</a>
<a href='#' class='active' id='precipitation'>Precipitation</a>
</nav>
</div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiaHlkcm9sb2dpY2FsIiwiYSI6ImNpaWh1Y2JjejAwZXp2NG01aWs0YXYyOXEifQ.4g5WxB4lRYonq7YdyUmsIA';
var map = L.mapbox.map('map', 'mapbox.streets').setView([37, -99], 3);

// Add each wms layer using L.tileLayer.wms
var temperature = L.tileLayer.wms('http://gis.srh.noaa.gov/arcgis/services/NDFDTemps/MapServer/WMSServer', {
format: 'img/png',
transparent: true,
layers: 16
}).addTo(map);

var precipitation = L.tileLayer.wms('http://nowcoast.noaa.gov/arcgis/services/nowcoast/analysis_meteohydro_sfc_qpe_time/MapServer/WmsServer', {
format: 'image/png',
transparent: true,
layers: '5'
}).addTo(map);

// Layer switcher
document.getElementById('temperature').onclick = function () {
var enable = this.className !== 'active';
temperature.setOpacity(enable ? 1 : 0);
this.className = enable ? 'active' : '';
return false;
};

document.getElementById('precipitation').onclick = function () {
var enable = this.className !== 'active';
precipitation.setOpacity(enable ? 1 : 0);
this.className = enable ? 'active' : '';
return false;
};
</script>


</body>
</html>
3 notes.txt
View file
@@ -0,0 +1,3 @@
git add --all
git commit -m "Initial commit"
git push -u origin master
197 sumbravectorgl.html
View file
@@ -0,0 +1,197 @@
<!doctype html>
<html>
<head>
<title>Many polygons with geojson-vt on Leaflet</title>
<meta charset="utf-8">

<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
background: rgb(14, 21, 30);
height: 100%;
font-family: Tahoma, Geneva, Verdana, sans-serif;
font-size:12px;
color:#808080;
}

#map {
position: absolute;
height: 100%;
width: 100%;
background-color: #333;
}
</style>


</head>
<body>
<div id="map"></div>
<div id="drop" style="position:absolute; right:0px; top:0px; width: 200px; height:50%;background-color: white;
border-style:dashed; border-color: blue; border-width:1px; border-radius:4px;padding:5px; opacity:0.9">
<b>Drop WGS84 GeoJSON here</b>
</div>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script src="http://www.sumbera.com/gist/js/vt/geojson-vt-dev.js"></script>
<script src="http://www.sumbera.com/gist/js/leaflet/canvas/L.CanvasTiles.js"></script>

<script src="http://www.sumbera.com/gist/data/CZDistricts.js"></script>


<script>

var leafletMap = L.map('map').setView([50.00, 14.44], 9);
L.tileLayer("http://{s}.sm.mapstack.stamen.com/(toner-background,$fff[difference],$fff[@23],$fff[hsl-saturation@20],toner-lines[destination-in])/{z}/{x}/{y}.png")
.addTo(leafletMap);

var tileOptions = {
maxZoom: 20, // max zoom to preserve detail on
tolerance: 5, // simplification tolerance (higher means simpler)
extent: 4096, // tile extent (both width and height)
buffer: 64, // tile buffer on each side
debug: 0, // logging level (0 to disable, 1 or 2)

indexMaxZoom: 0, // max zoom in the initial tile index
indexMaxPoints: 100000, // max number of points per tile in the index
};
//-------------------------------------------------
function colorizeFeatures(data) {
var counter = 0;
for (var i = 0; i < data.features.length; i++) {
data.features[i].properties.color = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';
counter += data.features[i].geometry.coordinates[0].length;
}
return counter;
}

var tileIndex = geojsonvt(data, tileOptions);

var dropArea = document.getElementById('drop');

dropArea.ondragover = function () {
return false;
};
dropArea.ondragend = function () {
return false;
};
dropArea.ondrop = function (e) {
// -- helper from viz.js test of geojson-vt
function humanFileSize(size) {
var i = Math.floor(Math.log(size) / Math.log(1024));
return Math.round(100 * (size / Math.pow(1024, i))) / 100 + ' ' + ['B', 'kB', 'MB', 'GB'][i];
}
var reader = new FileReader();

reader.readAsText(e.dataTransfer.files[0]);
dropArea.innerHTML += "<br/>";
dropArea.innerHTML += "<br/>Loading... " + e.dataTransfer.files[0].name.toString();
var start = new Date().getTime();
reader.onload = function (event) {
var elapsed = new Date().setTime(new Date().getTime() - start);
dropArea.innerHTML += " " + elapsed + "ms";
try {
dropArea.innerHTML += "<br/>&nbsp;Parsing... " + humanFileSize(event.target.result.length);
start = new Date().getTime();

var data;
data = JSON.parse(event.target.result);
elapsed = new Date().setTime(new Date().getTime() - start);
dropArea.innerHTML += " " + elapsed + "ms";

var vertCount = colorizeFeatures(data);

start = new Date().getTime();
dropArea.innerHTML += "<br/>&nbsp;Indexing... " + data.features.length + " features";
dropArea.innerHTML += "<br/>&nbsp;with " + vertCount + " vertexes";
tileIndex = geojsonvt(data, tileOptions); //eslint-disable-line
elapsed = new Date().setTime(new Date().getTime() - start);
dropArea.innerHTML += " " + elapsed + "ms";
tileLayer.redraw();


} catch (err) {
dropArea.innerHTML += "<br/>&nbsp;Error: " + err;
}


};

e.preventDefault();
return false;
};


colorizeFeatures(data);

var tileLayer = L.canvasTiles()
.params({ debug: false, padding: 5 })
.drawing(drawingOnCanvas)


var pad = 0;

tileLayer.addTo(leafletMap);


function drawingOnCanvas(canvasOverlay, params) {

var bounds = params.bounds;
params.tilePoint.z = params.zoom;

var ctx = params.canvas.getContext('2d');
ctx.globalCompositeOperation = 'source-over';


console.log('getting tile z' + params.tilePoint.z + '-' + params.tilePoint.x + '-' + params.tilePoint.y);

var tile = tileIndex.getTile(params.tilePoint.z, params.tilePoint.x, params.tilePoint.y);
if (!tile) {
console.log('tile empty');
return;
}

ctx.clearRect(0, 0, params.canvas.width, params.canvas.height);

var features = tile.features;

ctx.strokeStyle = 'grey';


for (var i = 0; i < features.length; i++) {
var feature = features[i],
type = feature.type;

ctx.fillStyle = feature.tags.color ? feature.tags.color : 'rgba(255,0,0,0.05)';
ctx.beginPath();

for (var j = 0; j < feature.geometry.length; j++) {
var geom = feature.geometry[j];

if (type === 1) {
ctx.arc(geom[0] * ratio + pad, geom[1] * ratio + pad, 2, 0, 2 * Math.PI, false);
continue;
}

for (var k = 0; k < geom.length; k++) {
var p = geom[k];
var extent = 4096;

var x = p[0] / extent * 256;
var y = p[1] / extent * 256;
if (k) ctx.lineTo(x + pad, y + pad);
else ctx.moveTo(x + pad, y + pad);
}
}

if (type === 3 || type === 1) ctx.fill('evenodd');
ctx.stroke();
}

};


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