Instantly share code, notes, and snippets.

Embed
What would you like to do?
landslides
< -- Global Landslide Catalog. -->
< -- The Global Landslide Catalog (GLC) was developed with the goal of identifying rainfall-triggered landslide events around the world, regardless of size, impacts or location. The GLC considers all types of mass movements triggered by rainfall, which
have been reported in the media, disaster databases, scientific reports, or other sources. The GLC has been compiled since 2007 at NASA Goddard Space Flight Center. This is a unique data set with the ID tag “GLC” in the landslide editor. This dataset
on data.nasa.gov was a one-time export from the Global Landslide Catalog maintained separately. It is current as of March 7, 2016. The original catalog is available here: http://ojo-streamer.herokuapp.com/ -->
<!DOCTYPE html>
<html lang='en'>
<head>
<style>
body {
margin: 0;
padding: 0;
}
html,
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
<title> landslides </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' />
</head>
<body>
<div id='map'> </div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiaGJ0IiwiYSI6ImNqOHo4NGh5czJpYXIzMnA4bnYybmtrcWQifQ.xFGp_QLgqKIrkPgCdJBtZA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
center: [-74.0006213, 40.7229971],
zoom: 3,
});
// I tried to use https://www.mapbox.com/mapbox-gl-js/example/cluster/
map.on('load', function() {
map.addSource('landslides', {
type: 'geojson',
data: 'data/ls.geojson',
cluster: true,
clusterMaxZoom: 10, // Max zoom to cluster points on
clusterRadius: 30 // Radius of each cluster when clustering points
});
map.addLayer({
id: 'clusters',
type: 'circle',
source: 'landslides',
filter: ['has', 'point_count'],
paint: {
// * #e7616b, 10px circles when point count is less than 50
// * #617e9b, 30px circles when point count is between 50 and 100
// * #80966b, 60px circles when point count is greater than or equal to 100
'circle-color': [
'step', ['get', 'point_count'],
'#e7616b',
50,
'#617e9b',
100,
'#80966b',
],
'circle-radius': [
'step', ['get', 'point_count'],
10,
50,
30,
100,
60
]
}
});
// Clusters count
map.addLayer({
id: 'cluster-count',
type: 'symbol',
source: 'landslides',
filter: ['has', 'point_count'],
layout: {
'text-field': '{point_count_abbreviated}',
'text-font': ['DIN Offc Pro Bold'],
'text-size': 10,
}
});
// Unclustered points
map.addLayer({
id: 'unclustered-point',
type: 'circle',
source: 'landslides',
filter: ['!has', 'point_count'],
paint: {
'circle-color': '#f2bf37',
'circle-radius': 5,
}
});
});
</script>
</body>
</html>
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