thedges / PSMapComponents

Variety of map/GIS related demo components

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

PSMapComponents

THIS SOFTWARE IS COVERED BY THIS DISCLAIMER.

This package includes variety of map/GIS related demo components:

  • PSObjectSearch - component to search records on object and display in map and table
  • PSRelatedListMap - component to plot on map location of child records based on parent record
  • PSRecordLocator - component to plot on map current location of record; also can move map and set current location
  • PSAccessTracker - invisible component to capture the latitude/longitude (and optionally, street address) of person accessing the record
  • PSFlowMap - component to add to Flow screen to get address details and lat/lng for a defined point on map.

Installation:

Dependency: Install the LightningStrike.io and PSCommon packages first

Deploy to Salesforce

Post-installation:

  • If using the PSObjectSearch, make sure your user profile has access to the PSObjectSearchController apex class.
  • If using the PSRecordLocator, make sure your user profile has access to the PSRecordLocatorController apex class.
  • If using the PSFlowMap, make sure your user profile has access to the PSFlowMapController apex class.
  • If using the PSRelatedListMap, make sure your user profile has access to the PSRelatedListMapController apex class.

PSObjectSearch

The following is example of the component showing cases.

alt text

  • Creates a lightning component with main purpose to show records on a map. It has 3 primary sections:
    • A configurable section for filtering the data
    • A map section for showing records on a map with pin popup
    • A table section that provides a sortable/paginated table of results
  • This component can be dropped on any sobject
  • If you don't want the map section to show, set the SObject Field for Latitude and SObject Field for Longitude values to blank.
  • If you don't want the table section to show, set the SObject Fields to Show in Table value to blank.
  • The component configuration fields are:
Parameter Description
SObject To Map the API name of the sobject to filter data on
Title of Map Section the title to use at the top of the component
Filter Button Label the label for the search button
SObject Fields to Filter On comma separated list of field API names to provide search/filter capabilites; currently only supports text and picklist fields
SObject Fields to Show in Table comma separated list of field API names to show as columns in the table; if you leave this field blank then table will not show
CSV list of radius values (miles) comma separated list of radius values in miles; put * next to value you want to be the default; if you don't want to search by radius, just set to blank value
SObject Field for Latitide the field API name for the latitude value.
SObject Field for Longitude the field API name for the longitude value
Map Center Latitude the default latitude value for centering the map
Map Center Latitude the default longitude value for centering the map
Map Zoom Level the default map zoom level; default: 11
SObject Field for Map Icon the field API name for returning a URL to the icon image; use a formula field and generate a full URL to a static resource file image; look at the example MapIcon__c field on case object for example. An example formula for this field is shown below in the section titled "Map Marker Formula"
SObject Field For Marker HTML the field API name for returning an HTML string to be used in the map pin pop-up; the string can be any HTML formatted string; look at the example MarkerHTML__c field on case object for example (notice the use of the '@ID@' string that is used for href link. This will be replaced with correct URL link to record if used in community or LEX). An example for this formula field is shown in the Demo Tips section below. This shows a formula field that returns a text string with HTML markup. The HTML has header section with details for a case and then generates a table of key: value parameters
Height of map in pixels the height of the map
Only show records that have geolocation true/false value to determine if only records that have lat/lng values are shown or if all values matching the filter criteria are shown
My Record Fields comma separated list of field API names that contain the current user id you want to filter on; used to filter for "My Records"; example string values would be "OwnerId" or "OwnerId,ContactId"
Additional Where Clause static where clause statement to be added to query to filter records

Community Guest User (Non-auth)

