County Parcel Viewer 15MB GeoJSON (3MB Zipped) - Mapbox GL JS Version
Last active
November 26, 2019 13:02
-
-
Save reyemtm/db1b45fe608d4dd51b3354296d8d2910 to your computer and use it in GitHub Desktop.
County Parcel Viewer 15MB GeoJSON (3MB Zipped) - Mapbox GL JS Version
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.js'></script> | |
<link href='https://api.mapbox.com/mapbox-gl-js/v0.40.1/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