Create a Yelp Custom Data Feed with Query Capability

In this tutorial, you will create a custom data feed that uses the Yelp Fusion API to fetch data from Yelp. Click here to access the source code for the provider.

Create a Custom Data App

Complete the following steps to create a custom data app named yelp-data-app.

1. On your development machine, open a command prompt and navigate to a directory where you want your project to be saved.

2. Create the app by running the command: cdf createapp yelp-data-app.

   

3. Verify your app runs by running the command: npm start.

   

4. Once you verify that the app is running, stop it by running the command: ctrl + c.

Create a Custom Data Provider

1. After you've created a custom data app, open a command prompt in the app directory and run the cdf createprovider yelp-data-provider command. This will create a yelp-data-provider directory that includes a project template with boilerplate code.

   

Install required packages

1. In the command prompt, navigate to the providers/yelp-data-provider directory, and run the npm install yelp-fusion command to install a wrapper client for making requests to the Yelp Fusion API.

   

Provide Your Yelp Fusion API Key

1. In the providers/yelp-data-provider/src directory, create a file called yelp-provider-config.json. Enter your Yelp Fusion API Key for the yelp.apiKey field in the yelp-provider-config.json file. The file should look like the following.

   Use dark colors for code blocksCopy

   1
   2
   3
   4
   5
   {
     "yelp": {
       "apiKey": "<generated API key here>"
     }
   }

Code provider logic

1. Write custom data provider code within the Model function in the model.js file. The Model function encapsulates the logic required to access data from Yelp and format it as GeoJSON. Replace the contents of the model.js file with the following code.

   Use dark colors for code blocksCopy

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   const config = require(".yelp-provider-config.json");
   const parseGeoJSON = require("./parseGeoJSON");
   const yelp = require("yelp-fusion");
   const yelpClient = yelp.client(config.yelp.apiKey);
   function Model() {}
   Model.prototype.getData = function(req, callback) {
     yelpClient
       .search({
         categories: "restaurants",
         location: "Redlands"
       })
       .then(response => {
         geojson = parseGeoJSON(response.jsonBody);
         geojson.metadata = { name: [category, "_in_", city].join("") };
         callback(null, geojson);
       })
       .catch(e => {
         callback(e);
       });
   };
   module.exports = Model;

2. Create a new file called parseGeoJSON.js in the src directory to house an export function to parse a Yelp API response as GeoJSON. Add the following code to the file.

   Use dark colors for code blocksCopy

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   module.exports = body => {
     return {
       type: "FeatureCollection",
       features: body.businesses.map(business => {
         return {
           type: "Feature",
           properties: {
             name: business.name,
             category: business.categories[0].title
           },
           geometry: {
             type: "Point",
             coordinates: [business.coordinates.longitude, business.coordinates.latitude]
           }
         };
       })
     };
   };

Parameterize the Provider

The custom data provider makes use of two service parameters, category and city, which can be used to make the provider logic more generic. In this tutorial, you will use the category and city parameters to specify the Yelp category to filter by and the location for returning Yelp results.

1. Add the following code to the top of the getData function in the model.js file.

   Use dark colors for code blocksCopy

   1
   2
   const category = req.params.category;
   const city = req.params.city;

2. Next, modify the object passed as an argument to the yelpClient.search function as follows.

   Use dark colors for code blocksCopy

   1
   2
   3
   4
   5
   6
   7
   yelpClient
     .search({
       categories: category,
       location: city
     })
     .then(/* ... */)
     .catch(/* ... */);

3. At this point, the contents of the model.js should look like the following.

   Use dark colors for code blocksCopy

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   const config = require(".yelp-provider-config.json");
   const parseGeoJSON = require("./parseGeoJSON");
   const yelp = require("yelp-fusion");
   const yelpClient = yelp.client(config.yelp.apiKey);
   function Model() {}
   Model.prototype.getData = function(req, callback) {
     const category = req.params.category;
     const city = req.params.city;
     yelpClient
       .search({
         categories: category,
         location: city
       })
       .then(response => {
         geojson = parseGeoJSON(response.jsonBody);
         geojson.metadata = { name: [category, "_in_", city].join("") };
         callback(null, geojson);
       })
       .catch(e => {
         callback(e);
       });
   };
   module.exports = Model;

