Is it possible to convert JSFiddle to VSCode format?

73 Views Asked by At

I'm trying to convert my jsfiddle code to VSCode, but I wasn't able to, as copy and pasting + code format editing were not working.

(jsfiddle link in question: https://jsfiddle.net/b2pLmqrj/ )

I've attempted to copy and paste it in, fix the format with tags (script, style, etc), and completely redo it from scratch, but to no avail. Does anyone know what I should fix in it to change it to VSCode format?

HTML:

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

CSS:

body {
  margin: 0;
  padding: 0;
}

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

Javascript:

mapboxgl.accessToken = 'pk.eyJ1IjoiMWRyaXZlYnV5IiwiYSI6ImNsNjN1NjhjejBhZjYzaW44YXN0MzByb3YifQ.mykT1INa7Fbkk4VqIpdM_Q';
const map = new mapboxgl.Map({
  container: 'map', // container ID
  // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
  style: 'mapbox://styles/mapbox/light-v11', // style URL
  center: [-68.137343, 45.137451], // starting position
  zoom: 5 // starting zoom
});

map.on('load', () => {
  // Add a data source containing GeoJSON data.
  map.addSource('maine', {
    'type': 'geojson',
    'data': {
      'type': 'Feature',
      'geometry': {
        'type': 'Polygon',
        // These coordinates outline the United States.
        'coordinates': [
          [
            [-125.15625000000001, 48.04870994288686],
            [-124.71679687499999, 43.32517767999296],
            [-125.15625000000001, 39.639537564366684],
            [-121.11328124999999, 34.59704151614417],
            [-121.11328124999999, 34.59704151614417],
            [-117.158203125, 32.47269502206151],
            [-105.732421875, 31.27855085894653],
            [-97.20703125, 25.64152637306577],
            [-84.287109375, 29.84064389983441],
            [-80.947265625, 24.84656534821976],
            [-74.970703125, 35.38904996691167],
            [-66.62109375, 45.02695045318546],
            [-68.73046875, 47.39834920035926],
            [-71.455078125, 44.84029065139799],
            [-82.880859375, 41.96765920367816],
            [-88.154296875, 48.22467264956519],
            [-109.072265625, 49.03786794532644],
            [-123.134765625, 49.15296965617042],
            [-125.15625000000001, 48.04870994288686],
          ]
        ]
      }
    }
  });

  // Add a new layer to visualize the polygon.
  map.addLayer({
    'id': ' ',
    'type': 'fill',
    'source': 'maine', // reference the data source
    'layout': {},
    'paint': {
      'fill-color': '#0080ff', // blue color fill
      'fill-opacity': 0.2
      
    }
  });
  // Add a black outline around the polygon.
  map.addLayer({
    'id': 'outline',
    'type': 'line',
    'source': 'maine',
    'layout': {},
    'paint': {
      'line-color': '#000',
      'line-width': 0
    }
  });
});
0

There are 0 best solutions below