If the PSObjectSearch component is being used in community and you want to configure access to guest users, here are a few items to check if records do not show when you do a search:

  • Under Security > Sharing Settings, set the 'Default External Access' to the object you are mapping to some value other than Private
  • Under Security > Sharing Settings, check to see if 'Secure guest user record access' is checked. If this is checked, you have a couple options to make sure guest user has access to records:
    • Uncheck this setting, which should allow you to get access to records. This will allow access to records as you configured in first step (ex: if set to Public Read Only then you will have access to all records)
    • Leave the option checked and create sharing rule on the object your are mapping and select "Guest user access, based on criteria". You will need to create a criteria-based sharing rule to provide access to the records. If you just want to share all records, just create a criteria rule that evalues to true for all records (ex: "CaseNumber not equal to 0")
  • Lastly, a quick option to give guest user access to all records is edit the PSObjectSearchController class and change the class declaration use "without sharing" clause. The 1st line in class would be global without sharing class PSObjectSearchController {

Map Marker Formula

The following is sample for the MapMarker formula field. This shows a formula field that returns a URL to a static resource file (named "CaseType") that is a zip of image files. Based on the case type, a different image file URL will be returned. The first line of the formula generates the base of the URL and will generate correct URL if used internally or in a community.

LEFT($Api.Partner_Server_URL_260, FIND( '/services', $Api.Partner_Server_URL_260)) & 
CASE( Type, 
"Animal Control", "resource/CaseType/OneCityAnimalInactive.png", 
"Events", "resource/CaseType/OneCityEventsInactive.png", 
"General Inquiry", "resource/CaseType/OneCityGeneralInactive.png", 
"Licensing and Permitting", "resource/CaseType/OneCityPermitInactive.png", 
"Noise", "resource/CaseType/OneCityNoiseInactive.png", 
"Public Works", "resource/CaseType/OneCityPublicWorksInactive.png", 
"Street and Traffic", "resource/CaseType/OneCityStreetInactive.png", 
"resource/CaseType/OneCityNoTypeInactive.png")

Demo Tip

Reminder that the map pin display is controlled by a field on the object you are displaying records for. By default when you install this component, it installs a formula field on the Case object called "MarkerHTML__c". This field is configured to return a string that includes HTML markup. Using standard formula field functionality, you can include record field values in this formula field to include in the HTML displayed when you click on a map pin.

So one good example to extend this field is providing driving directions to the user to the choosen pin location. This is easily accomplished by added an HTML anchor tag () to the formula field string and build an HTML link to load Google directions in another window.

  '<h3><a href=\"@ID@\">[' +  CaseNumber  + '] ' + Subject + '</a></h3>' +
                            '<table><tr><td valign="top" style="padding-right: 10px">' +
                            '</td><td>' +
                            '<br/><b>Type:</b> ' + TEXT(Type) + 
                            '<br/><b>Status:</b> ' + TEXT(Status) + 
                            '<br/><b>Priority:</b> ' + TEXT(Priority) +
                            '</td></tr></table>' +
'<br/><a href="https://www.google.com/maps/dir/?api=1&destination=' +  TEXT(Location__Latitude__s)  + ',' +  TEXT(Location__Longitude__s)  + '" target="_blank" style="text-decoration:none;color:#47b055;">Driving Directions</a>'

The main section of code to refer to is last part that starts with <a href="https://www.google.com/maps/dir/?api=1&destination... which build a Google Directions URL that includes directions to the latitude/longitude of the pin you select. When the pin is clicked on, it will show a window like the following example that has the "Driving Directions" link in green.

alt text

Once you click on the Driving Direction link, it launches a new window with driving directions to the pin location:

alt text

PSRecordLocator

Use this component to drop on record to show current location. You can move map to new location and component will do a reverse address lookup based on location of crosshair. Click on address at bottom of window to set the record lat/lng and address fields. The following is example of the map component on a record.

alt text

  • Features of the component:
    • If lat/lng location already exists on record, it will center on that location
    • Move the map to new location and address will show in bottom of map. Click on address location and it will set fields on the record. Address will disappear once you have set it.
    • A "find me" icon will show in top-right of map. This icon shows once the component captures your current lat/lng location. Just click this to move to your current location.
  • The component configuration fields are:
Parameter Description
SObject Field For Latitude SObject field that stores the latitude value
SObject Field For Longitude SObject field that stores the longitude value
SObject Field For Full Address SObject field that stores full address in one value
SObject Field For Street SObject field that stores the street
SObject Field For City SObject field that stores the city
SObject Field For State SObject field that stores the state
SObject Field For Postal/Zipcode SObject field that stores postal code
Map Center Latitude Default latitude for center of map
Map Center Longitude Default longitude for center of map
Map Zoom Level Default map zoom level
Height of map in pixels Height of map in pixels

PSRelatedListMap

Use this component on a "parent" object to map all child records of a specific object type. The following is example of this map component on a record showing list of child records in map in top-right side.

alt text

  • Features of the component:
    • Will load all child records for sobject configured and plot them on map.
    • Will create custom icon and pop-up text based on MapIconField and mapMarkerField configuration settings
    • A "find me" icon will show in top-right of map. This icon shows once the component captures your current lat/lng location. Just click this to move to your current location.
  • The component configuration fields are:
Parameter Description
SObject API Name of Child Object the API name of the child sobject to plot the related child records
SObject Field For Parent Id the field API name of the parent master-detail/lookup field
SObject Field for Latitide the field API name on child object for the latitude value.
SObject Field for Longitude the field API name on child object for the longitude value
Map Center Latitude the default latitude value for centering the map
Map Center Latitude the default longitude value for centering the map
SObject Field for Map Icon the field API name on child object for returning a URL to the icon image; use a formula field and generate a full URL to a static resource file image; look at the example MapIcon__c field on case object for example
SObject Field For Marker HTML the field API name on child object for returning an HTML string to be used in the map pin pop-up; the string can be any HTML formatted string; look at the example MarkerHTML__c field on case object for example (notice the use of the '@ID@' string that is used for href link. This will be replaced with correct URL link to record if used in community or LEX)
Map Zoom Level Default map zoom level
Height of map in pixels Height of map in pixels

PSAccessTracker

The following is example of the component logging lat/lng and address to child object.

alt text

  • Features of the component:
    • Just drop the component on a record page and configure it's properties
    • When someone accesses the record, it will capture the current lat/lng of the user and store in the related child object. If address field exists, it will also perform reverse geocode and store the address.
  • The component configuration fields are:
Parameter Description
Child SObject API Name To Update The child SObject API name to add current geolocation to
Child SObject Field API Name (Parent) The child SObject field API name to the parent object (lookup or master-detail field)
Child SObject Field API Name (Latitude) The child SObject field API name to store latitude
Child SObject Field API Name (Longitude) The child SObject field API name to store longitude
Child SObject Field API Name (Address) The child SObject field API name to store full address (optional: leave blank if you don't need address)

PSFlowMap

The following is example of the component in Flow UI Screen being used to retrieve address details and lat/lng for a defined point on map. Refer to the "Test PSFlowMap" sample flow for usage.

alt text

  • Features of the component:
    • Just drop the component on a Flow UI screen and configure it's properties
    • When setting up the component properties, make sure to set the properties marked (input/output) in both locations. This is needed if you go back in the flow to provide the values so that the PSFlowMap component and show the correct point on the map. This is needed because the PSFlowMap component reloads when you go backwards in flow.
  • The component configuration fields are:
Parameter Description
Height of map in pixels The height in pixels for the map component in the Flow UI screen (input only)
Map Center Latitude The latitude to center the map on initial load (input only)
Map Center Longitude The longitude to center the map on initial load (input only)
Map Zoom Level The default map zoom level on initial load (input only)
City The city value of the point on the map (input/output)
Full Street Address The full street address of the point on the map (input/output)
Latitude The latitude of the point on the map (input/output)
Longitude The longitude of the point on the map (input/output)
Map Label The label to place in bottom-right of the map (input only)
Postal The postal/zipcode of the point on the map (input/output)
Re-center on current location Center on users current location when demoing: true or false (input only)
State The state of the point on the map (input/output)
Street The street of the point on the map (input/output)

About

Variety of map/GIS related demo components


Languages

Language:JavaScript 84.9%Language:Apex 13.8%Language:CSS 1.3%