SharinPix Map
Getting Started
In order to use the SharinPix Map component, you will first need a Google API Key.
Once your Google API key is ready, you will have to set the key in SharinPix.
To do so:
Go to the SharinPix Settings tab
Then enter your Google API key inside the Google API key text box
Click Save when done
To use the SharinPix Map component on record pages, simply drag and drop the component from the Lightning App Builder onto your page layout.
Lightning Component Parameters
Mode: The mode of the Map component. The values available are ReadOnly, Geocode, and Edit.
The ReadOnly mode allows users to display the map. The map cannot be edited using this option. However, it can be explored by zooming in/out or moving around.
The Geocode mode allows users to edit the map configuration. The modifications made while using this mode are saved automatically. It includes position, zoom and all other display mode
The Edit mode allows users to annotate the map by drawing polygons on it. When using this mode, values in fields Edit Record Id Field API Name and Polygon Label Field API Name are required to specify which polygons the user is editing/creating.
Map Type: The type of map to be displayed.
Record Id Field API Name: The record Id field API name of the parent object. The default value is Id.
Address Field API Name: The API name of the field containing the address to be used to open the map when the Map Data Field value is not yet available. It is ignored otherwise. Note: For the address to be taken into account and applied to the map, the map should be set to the Geocode mode and the Map Data Field API Name should be empty.
Map Data Field API Name: The API name of the field in which the Google Maps data will be stored. If map data is available in the field, the map will open to the same data stored. In this case, the value stored in the field Address Field API Name will be ignored.
Edit Record Id Field API Name: The record Id field API name of the child object. This becomes handy when using different records (Buildings as an example), each having its own polygon. This parameter is only used when in Edit mode.
Polygon Label Field API Name: The field API name which contains label for the current polygon. This parameter is only used when in Edit mode.
Polygon Area Field API Name: The field API name which will store the total area of the polygon(s) drawn. Note:
This field should be populated if polygons are added on the map
The area stored is computed in square meters
Polygon Options: The polygon's appearance. The value entered in this field should be in a JSON format as demonstrated in the example below:
{ "strokeColor": "Green", "strokeOpacity": 0.8, "strokeWeight": 2, "fillColor": "Yellow", "fillOpacity": 0.35, "labelColor": "Red", "fontSize": "14px" }
Marker Label Field API Name: The field API name containing the current marker's label. To view the marker's label, simply hover over a marker.
Marker Size: The size of markers. The default value is 'Small'.
Marker Options: The marker's appearance. The value entered in this field should be in a JSON format as demonstrated in the example below:
{ "defaultColor": "#ff4646", "size": 5, "colorFieldApiName": "Color__c", "showLabel": true }Note: When the size key is added the value specified in the JSON, the Marker Size parameter is not taken into consideration.Show Current Record Overlay only: Option to display/hide overlays for the current record. If you want to display all overlays, keep this option unchecked.
Show Overlay Type: The type of overlay to be displayed, that is either polygons or markers only or both. The values available for this field are polygon and marker.
If you want to display only polygons, enter polygon as value for the field
If you want to display only markers, enter marker
To display both polygon and marker overlays, enter polygon, marker
Please note that under the Edit mode, all overlays are displayed by default. Therefore, the value entered in the field Show Overlay Type will be ignored.
Default Zoom Level: The zoom level. The values available range from 1 to 20. It is only used at the first load and ignored when Map Data are saved.
45° tilt on Satellite view: Used to enable/disable the option to tilt the map at 45 degrees when switching to the Satellite view.
Height: The height of the Map component.
Demo
The image below depicts the SharinPix Map component on a record page:
The image below shows polygons drawn on the SharinPix Map component:
The image below shows polygons drawn on the SharinPix Map component having the badge options:
Google Maps Prerequisites
Prior to using the SharinPix Map component, you should ensure that you have your Google Cloud Platform project already set up and that the following APIs have been activated:
Geocoding API
Maps JavaScript API
Places API
If you have not created a project yet, you can do so by following the steps below:
Log into Google Cloud Platform
Create a new project by entering the keywords Create a Project in the search bar
Click on Create a Project and enter your project details:
Click on Create when done
Next, open the newly-created project by using the down arrow located on the top left corner:
This action will open a modal listing all your projects. Select the desired project and click on OPEN:
Once you are on the right project, set up your API key by following the steps below:
From the left menu bar, click on Credentials
Then click on + CREATE CREDENTIALS followed by API key:
Enter your API key and click on CLOSE when done:
Once your project has been created, go ahead and activate the 3 required APIs.
To activate the APIs, follow the steps below:
Using the search bar, look for Geocoding API. Then, click on ENABLE as demonstrated below:
Repeat the above for the APIs Maps JavaScript API and Places API:
Google Maps Pricing
SharinPix makes use of the APIs listed below:
Maps JavaScript API (under the Maps section) An API call is made for the Maps JavaScript API each time a map is displayed/modified.
Geocoding and Autocomplete APIs (under the Places section) API calls are made for these each time an address is typed in the Map in Geocode mode.
