gatsby-source-arcgis-feature-service

Source plugin for pulling data into Gatsby from an ArcGIS Feature Service via ArcGIS REST API.

Table of Contents

• Features
• Install
• How to use
• How to query
  • Query Geometry
  • Query Geometry Helpers
  • Query Properties
• Site's gatsby-node.js example

Features

• Fetches feature data from an ArcGIS Feature Service

Install

npm install --save gatsby-source-arcgis-feature-service

How to use

// In your gatsby-config.js
plugins: [
  /*
   * Gatsby's data processing layer begins with “source”
   * plugins. Here the site sources its data from an ArcGIS Feature Service.
   */
  {
    resolve: 'gatsby-source-arcgis-feature-service',
    options: {
      // The url of your ArcGIS Feature Service. This is required.
      url: 'https://<catalog-url>/<serviceName>/FeatureServer',

      // A name to identify your feature data. If you have multiple instances
      // of this source plugin, this will allow you to filter features. This is
      // optional.
      name: 'myProject',

      // Set the request parameters to filter the feature data returned from
      // the server. This is optional. The following parameters are the
      // defaults: request all features and fields in GeoJSON format.
      params: {
        f: 'geojson',
        where: '1=1',
        outFields: '*',
      },
    },
  },
]

How to query

You can query nodes created from your ArcGIS Feature Service using GraphQL like the following:

Note: Learn to use the GraphQL tool and Ctrl+Spacebar at http://localhost:8000/___graphql to discover the types and properties of your GraphQL model.

{
  allArcGisFeature {
    nodes {
      id
      type
    }
  }
}

All features are pulled from your server and created as arcGisFeature and allArcGisFeature.

If you provide name as a plugin option, all features include a sourceName field with that value which allows you to filter your features.

{
  allArcGisFeature(filter: { sourceName: { eq: "myProject" } }) {
    nodes {
      id
      type
    }
  }
}

Query Geometry

Geometry data for each feature is provided on the geometry field per the GeoJSON standard.

Geometry data within a feature can vary in object shape due to the different types of geometry (e.g. Point, Polygon, LineString). To ensure all geometry types can be queried reliably, the geometry field is provided as JSON. This means you can query geometry and receive deeper data without explicitly stating its fields.

{
  allArcGisFeature {
    nodes {
      id
      geometry
    }
  }
}

Query Geometry Helpers

Polylabel

Polylabel data is provided on the polylabel field for Polygon features. If a feature is not a Polygon, polylabel will be null.

polylabel is the optimal point within a polygon to place a marker or label provided as a [lng, lat] pair.

See Mapbox's official Polylabel documentation for more details.

{
  allArcGisFeature {
    nodes {
      id
      polylabel
    }
  }
}

If the feature is a MultiPolygon, polylabels for each individual polygon is provided on the multiPolylabels field.

{
  allArcGisFeature {
    nodes {
      id
      multiPolylabels
    }
  }
}

Centroid

Centroid data is provided on the centroid field for all features.

centroid is the mean position of all the points in all of the coordinate directions. If polylabel is unavailable, centroid can be used instead to place a marker or label.

{
  allArcGisFeature {
    nodes {
      id
      centroid
    }
  }
}

If the feature is a MultiPolygon, centroids for each individual polygon is provided on the multiCentroids field.

{
  allArcGisFeature {
    nodes {
      id
      multiCentroid
    }
  }
}

Query Properties

Property data for each feature is provided on the properties field.

The subfields available on this field is determined by the data returned from the ArcGIS Feature Service.

{
  allArcGisFeature {
    nodes {
      id
      properties {
        name
        status
      }
    }
  }
}

Site's gatsby-node.js example

const path = require('path')

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions

  const features = await graphql(`
    {
      allArcGisFeature {
        nodes {
          id
          featureId
        }
      }
    }
  `)

  features.data.allArcGisFeature.nodes.forEach(node => {
    createPage({
      path: `/${node.featureId}`,
      component: path.resolve('./src/templates/feature.js'),
      context: {
        id: node.id,
        featureId: node.featureId,
      },
    })
  })
}