Difference between revisions of "Web Element: Data"


Line 184: Line 184:
 
</html>
 
</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.10.0/mapbox-gl.js'></script>
 +
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.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>
 +
</head>
 +
 +
<body>
 +
  <!-- Create a container for the map -->
 +
  <div id='map'></div>
 +
 +
  <script>
 +
    // Add your Mapbox access token
 +
    mapboxgl.accessToken = 'pk.eyJ1Ijoia2lsdGVyIiwiYSI6IkEyNkVMb3cifQ.S4BPGK9G2NnoopYXnqAK7g';
 +
    var map = new mapboxgl.Map({
 +
      container: 'map', // Specify the container ID
 +
      style: 'mapbox://styles/mapbox/streets-v11', // Specify which map style to use
 +
      center: [-77.0369,38.895], // Specify the starting position
 +
      zoom: 11.5, // Specify the starting zoom
 +
    });
 +
  </script>
 +
</body>
 +
 +
</html>

Revision as of 12:34, 17 May 2020

<!DOCTYPE html> Get started with the Isochrone API