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>Get started with the Isochrone API</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <!-- Import Mapbox GL JS  -->
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
  <!-- Import Assembly -->
  <link href='https://api.mapbox.com/mapbox-assembly/v0.23.2/assembly.min.css' rel='stylesheet'>
  <script src='https://api.mapbox.com/mapbox-assembly/v0.23.2/assembly.js'> </script>
  <!-- Import jQuery -->
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

<style>
		body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
	    </style>
</head>

<body>
  <!-- Create a container for the map -->
  <div id='map'></div>


  <script>
      mapboxgl.accessToken = 'pk.eyJ1IjoibmluYW5vdW4iLCJhIjoiY2pjdHBoZGlzMnV4dDJxcGc5azJkbWRiYSJ9.o4dZRrdHcgVEKCveOXG1YQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/ninanoun/cjswczqwb1dkz1fqtlb01sw0e',
center: [-1.7017, 48.1198],
zoom: 17,
pitch: 60
});

function rotateCamera(timestamp) {
// clamp the rotation between 0 -360 degrees
// Divide timestamp by 100 to slow rotation to ~10 degrees / sec
map.rotateTo((timestamp / 150) % 360, { duration: 0 });
// Request the next frame of the animation.
requestAnimationFrame(rotateCamera);
}

map.on('load', function () {
// Start the animation.
rotateCamera(0);

// Add 3d buildings and remove label layers to enhance the map
var layers = map.getStyle().layers;
for (var i = 0; i < layers.length; i++) {
if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
// remove text labels
map.removeLayer(layers[i].id);
}
}

map.addLayer({
'id': '3d-buildings',
'source': 'composite',
'source-layer': 'building',
'filter': ['==', 'extrude', 'true'],
'type': 'fill-extrusion',
'minzoom': 15,
'paint': {
'fill-extrusion-color': '#ffffff',

// use an 'interpolate' expression to add a smooth transition effect to the
// buildings as the user zooms in
'fill-extrusion-height': [
'interpolate',
['linear'],
['zoom'],
15,
0,
15.05,
['get', 'height']
],
'fill-extrusion-base': [
'interpolate',
['linear'],
['zoom'],
15,
0,
15.05,
['get', 'min_height']
],
'fill-extrusion-opacity': 0.8
}
});

var marker = new mapboxgl.Marker({
	scale: 1.5 // a number greater than or equal to zero
})
.setLngLat([-1.7017, 48.1198])

.addTo(map);

});
</script>
  </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset='utf-8' />
	<title>Get started with the Isochrone API</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<!-- Import Mapbox GL JS -->
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
	<!-- Import Assembly -->
	<link href='https://api.mapbox.com/mapbox-assembly/v0.23.2/assembly.min.css' rel='stylesheet'>
	<script src='https://api.mapbox.com/mapbox-assembly/v0.23.2/assembly.js'> </script>
	<!-- Import jQuery -->
	<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

	<style>
	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
	</style>
	</style>
	</head>

	<body>
	<!-- Create a container for the map -->
	<div id='map'></div>


	<script>
	mapboxgl.accessToken = 'pk.eyJ1IjoibmluYW5vdW4iLCJhIjoiY2pjdHBoZGlzMnV4dDJxcGc5azJkbWRiYSJ9.o4dZRrdHcgVEKCveOXG1YQ';
	var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/ninanoun/cjswczqwb1dkz1fqtlb01sw0e',
	center: [-1.7017, 48.1198],
	zoom: 17,
	pitch: 60
	});

	function rotateCamera(timestamp) {
	// clamp the rotation between 0 -360 degrees
	// Divide timestamp by 100 to slow rotation to ~10 degrees / sec
	map.rotateTo((timestamp / 150) % 360, { duration: 0 });
	// Request the next frame of the animation.
	requestAnimationFrame(rotateCamera);
	}

	map.on('load', function () {
	// Start the animation.
	rotateCamera(0);

	// Add 3d buildings and remove label layers to enhance the map
	var layers = map.getStyle().layers;
	for (var i = 0; i < layers.length; i++) {
	if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
	// remove text labels
	map.removeLayer(layers[i].id);
	}
	}

	map.addLayer({
	'id': '3d-buildings',
	'source': 'composite',
	'source-layer': 'building',
	'filter': ['==', 'extrude', 'true'],
	'type': 'fill-extrusion',
	'minzoom': 15,
	'paint': {
	'fill-extrusion-color': '#ffffff',

	// use an 'interpolate' expression to add a smooth transition effect to the
	// buildings as the user zooms in
	'fill-extrusion-height': [
	'interpolate',
	['linear'],
	['zoom'],
	15,
	0,
	15.05,
	['get', 'height']
	],
	'fill-extrusion-base': [
	'interpolate',
	['linear'],
	['zoom'],
	15,
	0,
	15.05,
	['get', 'min_height']
	],
	'fill-extrusion-opacity': 0.8
	}
	});

	var marker = new mapboxgl.Marker({
	scale: 1.5 // a number greater than or equal to zero
	})
	.setLngLat([-1.7017, 48.1198])

	.addTo(map);

	});
	</script>
	</script>
	</body>

	</html>