Skip to content

Instantly share code, notes, and snippets.

@enjalot
Last active June 15, 2016 02:04
Show Gist options
  • Save enjalot/150458d97035ab7663ee to your computer and use it in GitHub Desktop.
Save enjalot/150458d97035ab7663ee to your computer and use it in GitHub Desktop.
topojson on a map: buffers
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.0/mapbox-gl.css' rel='stylesheet' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/2.0.2/turf.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
#map {
position:absolute;
width: 100%;
height: 100%;
}
svg {
position: absolute;
width: 100%;
height: 100%;
}
.land {
stroke: #111;
stroke-opacity: 1;
fill: #efe93d;
fill-opacity: 0.1;
}
.river {
stroke: #111;
fill: none;
stroke-width: 1px;
}
.caption {
background-color: rgba(100, 200, 200, 0.8);
border: 1px solid #444;
position: fixed;
top: 20px;
left: 20px;
padding: 8px;
}
</style>
</head>
<body>
<div id="map"></div>
<div class="caption"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZW5qYWxvdCIsImEiOiJjaWhtdmxhNTIwb25zdHBsejk0NGdhODJhIn0.2-F2hS_oTZenAWc0BMf_uw'
//Setup mapbox-gl map
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/enjalot/cihmvv7kg004v91kn22zjptsc',
center: [-0.1,51.5119112],
zoom: 11.5,
})
map.scrollZoom.disable()
map.addControl(new mapboxgl.Navigation());
// Setup our svg layer that we can manipulate with d3
var container = map.getCanvasContainer()
var svg = d3.select(container).append("svg")
var path = d3.geo.path()
.projection(function(lonlat, i) {
var p = map.project(new mapboxgl.LngLat(lonlat[0], lonlat[1]))
return [p.x, p.y];
})
d3.json("london-neighborhoods.topojson", function(err, london) {
d3.json("london-rivers.topojson", function(err, rivers) {
//console.log(london.objects['london-neighborhoods-slim'])
var neighborhoods = topojson.feature(london, london.objects['london-neighborhoods-slim']);
var buffered = buffer(neighborhoods, -0.0005, 'degrees')
var riverFeatures = topojson.feature(rivers, rivers.objects['london-rivers']);
var thames = getThames(riverFeatures, 80, 'meters')
//var buffered = buffer(features, -0.0005, 'degrees')
//var sliced = difference(neighborhoods, thames)
//console.log("sliced", sliced)
//console.log("original", features)
//console.log("buffered", buffered)
var land = svg.append("path")
.datum(buffered)
.attr("class", "land")
.attr("d", path);
/*
var riversvg = svg.append("path")
.datum(thames)
.attr("class", "river")
.attr("d", path);
*/
function render() {
land.attr("d", path)
//riversvg.attr("d", path)
}
// re-render our visualization whenever the view changes
map.on("viewreset", function() {
render()
})
map.on("move", function() {
render()
})
// render our initial visualization
render();
map.on("click", function(e) {
console.log("click", e);
var p = {
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [e.lngLat.lng, e.lngLat.lat]
}
};
features.features.forEach(function(feature) {
//buffered.features.forEach(function(feature) {
var isInside = turf.inside(p, feature);
if(isInside) {
console.log(feature);
d3.select(".caption").text(feature.properties.name)
}
})
})
}) })
// from http://blockbuilder.org/armollica/c6c97710ac404e67b6bf
function buffer(featureCollection, distance, unit) {
var features = featureCollection.features
.map(function(feature) {
var buffered = null;
try {
buffered = turf.buffer(feature, distance, unit).features[0];
buffered.properties = feature.properties;
} catch(e) { console.error(e); }
return buffered;
})
.filter(function(feature) { return feature !== null; });
return {
type: "FeatureCollection",
features: features,
properties: null
};
}
function getThames(featureCollection, distance, unit) {
var thames = featureCollection.features.filter(function(feature) {
if(feature.properties.name === "River Thames")
return true;
return false;
})
console.log("thames", thames);
var fc = {
type: "FeatureCollection",
features: thames,
properties: null
};
return buffer(fc, distance, unit)
}
function difference(fcA, fcB) {
var features = [];
fcA.features.forEach(function(a) {
fcB.features.forEach(function(b) {
try {
var diff = turf.erase(a,b);
features.push(diff);
} catch(e) {
}
})
})
return {
type: "FeatureCollection",
features: features,
properties: null
}
}
</script>
</body>
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment