Hbentzur/landslides.html Secret

## landslides.html
< -- 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>

## ls.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              ls.geojson
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	< -- 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>