const addPortsGeoJSONLayer = (ports) => {
  let map = G.map;
  map.loadImage(portIcon, function (error, image) {
    if (error) throw error;
    map.addImage("port-icon", image);
    map.addSource("ports", {
      type: "geojson",
      data: ports,
    });
    map.addLayer({
      id: "ports",
      type: "symbol",
      source: "ports",
      layout: {
        visibility: "visible",
        "icon-image": "port-icon",
        "icon-size": 0.3,

        "text-field": ["get", "port"],
        "text-size": 13,
        "text-anchor": "top",
        "text-offset": [0, 0.8],
        "symbol-placement": "point",
      },
      paint: {
        "text-color": "black",
        "text-halo-color": "#d4eaee",
        "text-halo-width": 1,
        "text-opacity": ["step", ["zoom"], 0, 5, 1],
      },
    });
  });
};