mastersigat/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Create a heatmap layer</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.0/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.eyJ1IjoibmluYW5vdW4iLCJhIjoiY2pjdHBoZGlzMnV4dDJxcGc5azJkbWRiYSJ9.o4dZRrdHcgVEKCveOXG1YQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v10',
center: [2.33, 48.85],
zoom: 11.5,
 pitch : 30
});

map.on('load', function() {
// Add a geojson point source.
// Heatmap layers also work with a vector tile source.
map.addSource('horodateurs', {
   type: 'vector',
        url: 'mapbox://ninanoun.a6b6kwmh'});

map.addLayer({
"id": "horodateurs",
"type": "heatmap",
"source": "horodateurs",
"source-layer": 'horodateurParis-38qsf0',

"paint": {
// Increase the heatmap weight based on frequency and property magnitude
"heatmap-weight": [
"interpolate",
["linear"],
["get", "mag"],
0, 0,
11, 1
],
// Increase the heatmap color weight weight by zoom level
// heatmap-intensity is a multiplier on top of heatmap-weight
"heatmap-intensity": [
"interpolate",
["linear"],
["zoom"],
1, 0,
16,3
],
// Color ramp for heatmap.  Domain is 0 (low) to 1 (high).
// Begin color ramp at 0-stop with a 0-transparancy color
// to create a blur-like effect.
"heatmap-color": [
"interpolate",
["linear"],
["heatmap-density"],
0, "rgba(33,102,172,0)",
0.2, "rgb(103,169,207)",
0.4, "rgb(209,229,240)",
0.6, "rgb(253,219,199)",
0.8, "rgb(239,138,98)",
1, "rgb(178,24,43)"
],
// Adjust the heatmap radius by zoom level
"heatmap-radius": [
"interpolate",
["linear"],
["zoom"],
0, 0,
11, 7, 15,10
],
// Transition from heatmap to circle layer by zoom level
"heatmap-opacity": [
"interpolate",
["linear"],
["zoom"],
11, 1,
15, 0.5
],
}
}, 'waterway-label');


});
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title>Create a heatmap layer</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.0/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.0/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.eyJ1IjoibmluYW5vdW4iLCJhIjoiY2pjdHBoZGlzMnV4dDJxcGc5azJkbWRiYSJ9.o4dZRrdHcgVEKCveOXG1YQ';
	var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/dark-v10',
	center: [2.33, 48.85],
	zoom: 11.5,
	pitch : 30
	});

	map.on('load', function() {
	// Add a geojson point source.
	// Heatmap layers also work with a vector tile source.
	map.addSource('horodateurs', {
	type: 'vector',
	url: 'mapbox://ninanoun.a6b6kwmh'});

	map.addLayer({
	"id": "horodateurs",
	"type": "heatmap",
	"source": "horodateurs",
	"source-layer": 'horodateurParis-38qsf0',

	"paint": {
	// Increase the heatmap weight based on frequency and property magnitude
	"heatmap-weight": [
	"interpolate",
	["linear"],
	["get", "mag"],
	0, 0,
	11, 1
	],
	// Increase the heatmap color weight weight by zoom level
	// heatmap-intensity is a multiplier on top of heatmap-weight
	"heatmap-intensity": [
	"interpolate",
	["linear"],
	["zoom"],
	1, 0,
	16,3
	],
	// Color ramp for heatmap. Domain is 0 (low) to 1 (high).
	// Begin color ramp at 0-stop with a 0-transparancy color
	// to create a blur-like effect.
	"heatmap-color": [
	"interpolate",
	["linear"],
	["heatmap-density"],
	0, "rgba(33,102,172,0)",
	0.2, "rgb(103,169,207)",
	0.4, "rgb(209,229,240)",
	0.6, "rgb(253,219,199)",
	0.8, "rgb(239,138,98)",
	1, "rgb(178,24,43)"
	],
	// Adjust the heatmap radius by zoom level
	"heatmap-radius": [
	"interpolate",
	["linear"],
	["zoom"],
	0, 0,
	11, 7, 15,10
	],
	// Transition from heatmap to circle layer by zoom level
	"heatmap-opacity": [
	"interpolate",
	["linear"],
	["zoom"],
	11, 1,
	15, 0.5
	],
	}
	}, 'waterway-label');


	});
	</script>

	</body>
	</html>