Working with layers

The Felt SDK allows you to add GeoJSON data to your maps from various sources:

• Remote URLs

• Local files

• Programmatically generated GeoJSON data

GeoJSON layers created via the SDK are temporary and session-specific - they're not permanently added to the map and won't be visible to other users.

When creating a GeoJSON layer, you can specify different styles for each geometry type (Point, Line, Polygon) that might be found in the source. Each geometry type will create its own layer. It's important to note that GeoJSON layers added via the SDK have limited capabilities compared to regular Felt layers - they cannot be filtered, nor can statistics be fetched for them.

Creating GeoJSON layers

Use the createLayersFromGeoJson method to add GeoJSON layers to your map. This method accepts different source types depending on where your GeoJSON data comes from.

From a URL

To create a layer from a GeoJSON file at a remote URL:

const layerResult = await felt.createLayersFromGeoJson({
  source: {
    type: "geoJsonUrl",
    url: "https://example.com/data/neighborhoods.geojson",
    // Optional: Auto-refresh every 30 seconds
    refreshInterval: 30000
  },
  name: "Neighborhoods",
  caption: "Neighborhood boundaries for the city", // Optional
  description: "This layer shows the official neighborhood boundaries" // Optional
});

if (layerResult) {
  console.log("Created layer group:", layerResult.layerGroup);
  console.log("Created layers:", layerResult.layers);
}

From a local file

To create a layer from a GeoJSON file on the user's device:

// Assuming you have a File object from a file input
const fileInput = document.getElementById('geojson-upload');
const file = fileInput.files[0];

const layerResult = await felt.createLayersFromGeoJson({
  source: {
    type: "geoJsonFile",
    file: file
  },
  name: "User Uploaded Data"
});

if (layerResult) {
  // Store the layer ID for later reference
  const layerId = layerResult.layers[0].id;
}

From GeoJSON data

To create a layer from GeoJSON data that you've generated or processed in your application. This approach is useful when you need to dynamically generate GeoJSON data based on user interactions or other app states:

const geojsonData = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: [-122.4194, 37.7749]
      },
      properties: {
        name: "San Francisco",
        population: 874961
      }
    },
    // Additional features...
  ]
};

const layerResult = await felt.createLayersFromGeoJson({
  source: {
    type: "geoJsonData",
    data: geojsonData
  },
  name: "Dynamic Points"
});

Styling by geometry type

When creating GeoJSON layers, you can specify different styles for each geometry type that might be found in your data. The SDK will create separate layers for each geometry type:

const layerResult = await felt.createLayersFromGeoJson({
  name: "Styled Features",
  source: {
    type: "geoJsonUrl",
    url: "https://example.com/data/mixed-features.geojson"
  },
  geometryStyles: {
    Point: {
      paint: { 
        color: "red", 
        size: 8 
      }
    },
    Line: {
      paint: { 
        color: "blue", 
        size: 4 
      },
      config: { 
        labelAttribute: ["name"] 
      },
      label: { 
        minZoom: 0 
      }
    },
    Polygon: {
      paint: { 
        color: "green", 
        strokeColor: "darkgreen",
        fillOpacity: 0.5
      }
    }
  }
});

Each style should be a valid FSL (Felt Style Language) style. If you don't specify styles, Felt will apply default styles based on the geometry type.

Deleting layers

To remove a GeoJSON layer:

await felt.deleteLayer("layer-1");

Note that this only works for layers created via the SDK's createLayersFromGeoJson method, not for layers added through the Felt UI.

Refreshing GeoJSON layers

For GeoJSON layers created from URLs, you can set automatic refreshing:

At Creation Time: By setting the refreshInterval parameter when creating the layer. The refreshInterval parameter is optional and specifies how frequently (in milliseconds) the layer should be automatically refreshed from the URL. Valid values range from 250ms to 5 minutes (300,000ms). If set to null or omitted, the layer won't refresh automatically.

const layerResult = await felt.createLayersFromGeoJson({
  source: {
    type: "geoJsonUrl",
    url: "https://example.com/data/realtime-sensors.geojson",
    refreshInterval: 60000  // Refresh every minute
  },
  name: "Live Sensor Data"
});

Manual Refresh: Simply replace the source property of any layer you have created, using the updateLayer method to update the source data.