JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add a polygon to a map using a GeoJSON source</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
	
</script>

</body>
</html>

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiZnJlZGZ4aSIsImEiOiJja2psOTE5YWgwNm1jMnJxcDhmY25qc2gwIn0.VM7P6iTelL_rFnxTkO7LBQ';
const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v10',
  center: [-18, 65],
  zoom: 5
});

map.on('load', () => {

  map.addSource('iceland', {
    'type': 'geojson',
    'data': {
      "type": "FeatureCollection",
      "name": "iceland",
      "features": [{
          "type": "Feature",
          "properties": {
            "id": 2,
            "amount": 0.0
          },
          "geometry": {
            "type": "MultiPoint",
            "coordinates": [
              [-19.066437940952909, 65.200983174594569]
            ]
          }
        },
        {
          "type": "Feature",
          "properties": {
            "id": 1,
            "amount": 10.12
          },
          "geometry": {
            "type": "MultiPoint",
            "coordinates": [
              [-18.504484173595074, 65.229537934958927]
            ]
          }
        },
        {
          "type": "Feature",
          "properties": {
            "id": 3,
            "amount": ''
          },
          "geometry": {
            "type": "MultiPoint",
            "coordinates": [
              [-18.747471443001235, 65.29123978332224]
            ]
          }
        }
      ]
    }
  });



  map.addLayer({
    'id': 'iceland-null',
    'type': 'circle',
    'source': 'iceland', // reference the data source
    'layout': {},
    'paint': {
      'circle-color': 'blue', // blue color fill
      'circle-radius': 10
    },
    filter: ["!=", ["typeof", ["get", "amount"]], "number"]
  });
  
    // Add a new layer to visualize the polygon.
  map.addLayer({
    'id': 'iceland-0',
    'type': 'circle',
    'source': 'iceland', // reference the data source
    'layout': {},
    'paint': {
      'circle-color': 'green', // blue color fill
      'circle-radius': 10
    },
    filter: ["all", 
      ["==", ["typeof", ["get", "amount"]],...