4. In the providers/yelp-data-provider/cdconfig.json file, add the following to the serviceParameters array:

   cdconfig.json

   Use dark colors for code blocksCopy

   1 2 3 4 5 6 7 8 9 10 11 11 11 11 11 11 11 11 11 11 11 11 11

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   {
     "name": "yelp-data-provider",
     "arcgisVersion": "12.0.0",
     "parentServiceType": "FeatureServer",
     "customdataRuntimeVersion": "1",
     "type": "provider",
     "editingEnabled": false,
     "properties": {
       "serviceParameters": [
         {
           "key": "category",
   

   Expand

Customize Symbols and Labels

To optionally override the default symbology and add customized feature labels, add the metadata properties renderer and labelingInfo to the geojson.metadata as shown below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
  // code snippet
  geojson.metadata = {
    name: [category, "_in_", city].join(""),
    labelingInfo: [
      {
        "symbol": {
          "kerning": true,
          "color": [214, 75, 75, 255],
          "yoffset": 0,
          "xoffset": 0,
          "haloColor": [211, 211, 211, 255],
          "rotated": false,
          "type": "esriTS",
          "horizontalAlignment": "center",
          "haloSize": 1,
          "angle": 0,
          "text": "",
          "verticalAlignment": "baseline",
          "font": {
            "size": 12.75,
            "family": "Arial"
          }
        },
        "maxScale": 0,
        "repeatLabel": true,
        "where": "category = 'Cocktail Bars'",
        "minScale": 0,
        "labelExpressionInfo": {
          "expression": "$feature[\"category\"]"
        },
        "labelExpression": "[category]",
        "labelPlacement": "esriServerPolygonPlacementAlwaysHorizontal"
      }
    ],
    renderer: {
      "type": "simple",
      "symbol": {
        "type": "esriSMS",
        "style": "esriSMSCircle",
        "color": [255, 0, 0, 255],
        "size": 10,
        "angle": 0,
        "xoffset": 0,
        "yoffset": 0,
        "outline": {
          "color": [0, 0, 0, 255],
          "width": 1
        }
      },
      "label": "",
      "description": "",
      "rotationType": "geographic",
      "rotationExpression": "[Rotation] * 2"
    }
  };
  // code snippet

Now that you've created a Yelp data provider, you're ready to test and deploy it to ArcGIS Server.

Test the Custom Data Provider

13. Open a command prompt and navigate to the yelp-data-app directory.

14. Run the npm start command to start the app.

    

15. Send a GET request to http://localhost:8080/yelp-data-provider/rest/services/FeatureServer/0/query with the header x-esri-service-params and the a value of {"category":"restaurants","city":"Redlands"}. Verify that the custom data provider is returning restaurants in Redlands.

Generate a Custom Data Package File

To deploy the Yelp data provider to ArcGIS Server, you must first package it into a custom data package file (.cdpk).

16. Stop the custom data app if it's running.

17. Open a command prompt and navigate to the yelp-data-app directory.

18. Run the cdf export yelp-data-provider command. This will create a file named yelp-data-provider.cdpk in the yelp-data-app directory.

    

Deploy the Custom Data Feed Package to ArcGIS Server

Once you have a .cdpk file, use it to register the Yelp data provider with ArcGIS Server. Instructions for registering the Yelp data provider through ArcGIS Server Administrator are detailed below, but with ArcGIS Enterprise version 11.3 and higher, you may complete this process with ArcGIS Server Manager or with the CDF CLI tool.

18. In a web browser, navigate to the ArcGIS Server Administrator Directory and sign in as an administrator.

19. Click uploads > upload.

    

20. On the Upload Item page, click Choose File and select the yelp-data-provider.cdpk file. Optionally, provide a description in the Description text box.

    

21. Click Upload. Once the file is uploaded, you will be directed to a page with the following header: Uploaded item - <item_id>. Copy the item id.

    

22. Browse back to the root of the Administrator Directory and then click services > types > customdataproviders.

23. On the Registered Customdata Providers page, click register and paste the item id into the Id of uploaded item field.

    

24. Click Register. When done you will seen something similar to the following.

    

Create a Feature Service

After you've registered the Yelp data provider with ArcGIS Server, you can create a read-only feature service that references the provider and serves data to ArcGIS clients.

25. Browse back to the root of the Administrator Directory and click services > createService.

    

26. On the Create Service page, copy and paste the following JSON into the Service (in JSON format) text box.

    service JSON

    Use dark colors for code blocksCopy

    1 2 3 4 5 6 7 8 9 10 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    {
      "serviceName": "yelpRedlands",
      "jsonProperties": {
        "customDataProviderInfo": {
          "forwardUserIdentity": false,
          "dataProviderName": "yelp-data-provider",
          "serviceParameters": {
            "city": "redlands",
            "category": "restaurants"
          }
        }
    

    Expand

27. Set the category parameter to a Yelp category of your choice. For a list of business categories, see the Yelp Fusion API documentation.

28. Set the city parameter to a location string. The location string can be a valid postal code or city name.

29. Click Create.

Consume the Feature Service

To access the Yelp feature service that you created in the previous section, use the appropriate URL (e.g., https://<domain_or_machine_name>/<webadaptor_name>/rest/services/yelpRedlands/FeatureServer). You can use this URL to consume data from Yelp in ArcGIS clients like ArcGIS Pro, ArcGIS Online, and ArcGIS Enterprise.

You've successfully created a Yelp custom data feed that uses the Yelp Fusion API to fetch data from Yelp.