X

Smart Advice. Agile. Personalized. Transparent.

Try Oracle Cloud Platform For Free

How to use a map to set an address location in an interview

Sue Novak
Senior Technical Writer

This example demonstrates how to implement an interview extension that uses a map as an input type to provide an address location. This is done using a control that geo-locates the current user, displays a pin on the map and shows the latitude and longitude of that location.

This functionality can be used in an interview when, for example, the user needs to report the location of an incident which may not be the exact location of the user, and may not be a street address (for instance, in park land).

Prerequisites

This example uses the Google Maps Platform in order to display a Google map in an interview screen. In your Google Cloud Console, you will need:

  1. The Maps JavaScript API to be enabled
  2. The Geocoding API to be enabled
  3. An API key

Create the attributes

This example only requires 3 attributes to be created in your project in Oracle Policy Modeling:

  • a text attribute: the incident address (address)
  • a number attribute: the latitude of the incident location (latitude)
  • a number attribute: the longitude of the incident location (longitude)

The Data tab in Policy Modeling showing the 3 attributes used in this example

Add the custom files to the project

There are 2 custom files that we need for our implementation that can be downloaded in this ZIP. The 2 files are:

  • customMap.js – this is the JavaScript file that provides the customContainer interview extension for the Google map
  • opm.extension.data.json – this is the configuration file that allows the interview extension to access data not collected on a screen (the latitude and longitude of the incident location)

Copy these 2 files into the /interview-theme/resources folder for your project. (This folder is created when you click the Custom Files button in the Styles dialog box on the Interview tab in Policy Modeling.)

Specify the initial map center

In our example, we are going to assume that the user wants to identify a location in their vicinity and therefore start the map centered on their location. For this reason, we are going to add a start screen that captures the user's location. This screen is set to always show.

The Interview tab in Policy Modeling showing the Collect the user's location option selected

Be aware that when the user's location is automatically detected in this way, if the user is using the interview in a web browser, the location will be roughly determined by the geo-location data associated with their IP address. If the user is using a mobile interview, the phone's GPS will be able to accurately determine the latitude and longitude of their address.

Pro Tip! If you don't want to automatically detect the user's location, you can hard-code the latitude and longitude for the center of the map in the JavaScript interview extension file.

Add a screen for the map

In our example, we are going to have a second interview screen that:

  • displays the Google map (where the user will pinpoint the incident address)
  • displays the human-readable address (converted from the latitude and longitude of the selected location)
  • displays the latitude and longitude of the selected location

Let's start with the Google map. You need to:

  1. Add a container control to the screen.
  2. Define the following custom properties for the container control:
    • Key: type; Value: map
    • Key: apiKey; Value: <your API key obtained from the Google Maps Platform>
    • Key: mapHeight; Value: <the height of the map>
    • Key: mapWidth; Value: <the width of the map>
    • Key: mapZoom; Value: <the initial scale at which to display your map>

The Interview tab in Policy Modeling showing the properties settings for the container control

Pro Tip! The values for these properties could instead be specified in the interview extension JavaScript file. They are implemented this way in our example to make it easy to adjust these settings from within Policy Modeling.

Now, let's add some fields for the display of the specified location:

  • Add an input control for 'the incident address'. A single line text box is suitable.
  • Add input controls for 'the latitude of the incident location' and 'the longitude of the incident location'. These can be included as single line text boxes side-by-side in a container control.

The Interview tab in Policy Modeling showing the control for the Incident address on the screen

Test the customization

To test the customization you will need to run the interview in a browser either by using Ctrl+F5 from Policy Modeling or by launching the interview from Intelligent Advisor Hub.

In your browser, the interview should begin with the screen which is (indirectly) capturing the user's location.

The first (Start) screen in the example interview

On the Map screen which is displayed next, you will notice that the map starts out with a pin in the center of the map showing your location. The latitude and longitude of this location are displayed below the map.

The Map screen in the example interview showing the latitude and longitude of the user's location

You can then use your mouse to pinpoint another location on the map (the location of the incident). This position on the map is automatically converted into an address that is displayed in the 'Incident address' field below the map. The latitude and longitude shown are also updated to show the coordinates of the identified location.

The Map screen in the example interview showing the location pinpointed on the map by the user

Further information

If you would like further information on any of the concepts covered in this example, please visit these topics in the Intelligent Advisor Documentation Library:

For further information on the Google Maps Platform, see: https://cloud.google.com/maps-platform

Credits

Walkthrough design and implementation by Robert Surujbhan (Oracle)

Many thanks to Magia Solutions for reviewing this post. 

Join the discussion

Comments ( 1 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.

Recent Content