mastersigat/.block

## .block
license: mit

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
  <title>Essai webmap, marqueurs et isochrones</title>

  <meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Mapbox GL JS -->
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
<link
href="https://api.tiles.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css"
rel="stylesheet"
/>
<!-- Mapbox 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>
<!-- 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>
   <script src="https://js.sentry-cdn.com/9c5feb5b248b49f79a585804c259febc.min.js" crossorigin="anonymous"></script>
    </head>

  <body>
    <div id="map"></div>

    <div class="absolute fl my24 mx24 py24 px24 bg-gray-faint round">
      <form id="params">
        <h4 class="txt-m txt-bold mb6">Mode de transport</h4>
        <div class="mb12 mr12 toggle-group align-center">
          <label class="toggle-container">
            <input name="profile" type="radio" value="walking" checked />
            <div class="toggle toggle--active-null toggle--null">A pied</div>
          </label>
          <label class="toggle-container">
            <input name="profile" type="radio" value="cycling" />
            <div class="toggle toggle--active-null toggle--null">En vélo</div>
          </label>
          <label class="toggle-container">
            <input name="profile" type="radio" value="driving" />
            <div class="toggle toggle--active-null toggle--null">En voiture</div>
          </label>
        </div>
        <h4 class="txt-m txt-bold mb6">Durée</h4>
        <div class="mb12 mr12 toggle-group align-center">
          <label class="toggle-container">
            <input name="duration" type="radio" value="5"  />
            <div class="toggle toggle--active-null toggle--null">5 min</div>
          </label>
          <label class="toggle-container">
            <input name="duration" type="radio" value="10" checked />
            <div class="toggle toggle--active-null toggle--null">10 min</div>
          </label>
          <label class="toggle-container">
            <input name="duration" type="radio" value="20" />
            <div class="toggle toggle--active-null toggle--null">20 min</div>
          </label>
        </div>
      </form>
    </div>

    <script>
mapboxgl.accessToken = 'pk.eyJ1Ijoic2lnYXRjaGFpcmUiLCJhIjoiY2tvM2N2d2lrMTgzaDJwbXY5dDF3ZGx3dyJ9.jZywr-wjJTnbj5kstydItw';


var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-1.68,48.12],
    zoom: 12
    });
// Target the params form in the HTML
var params = document.getElementById('params');

// Create variables to use in getIso()
var urlBase = 'https://api.mapbox.com/isochrone/v1/mapbox/';
var lon = -1.68;
var lat = 48.12;
var profile = 'walking';
var minutes = 10;


// Create a function that sets up the Isochrone API query then makes an Ajax call
function getIso() {
    var query =
    urlBase +
    profile +
    '/' +
    lon +
    ',' +
    lat +
    '?contours_minutes=' +
    minutes +
    '&polygons=false&access_token=' +
    mapboxgl.accessToken;

    $.ajax({
      method: 'GET',
      url: query
    }).done(function (data) {
      // Set the 'iso' source's data to what's returned by the API query
      map.getSource('iso').setData(data);
    });
}

// Ajout donnees
map.on ('load', function() {


  // Ajout isochrone
    map.addSource('iso', {
    type: 'geojson',
    data: {
    'type': 'FeatureCollection',
    'features': []}
    });

map.addLayer(
{
'id': 'isoLayer',
'type': 'line',
'source': 'iso',
'layout': {},
'paint': {
'line-color': '#000000',
'line-width': 3
}
},
'poi-label'
);

         // Ajout pointeur deplacable
    var pointeur_iso = new mapboxgl.Marker({
        'color': '#314ccd', draggable: true
      })
      .setLngLat([-1.68, 48.12, ])
      .addTo(map);

    function onDragEnd() {
      var lngLat = pointeur_iso.getLngLat();
      lat = lngLat.lat;
      lon = lngLat.lng;
      getIso();
    }

    pointeur_iso.on('dragend', onDragEnd);

    // Fonction pour appeler API iso
    getIso();

  });

  // Re-appel API pour changement parametres
