Skip to content

Instantly share code, notes, and snippets.

@reyemtm

reyemtm/index.html

Last active November 26, 2019 13:01
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 reyemtm/aefb2318de32a63fc574a46b8d7dc380 to your computer and use it in GitHub Desktop.
Save reyemtm/aefb2318de32a63fc574a46b8d7dc380 to your computer and use it in GitHub Desktop.
Download ZIP
County Parcel Viewer 15MB GeoJSON (3MB Zipped) - Mapbox GL JS Version with geojson-vt 3.0
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>County Parcel Viewer | Mapbox GL JS</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.43.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.css' rel='stylesheet' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.4/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip-utils/0.0.2/jszip-utils.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js" integrity="sha256-PieqE0QdEDMppwXrTzSZQr6tWFX3W5KkyRVyF1zN3eg=" crossorigin="anonymous"></script>
<style>
body {
margin: 0;
padding: 0;
background: black;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#control {
margin: 10px;
border: 2px solid rgba(0, 0, 0, 0.2);
padding: 10px;
border-radius: 5px;
background: white;
width: auto;
background-clip: padding-box;
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div id='map'>
</div>
<div id='control'></div>
<script>
var opts = {
lines: 15, // The number of lines to draw
length: 38, // The length of each line
width: 3, // The line thickness
radius: 30, // The radius of the inner circle
scale: 1, // Scales overall size of the spinner
corners: 0.5, // Corner roundness (0..1)
color: 'white', // #rgb or #rrggbb or array of colors
opacity: 0.5, // Opacity of the lines
};
var spinTarget = document.getElementById('map');
var spinner = new Spinner(opts).spin(spinTarget);
var map = new mapboxgl.Map({
container: 'map',
hash: true,
/*style: 'some mapbox style url*/
/*below is a blank style*/
style: {
"version": 8,
"name": "blankStyle",
"sources": {
"none": {
"type": "vector",
"url": ""
}
},
"layers": [{
"id": "background",
"type": "background",
"paint": {
"background-color": "#1d1f20"
}
}]
},
center: [-82.598, 39.723],
zoom: 10,
debug: 2,
minZoom: 10.5
});
map.addControl(new mapboxgl.NavigationControl());
map.addControl(new mapboxgl.FullscreenControl());
var step1, step2, step3, step4;
var url = "https://reyemtm.github.io/data/topojson/";
var layerName;
var x = 0;
var build = 1;
buildLayer("fairfieldCounty.zip", null);
function buildLayer(file, placeholder) {
build = 1;
x = 0;
var now = Date.now();
var layerData;
file = url + file;
/*
* load and extract topojson form zip file
*/
JSZipUtils.getBinaryContent(file, function(err, data) {
if (err) {
throw err; // or handle err
}
JSZip.loadAsync(data)
.then(function(data) {
step1 = Date.now();
document.getElementById('control').innerHTML = "3MB Zip File Loaded: " + ((step1 - now) / 1000).toFixed(2) + " seconds";
console.log(data);
for (file in data.files) {
var inner = file;
console.log(inner);
data.file(inner).async("string")
.then(function(string) {
layerData = JSON.parse(string);
for (name in layerData.objects) {
layerName = name;
console.log(name);
break
}
console.log("step1", step1)
step2 = Date.now();
document.getElementById('control').innerHTML += "<br>Unzipped: " + ((step2 - step1) / 1000).toFixed(2) + " seconds";
/*
* Convert topojson to GeoJSON
*/
var layerDataGeoJSON = topojson.feature(layerData, layerData.objects[layerName]);
step3 = Date.now();
document.getElementById('control').innerHTML += "<br>Topo to GeoJSON: " + ((step3 - step2) / 1000).toFixed(2) + " seconds";
/*
* Add the source and layer to the map
*/
map.addLayer({
'id': 'counties',
'type': 'fill',
'source': {
'type': 'geojson',
'data': layerDataGeoJSON
},
'paint': {
'fill-color': 'transparent',
'fill-opacity': 1,
'fill-outline-color': '#5982d5' //'#4264fb'
}
});
/*
* Stop the spinner once the tiles have loaded the first time and populate the loading time.
*/
map.on('sourcedataloading', function(e) {
console.log('sourcedataloading');
var checkLoaded = setInterval(loaded, 100);
function loaded() {
if (map.getLayer('counties')) {
console.log('tiles loaded: ', map.areTilesLoaded());
}
if (map.areTilesLoaded()) {
window.clearInterval(checkLoaded);
spinner.stop();
if (x === 0) {
step4 = Date.now();
document.getElementById('control').innerHTML += "<br>Sliced and Rendered: " + ((step4 - step3) / 1000).toFixed(2) + " seconds";
}
x = 1;
}
}
});
/*
* highlight feature on click
* from https://gis.stackexchange.com/questions/186533/highlight-feature-with-click-in-mapbox-gl
* method from mapbox documentation is too intensive i.e. filter layer based on clicked feature
* have heard mapbox is adding this method to the examples
*/
map.on('click', function(e) {
//console.log(e);
var features = map.queryRenderedFeatures(e.point);
if (!features.length) {
return;
}
if (typeof map.getLayer('selected') !== "undefined") {
map.removeLayer('selected')
map.removeSource('selected');
}
var feature = features[0];
//console.log(feature);
var index = (feature.properties.index).split("|");
var popupTxt = "<h4>" + index[0] + "</h4>" + index[1];
var popup = new mapboxgl.Popup()
.setLngLat([e.lngLat.lng, e.lngLat.lat])
.setHTML(popupTxt)
.addTo(map);
map.addSource('selected', {
"type": "geojson",
"data": feature.toJSON()
});
map.addLayer({
"id": "selected",
"type": "line",
"source": "selected",
"paint": {
"line-color": "firebrick",
"line-width": 6
}
});
});
});
return false;
}
});
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment