mapbox sample

by kordarei

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset='utf-8' />
    <title>Display a map</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.0.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.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>
  </body>

</html>

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiYWxleDk4OSIsImEiOiJjandzeHdmdjUxeml2NDlvNjRieW4zendlIn0.HR0QsMRdbgYr_i99YxiSCQ';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/alex989/cjwt18jxu1cfc1cpo8tnvmeo2',
  center: [
    21.324141025543213,
    43.585341449772756
  ],
  zoom: 13,
  pitch: 30, // pitch in degrees
	bearing: -30, // bearing in degrees
});

map.on('load', function() {
  map.addLayer({
    "id": "route",
    "type": "line",
    "source": {
      "type": "geojson",
      "data": {
        "type": "Feature",
        "properties": {
          "stroke": "#0080ff",
          "stroke-width": 2,
          "stroke-opacity": 1
        },
        "geometry": {
          "type": "LineString",
          "coordinates": [
            [
            21.339257955551147,
            43.571887629332785
          ],
          [
            21.338292360305786,
            43.573209050420495
          ],
          [
            21.33821725845337,
            43.57364433572431
          ],
          [
            21.338131427764893,
            43.57407184501379
          ],
          [
            21.338002681732174,
            43.57453044251402
          ],
          [
            21.337509155273434,
            43.57549426316533
          ],
          [
            21.337133646011353,
            43.57616271036402
          ],
          [
            21.33666157722473,
            43.5766135194014
          ],
          [
            21.335835456848145,
            43.577289726629374
          ],
          [
            21.335760354995728,
            43.577561761877966
          ],
          [
            21.33572816848755,
            43.578564395467325
          ],
          [
            21.334301233291622,
            43.582372696485095
          ],
          [
            21.334011554718018,
            43.58286231771083
          ],
          [
            21.33344292640686,
            43.58338302162925
          ],
          [
           ...