Tips and Tricks

• Add a Google Maps Layer to a map - show the Traffic, Transit or Bicycling layer on the map
• Faceted Search - integrate the map with Faceted Search
• Geocode Search - find an address on the map
• Hide the Info Window - programmatically hide the info window that pops up when the user clicks a pin
• Move the PL/SQL to the database - may improve performance on page load
• Zoom to user's current location - get the location of the user's device

Add a Google Maps Layer to a map

This overlays a Google Maps Layer on the map, e.g.

• Traffic: red lines where traffic is currently heavy
• Transit: the public transport routes
• Bicycle: bicycle routes

Pre-requisites:

• You have installed plugin region_type_plugin_com_jk64_report_google_map_r1 to the application
• You have set a valid Google Maps API Key

Instructions:

1. Add a JK64 Report Google Map plugin region to a page

2. Give the region a static id, e.g. mymap

3. Add a Dynamic Action to the region

   Event = mapLoaded [JK64 Report Google Map R1]

   Selection Type = Region

   Region = (your map region)

4. Add a True Action

   Action = Execute Javascript Code

   Code (for traffic layer) =

       var lyr = new google.maps.TrafficLayer();
       lyr.setMap(this.data.map);
   

   Code (for transit layer) =

       var lyr = new google.maps.TransitLayer();
       lyr.setMap(this.data.map);
   

   Code (for bicycle layer) =

       var lyr = new google.maps.BicyclingLayer();
       lyr.setMap(this.data.map);
   

   Fire On Page Load = No

For more details, and sample code, check out the DEMO.

Faceted Search

To integrate a facet search region with the map, you must manually add suitable predicates to the SQL Query used for the map, and add a dynamic action to refresh the map whenever the user changes a facet filter.

1. Add a classic report to the page with the SQL query used for the map.

2. Add a Faceted Search region to the page, linked to the classic report. Add one or more facets, e.g. P1_STATE. Note that a facet item based on a Checkbox Group may be set to multiple values; these will be represented in colon delimited form, e.g. 'WA:NSW:VIC'

3. On the ReportMap plugin region, add predicates to the SQL Query so that it only shows pins that match the facet criteria. For example:

   select l.lat, l.lng, l.name, l.id
   from mylocations l
   where (instr(':' || :P1_STATE || ':', ':' || l.state || ':') > 0
          or :P1_STATE is null);
   

   The form of the predicate may differ depending on the type of facet used.

4. On the ReportMap plugin region, add each facet item to the Page Items to Submit, e.g. P1_STATE.

5. On the Faceted Search region, add a Dynamic Action on the event Facets Change that runs the Refresh action on the map region.

If you wish to hide the classic report region (i.e. just show the Faceted Search and the map regions):

1. Set the Static ID attribute on the classic report region, e.g. reportHidden

2. Set the page CSS Inline to #reportHidden { display: none; } using the static ID used for the report

Geocode Search

PRE-REQUISITE: to use Geocoding you must enable the Geocoding API on your Google Cloud Platform project. Read "Getting started" at https://developers.google.com/maps/documentation/javascript/geocoding to enable the Geocoding API.

In this example, we have a Country list (which is used to set the Country attribute), a Search field (which is set on the Geocode Item attribute) and an Address item (which is set on the Address Item attribute).

If the user enters an address or location in the Search field, the map will pan to and zoom to the selected location. If Country was set, the search will be limited to that country (Note: the Country field refreshes the page on change). If the user clicks on the map, the (closest) address will be copied into the Address field.

For more details, and sample code, check out the DEMO.

Hide the Info Window

When a user clicks a pin that has associated Information text, an info window pops up. If they click elsewhere on the map or on another pin, the window is removed.

To remove the info window programmatically, execute the following javascript:

var m = $("#map_mymap").reportmap("instance");
if (m.infoWindow) m.infoWindow.close();

(replace mymap with the Static ID of your map region).

Move the PL/SQL to the database

By default when you install the plugin, the PL/SQL code for it is loaded into your APEX application. This is convenient but it means it is compiled at runtime whenever the page is refreshed, which may cause a small reduction in performance.

It is recommended to move the PL/SQL to the database. To do this, follow these steps:

1. Get the file src/jk64reportmap_r1_pkg.sql from the repository and run it to compile the package on your database. This needs to be in the schema linked to your workspace.

2. Edit the plugin.

   • Remove the contents of PL/SQL Code

   • Change Callbacks - Render Procedure/Function Name to:

     jk64reportmap_r1_pkg.render
     

   • Change Callbacks - AJAX Procedure/Function Name to:

     jk64reportmap_r1_pkg.ajax
     

Zoom to user's current location

You can have the map automatically show the user's current location, using either the action plugin, or your own custom JavaScript.

1. Method #1: use the action plugin

   This is the simplest method. You need to have installed the JK64 Report Google Map R1 Action plugin.

   Add a dynamic action to execute two actions:

   On the first action, set the Action to Go to Device Location (geolocate).

   On the second action, set:

   • Action = Set Option
   • Option = Zoom level
   • Source Type = Static Value
   • Value = 15

2. Method #2: use custom javascript

   Add a dynamic action to execute the following javascript (this example assumes the region static ID is mymap):

   $("#map_mymap").reportmap("geolocate");
   $("#map_mymap").reportmap("instance").map.setZoom(15);
   

This will smoothly pan the map to the user's current location (if known) and zoom to the specified zoom level.