params.addEventListener('change', function (e) {
    if (e.target.name === 'profile') {
      profile = e.target.value;
    getIso();
    }
    else if (e.target.name === 'duration') {
      minutes = e.target.value;
    getIso();
    }
  });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Essai webmap, marqueurs et isochrones</title>

	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<!-- Mapbox GL JS -->
	<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
	<link
	href="https://api.tiles.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css"
	rel="stylesheet"
	/>
	<!-- Mapbox 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>
	<!-- 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>
	<script src="https://js.sentry-cdn.com/9c5feb5b248b49f79a585804c259febc.min.js" crossorigin="anonymous"></script>
	</head>

	<body>
	<div id="map"></div>

	<div class="absolute fl my24 mx24 py24 px24 bg-gray-faint round">
	<form id="params">
	<h4 class="txt-m txt-bold mb6">Mode de transport</h4>
	<div class="mb12 mr12 toggle-group align-center">
	<label class="toggle-container">
	<input name="profile" type="radio" value="walking" checked />
	<div class="toggle toggle--active-null toggle--null">A pied</div>
	</label>
	<label class="toggle-container">
	<input name="profile" type="radio" value="cycling" />
	<div class="toggle toggle--active-null toggle--null">En vélo</div>
	</label>
	<label class="toggle-container">
	<input name="profile" type="radio" value="driving" />
	<div class="toggle toggle--active-null toggle--null">En voiture</div>
	</label>
	</div>
	<h4 class="txt-m txt-bold mb6">Durée</h4>
	<div class="mb12 mr12 toggle-group align-center">
	<label class="toggle-container">
	<input name="duration" type="radio" value="5" />
	<div class="toggle toggle--active-null toggle--null">5 min</div>
	</label>
	<label class="toggle-container">
	<input name="duration" type="radio" value="10" checked />
	<div class="toggle toggle--active-null toggle--null">10 min</div>
	</label>
	<label class="toggle-container">
	<input name="duration" type="radio" value="20" />
	<div class="toggle toggle--active-null toggle--null">20 min</div>
	</label>
	</div>
	</form>
	</div>

	<script>
	mapboxgl.accessToken = 'pk.eyJ1Ijoic2lnYXRjaGFpcmUiLCJhIjoiY2tvM2N2d2lrMTgzaDJwbXY5dDF3ZGx3dyJ9.jZywr-wjJTnbj5kstydItw';


	var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/streets-v11',
	center: [-1.68,48.12],
	zoom: 12
	});
	// Target the params form in the HTML
	var params = document.getElementById('params');

	// Create variables to use in getIso()
	var urlBase = 'https://api.mapbox.com/isochrone/v1/mapbox/';
	var lon = -1.68;
	var lat = 48.12;
	var profile = 'walking';
	var minutes = 10;


	// Create a function that sets up the Isochrone API query then makes an Ajax call
	function getIso() {
	var query =
	urlBase +
	profile +
	'/' +
	lon +
	',' +
	lat +
	'?contours_minutes=' +
	minutes +
	'&polygons=false&access_token=' +
	mapboxgl.accessToken;

	$.ajax({
	method: 'GET',
	url: query
	}).done(function (data) {
	// Set the 'iso' source's data to what's returned by the API query
	map.getSource('iso').setData(data);
	});
	}

	// Ajout donnees
	map.on ('load', function() {


	// Ajout isochrone
	map.addSource('iso', {
	type: 'geojson',
	data: {
	'type': 'FeatureCollection',
	'features': []}
	});

	map.addLayer(
	{
	'id': 'isoLayer',
	'type': 'line',
	'source': 'iso',
	'layout': {},
	'paint': {
	'line-color': '#000000',
	'line-width': 3
	}
	},
	'poi-label'
	);

	// Ajout pointeur deplacable
	var pointeur_iso = new mapboxgl.Marker({
	'color': '#314ccd', draggable: true
	})
	.setLngLat([-1.68, 48.12, ])
	.addTo(map);

	function onDragEnd() {
	var lngLat = pointeur_iso.getLngLat();
	lat = lngLat.lat;
	lon = lngLat.lng;
	getIso();
	}

	pointeur_iso.on('dragend', onDragEnd);

	// Fonction pour appeler API iso
	getIso();

	});

	// Re-appel API pour changement parametres
	params.addEventListener('change', function (e) {
	if (e.target.name === 'profile') {
	profile = e.target.value;
	getIso();
	}
	else if (e.target.name === 'duration') {
	minutes = e.target.value;
	getIso();
	}
	});
	</script>
	</body>
	</html>