Is there a way that I can connect a polygon format (JS) to a map (HTML)

Question

I'm trying to put a polygon format from Mapbox into the Mapbox map itself (via a Github copy for a project), and I haven't yielded any results.

I did the formatting, using different files, combining them into 1 via a combiner, etc.

Polygon (JS):

map.on('load', () => {
  // Add a data source containing GeoJSON data.
  map.addSource('maine', {
    'type': 'geojson',
    'data': {
      'type': 'Feature',
      'geometry': {
        'type': 'Polygon',
        // These coordinates outline Maine.
        '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
    }
  });
});

Said remaining copies of code are located in https://github.com/AliCodes-Beep/Google-Map-Clone

Is there a way that I can connect a polygon format (JS) to a map (HTML)

0 Answers0