Last active
June 12, 2019 18:07
-
-
Save reyemtm/315fac1958ba3b9fdbbe2353a53f0995 to your computer and use it in GitHub Desktop.
Turf Trace
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 lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
<title>Trace Network</title> | |
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script> | |
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' /> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/5.1.5/turf.min.js"></script> | |
<style> | |
#map { | |
position: absolute; | |
top: 0; | |
left: 0; | |
bottom: 0; | |
width: 100%; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="map"></div> | |
<script> | |
var lines, points; | |
var networkFeatures = { | |
type: "FeatureCollection", | |
features: [] | |
} | |
var clear = { | |
type: "FeatureCollection", | |
features: [] | |
} | |
var map = new mapboxgl.Map({ | |
container: 'map', | |
hash: true, | |
style: { | |
"version": 8, | |
"name": "blank", | |
"sources": { | |
"none": { | |
"type": "vector", | |
"url": "" | |
} | |
}, | |
"layers": [{ | |
"id": "background", | |
"type": "background", | |
"paint": { | |
"background-color": "#1d1f20" | |
} | |
}] | |
}, | |
center: [-82.005697,39.915321], | |
zoom: 17, | |
debug: 1 | |
}); | |
// map.addControl(new mapboxgl.NavigationControl()); | |
// map.addControl(new mapboxgl.FullscreenControl()); | |
map.on('load', function () { | |
buildMap(); | |
}); | |
function buildMap() { | |
fetch('lines.geojson') | |
.then(res => { return res.json()} ) | |
.then(data => { | |
data.features.map(function(f, i) { | |
f.properties.mapid = i | |
}) | |
lines = data; | |
addLayer(map, 'lines', 'line', lines, 'gray', 4); | |
addLayer(map, "networkFeatures", "line", networkFeatures, "violet", 5); | |
console.log('line data loaded and ready') | |
}); | |
fetch('points.geojson') | |
.then(res => { return res.json() }) | |
.then(data => { | |
data.features.map(function(f, i) { | |
f.properties.mapid = i | |
}) | |
points = data; | |
addLayer(map, 'points', 'circle', points, 'white', 6); | |
console.log('point data loaded and ready') | |
}) | |
} | |
map.on('click', function() { | |
map.getSource("networkFeatures").setData(clear) | |
}) | |
map.on('click', 'points', function (data) { | |
networkBuildOnMap(map, data, "upstream") | |
}); | |
function addLayer(m, name, type, data, color, size) { | |
var paint = (type === 'line') ? { | |
'line-color': color, | |
'line-width': size | |
} : { | |
'circle-color': color, | |
'circle-radius': size | |
}; | |
m.addLayer({ | |
id: name, | |
type: type, | |
source: { | |
type: "geojson", | |
data: data | |
}, | |
paint: paint | |
}); | |
m.on('mouseenter', name, function () { | |
map.getCanvas().style.cursor = 'pointer'; | |
}); | |
m.on('mouseleave', name, function () { | |
map.getCanvas().style.cursor = ''; | |
}); | |
} | |
function networkBuildOnMap(m, point, direction) { | |
networkFeatures.feautres = []; | |
var tempFeatures = networkLines(points.features[point.features[0].properties.mapid], lines, direction) | |
networkFeatures.features = tempFeatures.features; | |
m.getSource("networkFeatures").setData(networkFeatures); | |
networkBuild(networkFeatures, lines, direction) | |
} | |
function networkLines(point, features, string) { | |
var direction = string; | |
var intersected = false; | |
var point = point; | |
var pointBuffer = turf.buffer(point, 2, {units: 'feet'}); | |
var tempNetworkFeatures = { | |
type: "FeatureCollection", | |
features: [] | |
}; | |
var exploded = {}; | |
features.features.map(function(f) { | |
if (turf.booleanPointOnLine(point, f)) { | |
exploded = turf.explode(f); | |
var d = (direction === "upstream") ? 0 : exploded.features.length - 1; | |
if (!(turf.booleanPointInPolygon(exploded.features[d], pointBuffer))) { | |
tempNetworkFeatures.features.push(f) | |
intersected = true | |
} | |
} | |
}) | |
return tempNetworkFeatures | |
} | |
function networkBuild(inLines, masterLines, string) { | |
var direction = string; | |
// GET ALL UPSTREAM POINTS | |
var networkPoints = []; | |
inLines.features.map(function(f) { | |
var inLinesDirection = (direction === "upstream") ? 0 : f.geometry.coordinates.length - 1; | |
networkPoints.push(f.geometry.coordinates[inLinesDirection]) | |
}) | |
var nextNetworkFeatures = { | |
type: "FeatureCollection", | |
features: [] | |
}; | |
// GET UPSTREAM LINES FROM THESE POINTS | |
for (p = 0; p < networkPoints.length; p++) { | |
var tempPoint = turf.point(networkPoints[p]); | |
var tempFeatures = networkLines(tempPoint, masterLines, direction) | |
tempFeatures.features.map(f => { | |
nextNetworkFeatures.features.push(f); | |
networkFeatures.features.push(f) | |
}) | |
} | |
map.getSource("networkFeatures").setData(networkFeatures) | |
if (nextNetworkFeatures.features.length > 0) { | |
networkBuild(nextNetworkFeatures, masterLines, direction) | |
} | |
} | |
// function getIntersectingLines(point, features) { | |
// var filter = ["in", "mapid"] | |
// var point = point; | |
// var intersectingFeatures = { | |
// type: "FeatureCollection", | |
// features: [] | |
// }; | |
// features.features.map(function(f) { | |
// if (turf.booleanPointOnLine(point, f)) { | |
// intersectingFeatures.features.push(f) | |
// filter.push(f.properties.mapid) | |
// } | |
// }); | |
// return intersectingFeatures | |
// } | |
</script> | |
</body> | |
</html> |
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
{"type":"FeatureCollection", "features": [ | |
{"type":"Feature","geometry":{"type":"Point","coordinates":[-82.0087945,39.9152434]},"properties":{"OBJECTID":103,"Id":0,"Northing":0,"Easting":0,"Elevation":0,"System":"San","Material":" ","Type":"MH","Condition":" ","Sump_Depth":0,"Log_Date":-2209161600000,"Notes":" ","Size":" ","Status":" ","FIELDID":"SAN-0102-MH","Enabled":1,"dt_created":null,"dt_edited":1552348800000,"INSPECTLOG":" "},"id":0}, | |
{"type":"Feature","geometry":{"type":"Point","coordinates":[-82.008419,39.9152074]},"properties":{"OBJECTID":104,"Id":0,"Northing":0,"Easting":0,"Elevation":0,"System":"San","Material":" ","Type":"MH","Condition":" ","Sump_Depth":0,"Log_Date":-2209161600000,"Notes":" ","Size":" ","Status":" ","FIELDID":"SAN-0103-MH","Enabled":1,"dt_created":null,"dt_edited":1552348800000,"INSPECTLOG":" "},"id":1}, | |
{"type":"Feature","geometry":{"type":"Point","coordinates":[-82.007723,39.9152027]},"properties":{"OBJECTID":105,"Id":0,"Northing":0,"Easting":0,"Elevation":0,"System":"San","Material":" ","Type":"MH","Condition":" ","Sump_Depth":0,"Log_Date":-2209161600000,"Notes":" ","Size":" ","Status":" ","FIELDID":"SAN-0104-MH","Enabled":1,"dt_created":null,"dt_edited":1552348800000,"INSPECTLOG":" "},"id":2}, | |
{"type":"Feature","geometry":{"type":"Point","coordinates":[-82.0035513,39.9139473]},"properties":{"OBJECTID":237,"Id":0,"Northing":0,"Easting":0,"Elevation":0,"System":"San","Material":" ","Type":"MH","Condition":" ","Sump_Depth":0,"Log_Date":-2209161600000,"Notes":" ","Size":" ","Status":" ","FIELDID":"SAN-0236-MH","Enabled":1,"dt_created":null,"dt_edited":1552348800000,"INSPECTLOG":" "},"id":3}, | |
{"type":"Feature","geometry":{"type":"Point","coordinates":[-82.0035998,39.9139768]},"properties":{"OBJECTID":238,"Id":0,"Northing":0,"Easting":0,"Elevation":0,"System":"San","Material":" ","Type":"MH","Condition":" ","Sump_Depth":0,"Log_Date":-2209161600000,"Notes":" ","Size":" ","Status":" ","FIELDID":"SAN-0237-MH","Enabled":1,"dt_created":null,"dt_edited":1552348800000,"INSPECTLOG":" "},"id":4}, | |
{"type":"Feature","geometry":{"type":"Point","coordinates":[-82.005118,39.9139668]},"properties":{"OBJECTID":239,"Id":0,"Northing":0,"Easting":0,"Elevation":0,"System":"San","Material":" ","Type":"MH","Condition":" ","Sump_Depth":0,"Log_Date":-2209161600000,"Notes":" ","Size":" ","Status":" ","FIELDID":"SAN-0238-MH","Enabled":1,"dt_created":null,"dt_edited":1552348800000,"INSPECTLOG":" "},"id":5}, | |
{"type":"Feature","geometry":{"type":"Point","coordinates":[-82.0063984,39.9139459]},"properties":{"OBJECTID":240,"Id":0,"Northing":0,"Easting":0,"Elevation":0,"System":"San","Material":" ","Type":"MH","Condition":" ","Sump_Depth":0,"Log_Date":-2209161600000,"Notes":" ","Size":" ","Status":" ","FIELDID":"SAN-0239-MH","Enabled":1,"dt_created":null,"dt_edited":1552348800000,"INSPECTLOG":" "},"id":6}, | |
{"type":"Feature","geometry":{"type":"Point","coordinates":[-82.0064427,39.914645]},"properties":{"OBJECTID":241,"Id":0,"Northing":0,"Easting":0,"Elevation":0,"System":"San","Material":" ","Type":"MH","Condition":" ","Sump_Depth":0,"Log_Date":-2209161600000,"Notes":" ","Size":" ","Status":" ","FIELDID":"SAN-0240-MH","Enabled":1,"dt_created":null,"dt_edited":1552348800000,"INSPECTLOG":" "},"id":7}, | |
{"type":"Feature","geometry":{"type":"Point","coordinates":[-82.0070265,39.9146296]},"properties":{"OBJECTID":242,"Id":0,"Northing":0,"Easting":0,"Elevation":0,"System":"San","Material":" ","Type":"MH","Condition":" ","Sump_Depth":0,"Log_Date":-2209161600000,"Notes":" ","Size":" ","Status":" ","FIELDID":"SAN-0241-MH","Enabled":1,"dt_created":null,"dt_edited":1552348800000,"INSPECTLOG":" "},"id":8}, | |
{"type":"Feature","geometry":{"type":"Point","coordinates":[-82.0070312,39.9152112]},"properties":{"OBJECTID":243,"Id":0,"Northing":0,"Easting":0,"Elevation":0,"System":"San","Material":" ","Type":"MH","Condition":" ","Sump_Depth":0,"Log_Date":-2209161600000,"Notes":" ","Size":" ","Status":" ","FIELDID":"SAN-0242-MH","Enabled":1,"dt_created":null,"dt_edited":1552348800000,"INSPECTLOG":" "},"id":9}, | |
{"type":"Feature","geometry":{"type":"Point","coordinates":[-82.0037287,39.9151721]},"properties":{"OBJECTID":246,"Id":0,"Northing":0,"Easting":0,"Elevation":0,"System":"San","Material":" ","Type":"MH","Condition":" ","Sump_Depth":0,"Log_Date":-2209161600000,"Notes":" ","Size":" ","Status":" ","FIELDID":"SAN-0245-MH","Enabled":1,"dt_created":null,"dt_edited":1552348800000,"INSPECTLOG":" "},"id":10}, | |
{"type":"Feature","geometry":{"type":"Point","coordinates":[-82.0038654,39.9153428]},"properties":{"OBJECTID":247,"Id":0,"Northing":0,"Easting":0,"Elevation":0,"System":"San","Material":" ","Type":"MH","Condition":" ","Sump_Depth":0,"Log_Date":-2209161600000,"Notes":" ","Size":" ","Status":" ","FIELDID":"SAN-0246-MH","Enabled":1,"dt_created":null,"dt_edited":1552348800000,"INSPECTLOG":" "},"id":11}, | |
{"type":"Feature","geometry":{"type":"Point","coordinates":[-82.0052241,39.9153373]},"properties":{"OBJECTID":248,"Id":0,"Northing":0,"Easting":0,"Elevation":0,"System":"San","Material":" ","Type":"MH","Condition":" ","Sump_Depth":0,"Log_Date":-2209161600000,"Notes":" ","Size":" ","Status":" ","FIELDID":"SAN-0247-MH","Enabled":1,"dt_created":null,"dt_edited":1552348800000,"INSPECTLOG":" "},"id":12}, | |
{"type":"Feature","geometry":{"type":"Point","coordinates":[-82.0058115,39.9162845]},"properties":{"OBJECTID":253,"Id":0,"Northing":0,"Easting":0,"Elevation":0,"System":"San","Material":" ","Type":"MH","Condition":" ","Sump_Depth":0,"Log_Date":-2209161600000,"Notes":" ","Size":" ","Status":" ","FIELDID":"SAN-0252-MH","Enabled":1,"dt_created":null,"dt_edited":1552348800000,"INSPECTLOG":" "},"id":13}, | |
{"type":"Feature","geometry":{"type":"Point","coordinates":[-82.0094393,39.9156115]},"properties":{"OBJECTID":2304,"Id":0,"Northing":0,"Easting":0,"Elevation":0,"System":" ","Material":" ","Type":" ","Condition":" ","Sump_Depth":0,"Log_Date":-2209161600000,"Notes":" ","Size":" ","Status":" ","FIELDID":"SAN-2305-XX","Enabled":1,"dt_created":null,"dt_edited":1552348800000,"INSPECTLOG":" "},"id":14}, | |
{"type":"Feature","geometry":{"type":"Point","coordinates":[-82.0093263,39.9156182]},"properties":{"OBJECTID":2305,"Id":0,"Northing":0,"Easting":0,"Elevation":0,"System":" ","Material":" ","Type":" ","Condition":" ","Sump_Depth":0,"Log_Date":-2209161600000,"Notes":" ","Size":" ","Status":" ","FIELDID":"SAN-2306-XX","Enabled":1,"dt_created":null,"dt_edited":1552348800000,"INSPECTLOG":" "},"id":15}, | |
{"type":"Feature","geometry":{"type":"Point","coordinates":[-82.0051659,39.9153373]},"properties":{"OBJECTID":2370,"Id":0,"Northing":0,"Easting":0,"Elevation":0,"System":"San","Material":" ","Type":"MH","Condition":" ","Sump_Depth":0,"Log_Date":-2209161600000,"Notes":" ","Size":" ","Status":" ","FIELDID":"SAN-2371-MH","Enabled":1,"dt_created":null,"dt_edited":1552348800000,"INSPECTLOG":" "},"id":16}, | |
{"type":"Feature","geometry":{"type":"Point","coordinates":[-82.0052328,39.9156204]},"properties":{"OBJECTID":2618,"Id":0,"Northing":0,"Easting":0,"Elevation":0,"System":" ","Material":" ","Type":" ","Condition":" ","Sump_Depth":0,"Log_Date":-2209161600000,"Notes":" ","Size":" ","Status":" ","FIELDID":"SAN-2619-XX","Enabled":1,"dt_created":null,"dt_edited":1552348800000,"INSPECTLOG":" "},"id":17}, | |
{"type":"Feature","geometry":{"type":"Point","coordinates":[-82.0040245,39.9156252]},"properties":{"OBJECTID":2619,"Id":0,"Northing":0,"Easting":0,"Elevation":0,"System":" ","Material":" ","Type":" ","Condition":" ","Sump_Depth":0,"Log_Date":-2209161600000,"Notes":" ","Size":" ","Status":" ","FIELDID":"SAN-2620-XX","Enabled":1,"dt_created":null,"dt_edited":1552348800000,"INSPECTLOG":" "},"id":18}, | |
{"type":"Feature","geometry":{"type":"Point","coordinates":[-82.0039232,39.915346]},"properties":{"OBJECTID":2622,"Id":0,"Northing":0,"Easting":0,"Elevation":0,"System":"San","Material":" ","Type":" ","Condition":" ","Sump_Depth":0,"Log_Date":-2209161600000,"Notes":" ","Size":" ","Status":" ","FIELDID":"SAN-2623-XX","Enabled":1,"dt_created":null,"dt_edited":1552348800000,"INSPECTLOG":" "},"id":19}, | |
{"type":"Feature","geometry":{"type":"Point","coordinates":[-82.0098872,39.9157201]},"properties":{"OBJECTID":2798,"Id":0,"Northing":0,"Easting":0,"Elevation":0,"System":" ","Material":" ","Type":" ","Condition":" ","Sump_Depth":0,"Log_Date":-2209161600000,"Notes":" ","Size":" ","Status":" ","FIELDID":"SAN-2799-XX","Enabled":1,"dt_created":null,"dt_edited":1552348800000,"INSPECTLOG":" "},"id":20}, | |
{"type":"Feature","geometry":{"type":"Point","coordinates":[-82.0088367,39.9152474]},"properties":{"OBJECTID":2799,"Id":0,"Northing":0,"Easting":0,"Elevation":0,"System":" ","Material":" ","Type":" ","Condition":" ","Sump_Depth":0,"Log_Date":-2209161600000,"Notes":" ","Size":" ","Status":" ","FIELDID":"SAN-2800-XX","Enabled":1,"dt_created":null,"dt_edited":1552348800000,"INSPECTLOG":" "},"id":21} | |
]} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment