Data Distribution with Web Maps

Safe Software has announced plans to deprecate the FME Server JavaScript API. Please review the JavaScript API Deprecation notice for updates.

The FME Server Playground is also scheduled for permanent removal. Content may be removed from the website without notice. Moving forward, interactive FME demos will be accessible from www.engage.safe.com/demos.

Live Demo using Google Maps - ArcGIS Server Maps | Download Data

Overview

This example demonstrates the FME Server Data Download service and the power of integrating it with web maps such as Google Maps and ArcGIS Server. This example application provides an interface for the user to select a study area by drawing a polygon. Once the polygon is drawn, the user can continue building up a request by selecting the layers they wish to download and the format and the coordinate system of the returned data. The request is then sent to FME Server which processes it and returns the data to the user.

How it Works

The example has several notable features:

• The form allowing the user to set the published parameters is dynamically generated using the REST API. If any of the parameters are updated in the workspace then the changes will be reflected in the code automatically.
• The web mapping service used for the background is determined by a parameter in the URL (map=google or map=arcgis).
• The background map drawing code allows the users to draw a polygon of their area of interest, the application passes the polygon back to FME Server and the data is clipped to the exact shape.
• When selecting parameters the request which is to be sent to FME Server is displayed in the bottom panel.
• The workspace used in this example allows the end user to control the following published parameters:
  • Coordinate System
  • Geographic Extent
  • Format
  • Layers

Try it Yourself

The workspace and all of the code is available for download from GitHub.

After you download the source files for this demo, you will need to complete the following steps to configure it to run with your own FME Server installation.

1. Upload the source dataset

Log into the FME Server Web User Interface, browse to the Resources menu, then to the data folder within the Resources. Once there, click Upload in the upper right corner and select the transit.gdb geodatabase.

Upload the Transit.gdb to the Data folder under Resources in FME Server

If you are using Chrome, choose the option to 'Upload Folder' and upload the Transit.gdb dataset. If you do not have access to Chrome, put the Transit.gdb dataset into a zip file first, then choose the option to 'Upload File' and upload the zip file with Transit.gdb inside.

2. Change source parameters in the DataDownloadService.fmw workspace

In FME Workbench, open the DataDownloadService.fmw, which can be found within the fme folder in the downloaded files.

Open up the Feature Reader parameters, and adjust the dataset to point to the Transit.gdb file that you uploaded to FME Server.

If you uploaded the dataset as a folder, change the path to the following:

$(FME_SHAREDRESOURCE_DATA)Transit.gdb 

If you uploaded a zip file containing the geodatabase, use the following path instead:

$(FME_SHAREDRESOURCE_DATA)<zipfileName>.zip/Transit.gdb  

FeatureReader parameters, ensure the Dataset is set to $(FME_SHAREDRESOURCE_DATA)Transit.gdb (or the zip file variation)

3. Publish to FME Server

Save the changes made to the workspace, then click File > Upload to FME Server. In the Publish to FME Server wizard, set your connection parameters, see this article for information on how to do this.

On the second page of the Publish to Server dialog, select a repository and name for the workspace you are publishing. Take note of the repository and workspace name you use as you will need this information when changing the javascript files in Step 6.

Complete the Publish to Server wizard making sure to register the workspace with the Data Download Service and the Job Submitter Service.

4. Move Directory Files

Copy the ‘www’ folder from the download package to a web-accessible ROOT location. It can be hosted by a web server like IIS or Apache. Additionally, you could make use of a service like Amazon S3 to host the page. To learn more about web hosting and FME server check out this article.

Note: If you are using FME Server on premises, you can host the web page from its web server root directory. Although this method isn’t recommended for security reasons, it is an easy way to get this demo up and running while a more secure method is developed. Copy the ‘www’ folder into <FMEServerDir>/Utilities/tomcat/webapps/ROOT/.

5. Set up an FME Server Token

We need to set up an FME Server Token to be able to connect the javascript with an FME Server. To create a token go to the FME Server Web User Interface, and in the top right corner, click on your username to open the menu drop-down then select Manage Token.

In the Manage Token dialog, click on New Token to open up the parameters, enter your Username and Password, then change your duration to however long you would like this token to be active, for this example, the token is set to 30 days. You can then also choose to reuse the token, this is a good idea if you have already created a token and are using it somewhere else. For more information on FME Server Tokens visit the documentation . Copy this Token for use in Step 7.

Create and copy a FME Server Token for use in Step 7

6. Modify the Javascript to point to your repository and workspace

Open the following file as an Administrator in a text editor: \www\js\datadistribution.js Ensure that you are opening it from the ROOT folder hosted by your web server.

Under the dataDist function, change the repository and workspaceName variables to point to your own FME Server installation.

Change the repository and workspaceName to reflect your workspace information

7. Modify the Javascript to point to your FME Server and Token

Next, we will modify the dataDist.init function parameters. Comment out (by adding // before each line) or delete the following 3 lines if you would like to use your own FME Server parameters:

Comment out or delete the JSON lines that run our live demo to input your own parameters

Then un-comment (delete //) to enable the following 3 lines, then modify the Server and Token variables to reflect your FME Server name and the Token that was copied in Step 5.

When you first download the this data, this section of code will be commented out, remove the // to make it live.

8. Save the changes

Save the changes you made to datadistribution.js, if you get an error when saving the javascript file, ensure that you opened your text editor as an Administrator.

9. Set up CORS (only if using your own web server to host)

You only need to complete this step if you are using your own web service (Apache, IIS, S3) to host your demo. Back in the FME Server Web User Interface on the side menu bar, click on CORS. Once you are on the Configure Cross-origin Resource Sharing (CORS) page, in the top right corner click on Load Template, then click on Allow All Hosts. For the more advanced user, you can set up Specific Hosts.

Set up CORS in FME Server if you are hosting your web map on an external server.

10. Run the demo

To run the live demo, enter the following URL into a web browser and input your FME Server name:

Google Maps Background:

http://<yourServerHost>/www/index.html?map=google  

Esri ArcGIS Background:

http://<yourServerHost>/www/index.html?map=arcgis 

Note: This URL assumes that you copies the entire ‘www’ folder to your web service, change the URL accordingly if the folder or file names were changed.

Troubleshooting

If you load the demo and do not see your parameters, or nothing happens when you create a polygon. Double check that you loaded the demo using the URL and not by just opening the HTML file. If you opened the demo correctly, right-click anywhere on the page and open the Developer Tools/Inspect, then check the Console for any error messages, usually, it is just a case of CORS not being set up correctly.

Check your URL or the Developer Console to determine why your parameters are not working.

More Information About Deploying Websites

A Simple Web Application Architecture Using GitHub, AWS S3, Deploy, and FME Cloud

Data Attribution

The data used here originates from open data made available by the City of Vancouver , British Columbia. It contains information licensed under the Open Government License - Vancouver.