robertkleffner/index.html

## index.html
<!doctype html>
<html>
    <head>
        <title>Peaks on Mapbox</title>
        <script src='https://api.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
        <script src='https://api.mapbox.com/mapbox.js/plugins/turf/v2.0.2/turf.min.js'></script>
        <script src='./lib.js'></script>
        <link href='https://api.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet' />
        <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
        </style>
    </head>
    <body>
        <div id='map'></div>
        <script>

        mapboxgl.accessToken = 'pk.eyJ1Ijoicm9ia2xlZmZuZXIiLCJhIjoiY2o3N3lmcXM3MjZlZTMzb2M3b2hhaXhueCJ9.kHD-5RsHVVIgI-XDyeFoXw';
        let map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/outdoors-v9'
        });

        map.addControl(new mapboxgl.NavigationControl());

        const peaks = lib.ascendb.peaks['@1.1.2'];

        let getColor = prom => {
            if (prom >= 4921) {
                return '#eeeeee';
            } else if (prom >= 2000) {
                return '#cccccc';
            } else if (prom >= 1000) {
                return '#999999';
            } else if (prom >= 600) {
                return '#666666';
            } else if (prom >= 300) {
                return '#333333';
            } else {
                return '#000000';
            }
        };

        let markers = [];
        map.on('click', event => {
            let bounds = map.getBounds();
            let center = bounds.getCenter();
            let distance = turf.distance(turf.point(center.toArray()), turf.point([center.lng, bounds.getNorth()])) * 1000;

            let peakFields = ['lat', 'lon', 'prom'];
            let peakFilter = { near: { lat: center.lat, lon: center.lng, rad: distance } };
            peaks({ fields: peakFields, filters: peakFilter }).then(peaks => {
                markers.forEach(m => m.remove());
                markers = [];
                peaks.forEach(p => {
                    let marker = new mapboxgl.Marker({color: getColor(p.prom)});
                    marker.setLngLat([p.lon, p.lat]);
                    marker.addTo(map);
                    markers.push(marker);
                });
            });
        });
        </script>
    </body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Peaks on Mapbox</title>
	<script src='https://api.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
	<script src='https://api.mapbox.com/mapbox.js/plugins/turf/v2.0.2/turf.min.js'></script>
	<script src='./lib.js'></script>
	<link href='https://api.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>
	</head>
	<body>
	<div id='map'></div>
	<script>

	mapboxgl.accessToken = 'pk.eyJ1Ijoicm9ia2xlZmZuZXIiLCJhIjoiY2o3N3lmcXM3MjZlZTMzb2M3b2hhaXhueCJ9.kHD-5RsHVVIgI-XDyeFoXw';
	let map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/outdoors-v9'
	});

	map.addControl(new mapboxgl.NavigationControl());

	const peaks = lib.ascendb.peaks['@1.1.2'];

	let getColor = prom => {
	if (prom >= 4921) {
	return '#eeeeee';
	} else if (prom >= 2000) {
	return '#cccccc';
	} else if (prom >= 1000) {
	return '#999999';
	} else if (prom >= 600) {
	return '#666666';
	} else if (prom >= 300) {
	return '#333333';
	} else {
	return '#000000';
	}
	};

	let markers = [];
	map.on('click', event => {
	let bounds = map.getBounds();
	let center = bounds.getCenter();
	let distance = turf.distance(turf.point(center.toArray()), turf.point([center.lng, bounds.getNorth()])) * 1000;

	let peakFields = ['lat', 'lon', 'prom'];
	let peakFilter = { near: { lat: center.lat, lon: center.lng, rad: distance } };
	peaks({ fields: peakFields, filters: peakFilter }).then(peaks => {
	markers.forEach(m => m.remove());
	markers = [];
	peaks.forEach(p => {
	let marker = new mapboxgl.Marker({color: getColor(p.prom)});
	marker.setLngLat([p.lon, p.lat]);
	marker.addTo(map);
	markers.push(marker);
	});
	});
	});
	</script>
	</body>
	</html>