JSFiddle - React, Tailwind, and code Playground

by bulutkartal

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mapbox-gl.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@turf/[email protected]/turf.min.js"></script>
<script src="https://bundle.run/[email protected]"></script>
<div id='map'></div>

CSS

body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiY2hya2kiLCJhIjoid0ZoNy1SZyJ9.X5fpB3ORT1-BSWItzx3Xbw';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v10', //stylesheet location
    center: [-97.7549, 30.2386],
    pitch: 45,
    bearing: 215,
    zoom: 19,
    style: "mapbox://styles/mapbox/streets-v10",
    //scrollZoom: false
});

  map.on('style.load', function() {
    
    // define the geojson source for both the map and the routing functions
    map.addSource('heb-internal', {
      'type': 'geojson',
      'data': geojson
    });
    
    // set up a source for the route, empty for now
    map.addSource('shortest-path', {
      type: 'geojson',
      data: {
        type: 'FeatureCollection',
        features: [
        ]
      }
    });

    // add the empty route to the map
    map.addLayer({
      'id': 'route',
      'type': 'line',
      'source': 'shortest-path',
      'layout': {
            'line-join': 'round'
      },
      'paint': {
            'line-width': 8,
            'line-color': '#ff0000',
      }
    });
    
    // add the building geojson to the map
    map.addLayer({
      'id': 'internal',
      'type': 'fill-extrusion',
      'source': 'heb-internal',
      'layout': {},
      'paint': {
        'fill-extrusion-color': '#088',
        'fill-extrusion-height': ['get', 'height'],
        'fill-extrusion-opacity': 0.8
      }
    });
    
    // set up the route parameters
    var start = {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [-97.75464811,30.23864893]
      }
    }
    var finish = {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [-97.7548391,30.2382504]
      }
    }
        
    var path = pathFinder.findPath(start, finish);
    console.log(path);
    var line = turf.lineString(path.path);
    //var bezier = turf.bezierSpline(line, {...