# SharinPix Map Use Cases
This article aims at demonstrating the common use cases of the [SharinPix Map](https://docs.sharinpix.com/documentation/lightning-web-component/sharinpix-map) component along with the corresponding configuration and examples.
In the following sections, you will learn:
* [How to get started with the SharinPix Map configuration on an object](#getting-started-with-the-sharinpix-map-configuration)
* [How to use the SharinPix Map component on parent and child objects](#using-the-sharinpix-map-on-parent-and-child-objects)
## Getting started with the SharinPix Map configuration
This section demonstrates how to get started with the configuration of the SharinPix Map component on the Account object. Here we will be using the three modes available in the component to configure it as follows:
1. [Load the map data into the component using the Geocode mode](#load-the-map-data-into-the-component-using-the-geocode-mode)
2. [Add polygons and markers to the map using the Edit mode](#add-polygons-and-markers-to-the-map-using-the-edit-mode)
3. [Display the result in the ReadOnly mode](#display-the-result-in-the-readonly-mode)
### Load the map data into the component using the Geocode mode
The **Geocode** mode is usually used to load your map data onto the component. To load the map, you can either make use of pre-defined map data available in a Salesforce field as explained in the following steps or by entering the required address on the map component itself.
To configure the component on a Salesforce object using the **Geocode** mode, follow the steps below:
* Using the object's Lightning Page Builder, drag and drop the SharinPix Map component onto the desired region.
* Next, configure the component as follows:
| Parameters | Description | Is the Parameter Mandatory or Optional |
| ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------- |
| Mode
| Choose Geocode.
| Mandatory |
| Map Type | The type of map to be displayed. Options are:
"roadmap", "satellite", "hybrid", or "terrain".
| Optional |
| Record Id Field API Name
| Enter Id as the value. This value refers to the current record Id.
| Mandatory
|
| Address Field API Name
| Enter the API name of the field storing the address to be used to open the map when no value is available in the field used in the parameter, Map Data Field API Name, described just below.
| Optional
(required only when no value has been provided for the parameter Map Data Field API Name)
|
| Map Data Field API Name
| The API name of the field in which the Google Map data will be stored. If map data are 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.
| Mandatory
|
| Default Zoom Level
| The zoom level. | Optional
|
| 45° tilt on Satellite view
| To enable/disable the option to tilt the map at 45 degrees when switching to the Satellite view.
| Optional
|
| Height
| The height of the Map component.
| Optional
|
* Click the button **Save** when done.
* Then go onto a page record to check the rendering.
%20\(2\).png?alt=media)
{% hint style="success" %}
**Tips:**
* If no data is available in both the **Map Data Field API Name** and **Address Field API Name** parameters, you can still enter your required address on the component itself.
* The changes applied to the map are automatically saved under the **Geocode** mode.
{% endhint %}
### Add polygons and markers to the map using the Edit mode
Now that the map data has been loaded onto the component, you can proceed with the addition of markers and polygons using the **Edit** mode.
To do so, follow the steps below:
* On the object's Lightning Page Builder, change the SharinPix Map component mode's from **Geocode** to **Edit**
* Next, configure the component as follows:
| | |
|---|
| Parameters | Description | Is the Parameter Mandatory or Optional
|
Mode
| Choose Edit.
| Mandatory
|
Map Type
| The type of map to be displayed. Options are:
"roadmap", "satellite", "hybrid", or "terrain".
| Optional
|
Record Id Field API Name
| Enter Id as the value. This value refers to the current record Id.
| Mandatory
|
Address Field API Name
| Enter the API name of the field storing the address to be used to open the map when no value is available in the field used in the parameter, Map Data Field API Name, described just below.
| Optional (required only when no value has been provided for the parameter Map Data Field API Name)
|
Map Data Field API Name
| The API name of the field in which the Google Map data will be stored. If map data are 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.
| Mandatory
|
Edit Record Id Field API Name
| Enter Id as the value. This value refers to the current record Id.
| Mandatory
|
Default Zoom Level
| The zoom level.
| Optional
|
45° tilt on Satellite view
| To enable/disable the option to tilt the map at 45 degrees when switching to the Satellite view.
| Optional
|
Height
| The height of the Map component.
| Optional
|
| Note: The above steps correspond to the basic map configuration under the Edit mode. To use polygons and markers on the map, you will need to configure the parameters below. | | |
Polygon Label Field API Name
| The field API name which contains label for the current polygon.
| Mandatory
(Parameter must be populated and specified field should contain a value in order to draw polygons)
|
Polygon Area Field API Name
| The field API name which will store the total area of the polygon(s) drawn. This field should be populated if polygons are added on the map.
| Mandatory
(Parameter must be populated in order to save drawn polygons)
|
Polygon Options
| Enter the polygon options in JSON object format. An example is given below:
{ "strokeColor": "Green", "strokeOpacity": 0.8, "strokeWeight": 2, "fillColor": "Yellow", "fillOpacity": 0.35, "labelColor": "Red" }
| Optional
|
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.
| Mandatory
(Parameter must be populated and specified field should contain a value in order to add markers)
|
Marker Size
| The size of markers.
| Optional
|
| Marker Options | Enter the marker options in JSON object format. An example is given below:
{ "defaultColor": "#ff4646", "size": 5, "colorFieldApiName": "Color__c", "showLabel": true }
| Optional |
* Click the button **Save** when done.
* Then go onto a page record to check the rendering. The example below depicts a SharinPix Map component in **Edit** mode with polygons and markers applied.
%20\(2\).png?alt=media)
### Display the result in the ReadOnly mode
The **ReadOnly** mode allows users to view the component. No modifications are allowed under this mode.
In this section, we will demonstrate how to configure the map component under the **ReadOnly** mode:
* Using the object's Lightning Page Builder, change the SharinPix Map component mode's from **Edit** to **ReadOnly**.
* Next, configure the component as follows:
| Parameters
| Description | Is the Parameter Mandatory or Optional
|
| ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| Mode
| Choose ReadOnly.
| Mandatory
|
| Record Id Field API Name
| Enter Id as the value. This value refers to the current record Id.
| Mandatory
|
| Map Type
| The type of map to be displayed. Options are:
"roadmap", "satellite", "hybrid", or "terrain".
| Optional
|
| Address Field API Name
| Enter the API name of the field storing the address to be used to open the map when no value is available in the field used in the parameter, Map Data Field API Name, described just below.
| Optional
(required only when no value has been provided for the parameter Map Data Field API Name)
|
| Map Data Field API Name
| The API name of the field in which the Google Map data will be stored. If map data are 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.
| Mandatory
|
| Default Zoom Level
| The zoom level. | Optional
|
| 45° tilt on Satellite view
| To enable/disable the option to tilt the map at 45 degrees when switching to the Satellite view. | Optional
|
| Height
| The height of the Map component.
| Optional |
* Click the button **Save** when done.
* Then go onto a page record to check the rendering. The example below depicts the map component in the **ReadOnly** mode. Here users can visualise the polygon and marker applied previously under the **Edit** mode.
%20\(2\).png?alt=media)
%20\(2\).png?alt=media)
## Using the SharinPix Map on parent and child objects
Modifications made to the SharinPix Map components of a child record can be reflected on the parent record.
This section demonstrates how to configure the map component on the Opportunity (child object) and Account (parent object) objects so that modifications made to the Opportunity's map are reflected on the Account's map. For this configuration, we will:
1. Load the map on the parent object with the desired map data using the **ReadOnly** mode.
2. Use the child's map to add polygons and markers using the **Edit** mode.
To do so, follow the steps below:
* Using the **Account** 's Lightning Page Builder, drag and drop the SharinPix Map component onto the desired region.
* Next, configure the component using the **ReadOnly** mode as explained [here](#display-the-result-in-the-readonly-mode). **Note:** *If the field used in Map Data Field API Name has no value, use the **Geocode** mode to load the map.*
* Once the component added to the **Account** record page, go ahead and add the SharinPix Map component onto the **Opportunity** page record (child record) as follows:
| Parameters
| Description
| Is the Parameter Mandatory or Optional
|
| ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Mode
| Choose Edit.
| Mandatory
|
| Map Type
| The type of map to be displayed. Options are:
"roadmap", "satellite", "hybrid", or "terrain".
| Optional
|
| Record Id Field API Name
| Enter the lookup field API name. In our case the value to be entered is **AccountId**. | Mandatory
|
| Map Data Field API Name
| Enter the same API name of the field in which the Google Map data are stored on the Account (that is on the parent) object.
For example, if the value Map\_data\_\_c was entered in the Map Data Field API Name parameter of the parent's map component, the same value, Map\_data\_\_c, should be inserted here.
| Mandatory
|
| Edit Record Id Field API Name
| Enter Id as the value. This value refers to the current record Id (that is the child record Id).
| Mandatory
|
| Polygon Label Field API Name
| The field API name which contains label for the current polygon.
| Mandatory
(Parameter must be populated and specified field should contain a value in order to draw polygons)
|
| Polygon Area Field API Name
| The field API name which will store the total area of the polygon(s) drawn. This field should be populated if polygons are added to the map.
| Mandatory
|
| Polygon Options
| Enter the polygon options in JSON object format. An example is given below:
{ "strokeColor": "Green", "strokeOpacity": 0.8, "strokeWeight": 2, "fillColor": "Yellow", "fillOpacity": 0.35, "labelColor": "Red" }
| Optional
|
| 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.
| Mandatory
(Parameter must be populated and specified field should contain a value in order to add markers)
|
| Marker Size
| The size of markers. | Optional
|
| Marker Options | Enter the marker options in JSON object format. An example is given below:
{ "defaultColor": "#ff4646", "size": 5, "colorFieldApiName": "Color\_\_c", "showLabel": true }
| Optional
|
| Show Current Record Overlay only | Enable this option to display/hide overlays for the current record. If you want to display all overlays, keep this option unchecked. | Optional
|
| 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.
| Optional
|
| Default Zoom Level
| The zoom level.
| Optional
|
| 45° tilt on Satellite view
| To enable/disable the option to tilt the map at 45 degrees when switching to the Satellite view.
| Optional
|
| Height
| The height of the Map component.
| Optional |
* Click the button **Save** when done.
You can now draw polygons and add markers on the Opportunity's map component. These modifications will be reflected on the Account's map component.
{% hint style="success" %}
**Useful Tips:**
* Polygons and markers can only be added under the **Edit** mode.
* The map component can be added in parent and child records.
* In some cases, users might want to modify the map data and add polygons/markers. To do so, you can add two map components onto your page layout, one in **Geocode** mode to allow map data modification and another one in **Edit** mode to allow addition of polygons and markers.
{% endhint %}