span8
span4
span8
span4
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.
Web Map Data (contains web map files, geodatabase and workspace)
The example has several notable features:
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.
I have tried doing this on my own server (2015) and i can get the webpage to load up with a map and i can draw a polygon but the parameters box comes up empty so i can't choose the Theme, CRS or Format and therefore it fails. Can anyone help?
Hi @baznewman07 There are a few reasons this might be happening, but in pretty much all cases, you should be able to see an error message come up if you use the developer tools in your web browser to look at the requests being made by the web app to your Server. If that doesn't help you narrow down the cause, please feel free to contact us at support through www.safe.com/supportrequest and we can help you take a closer look into this.
Laura, i have it working now and i have even managed to use my own map service instead of google or esri. My question for you though, can i use this with the data streaming service too? For example when i hit request can i get the data to be drawn up over the mapping on screen instead of it being put into a download link? This would be really useful if i could.
Hi,
I had this example working with my own data and all working very well. Today the background map for google no longer appears though ESRI option is still showing. Your demo site doesn't seem to have the same issue. Do you know if I need to update the link in the HTML code https://maps.googleapis.com in some way, if I turn on developer tools all the error relate to the googleapis, I haven't changed anything for it to stop working so I don't know where this problem is coming from. Everything else is still working and I can download data I just can not see the background map!
Thank you
Hello,
Are you still having trouble with this? One thing I'd suggest is to try using one of the examples from Google's site to see if that works for you and then compare what is happening in there to what is happening in the page showing errors, that may help to narrow down the cause of the trouble: https://developers.google.com/maps/documentation/javascript/examples/map-simple
Hi All, I'm looking at testing this demo internally with FME2019 server. I don't have a internal webserver set up now so am I able to run the .html file locally or do I need to set up a internal webserver? Thanks!
Hi @yakker. I will try to connect you with a colleague. If I understand correctly, you downloaded the source files for this demo, and completed the steps to configure it to run with your own FME Server installation. However, the issue is that you don't have an internal webserver?
Hi @yakker,
You will need a web server to be able to run this html file as it won't run properly if you open the html file directly. If you just need something to test this, I've found a nice quick and simple way to get an internal web server running temporarily is using Python. Here's some information on that: https://docs.python.org/2/library/simplehttpserver.html
I usually just run the command
python -m SimpleHTTPServer 8000
from the command line in the directory where the html page is located. Then can test it using http:\\localhost:8000 in a web browser.
Create Self-Serve Access to Data with FME Server
Create specific directory structure in the Data Download ZIP file
Including additional files in the data download result zip file
How do I dynamically generate options for a published parameter?
Data download results are not written to the defined directory
Workspace with FMEServerJobSubmitter Fails with Licensing Error
Data Upload Part 2: Custom Pages (2015)
© 2019 Safe Software Inc | Legal