Skip to content

Instantly share code, notes, and snippets.

@jbranigan

jbranigan/finish.html Secret

Last active February 15, 2021 21:16
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save jbranigan/e1a49604d43f5183094385a0204a8f1b to your computer and use it in GitHub Desktop.
Save jbranigan/e1a49604d43f5183094385a0204a8f1b to your computer and use it in GitHub Desktop.
Download ZIP
Mapbox Lunchbox Session: Isochrones 2020-05-14
Raw
finish.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Isochrone Lunchbox Finish</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.min.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css" type="text/css"/>
<script src="https://unpkg.com/@turf/turf/turf.min.js"></script>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'MAPBOX_ACCESS_TOKEN';
const transformRequest = (url) => {
const hasQuery = url.indexOf("?") !== -1;
const suffix = hasQuery ? "&pluginName=lunchboxIsochrones" : "?pluginName=lunchboxIsochrones";
return {
url: url + suffix
}
}
const isoUrl = "https://api.mapbox.com/isochrone/v1/mapbox";
const profile = "driving";
const minutes = "15";
let coords = "-90.257765,38.627139";
const pointsUrl = "https://gist.githubusercontent.com/jbranigan/f01464d691d39e59bdbf2a4e3d61d7b7/raw/e92e84fc03189830bd45802138edea2a41b4e5f6/hospitals.geojson";
let points = {};
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-90.257765,38.627139],
zoom: 10,
transformRequest: transformRequest
});
const geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
mapboxgl: mapboxgl
});
map.addControl(geocoder, "top-right");
const getIso = function() {
// Concatenate the request
let request = `${isoUrl}/${profile}/${coords}.json?contours_minutes=${minutes}&polygons=true&access_token=${mapboxgl.accessToken}`;
// Make the request, then do the things
fetch(request).then(res => res.json()).then(res => {
map.getSource("iso").setData(res);
const selected = turf.pointsWithinPolygon(points, res);
map.getSource("selection").setData(selected);
const selectionCount = selected.features.length;
console.log(`Number of points within ${minutes} minutes ${profile} of ${coords}: ${selectionCount}`);
});
};
map.on("load", () => {
// Add source and layer for the isochrone
map.addSource("iso", {
type: "geojson",
data: {
type: "FeatureCollection",
features: [
]
}
});
map.addLayer({
"id": "isoLayer",
"type": "fill",
"source": "iso",
"layout": {},
"paint": {
"fill-color": "purple",
"fill-opacity": 0.3
}
}, "poi-label");
// Add source and layer for the point data
map.addSource("points", {
type: "geojson",
data: {
type: "FeatureCollection",
features: [
]
}
});
map.addLayer({
"id": "pointsLayer",
"type": "circle",
"source": "points",
"layout": {},
"paint": {
"circle-color": "blue",
}
}, "poi-label");
// Add source and layer for the selected point data
map.addSource("selection", {
type: "geojson",
data: {
type: "FeatureCollection",
features: [
]
}
});
map.addLayer({
"id": "selectionLayer",
"type": "circle",
"source": "selection",
"layout": {},
"paint": {
"circle-color": "purple",
}
});
// Do this when the geocoder returns a result
geocoder.on("result", ev => {
coords = ev.result.geometry.coordinates.join(",");
console.log(coords);
getIso();
});
// Fetch the point geojson and set it to a map layer source
fetch(pointsUrl).then(res => res.json()).then(res => {
points = res;
map.getSource("points").setData(points);
});
getIso();
});
</script>
</body>
</html>
Raw
start.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Isochrone Lunchbox Start</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.min.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css" type="text/css"/>
<script src="https://unpkg.com/@turf/turf/turf.min.js"></script>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'MY_ACCESS_TOKEN';
const transformRequest = (url) => {
const hasQuery = url.indexOf("?") !== -1;
const suffix = hasQuery ? "&pluginName=lunchboxIsochrones" : "?pluginName=lunchboxIsochrones";
return {
url: url + suffix
}
}
const pointsUrl = "https://gist.githubusercontent.com/jbranigan/f01464d691d39e59bdbf2a4e3d61d7b7/raw/e92e84fc03189830bd45802138edea2a41b4e5f6/hospitals.geojson";
let points = {};
let coords = "-90.257765,38.627139";
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-90.257765,38.627139],
zoom: 10,
transformRequest: transformRequest
});
const geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
mapboxgl: mapboxgl
});
map.addControl(geocoder, "top-right");
map.on("load", () => {
// Add source and layer for the point data
map.addSource("points", {
type: "geojson",
data: {
type: "FeatureCollection",
features: [
]
}
});
map.addLayer({
"id": "pointsLayer",
"type": "circle",
"source": "points",
"layout": {},
"paint": {
"circle-color": "blue",
}
}, "poi-label");
// Do this when the geocoder returns a result
geocoder.on("result", ev => {
coords = ev.result.geometry.coordinates.join(",");
console.log(coords);
});
// Fetch the point geojson and set it to a map layer source
fetch(pointsUrl).then(res => res.json()).then(res => {
points = res;
map.getSource("points").setData(points);
})
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment