# Geo Mapping

{% hint style="info" %}
*<mark style="color:green;">Pre-requisite:</mark>* *Please configure the* [***Geo Shape***](https://docs.bdb.ai/7.6/core-platform/platform-administration/admin-panel-options/configurations/geo-spatial#geo-shapes) *settings for **Polygone** and **Line** Geometry type before using them inside the Map chart component of the Designer.*
{% endhint %}

{% hint style="success" %}
*Check out the walk-through given below on how to map the Polygone Geometry type with Leaflet Map charting component in the Designer.*
{% endhint %}

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FwlxAk9BCOL5jf6GLQyih%2FGeo%20shape%20for%20leaflet.gif?alt=media&#x26;token=5d65a239-73f8-4c4b-8a63-13a4697e2260" alt=""><figcaption></figcaption></figure>

* Drag and drop the ***Map Chart*** component.
* Create a connection for associating with a chart.

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2Fn2VPANmyvu5e0lmmwpKY%2Fimage.png?alt=media&#x26;token=e9eb8e23-510e-485e-935a-4100c8df5a04" alt=""><figcaption></figcaption></figure>

* Navigate to the **General properties**
* Change the **Map Type** to ***Leaflet***.

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FnD1geddhDU6l8sDIotEK%2Fimage.png?alt=media&#x26;token=d75033fe-de1f-4293-87a5-258d9b5d202f" alt=""><figcaption></figcaption></figure>

* There are following geometry types under the **Leaflet** map for which the user needs to perform the following steps:

  * Line
  * Polygone

  ​

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FnuxG9jLYC5s8CmRyr3Np%2Fimage.png?alt=media&#x26;token=3b8aeec8-8cdc-499d-b853-6377e6e48a02" alt=""><figcaption><p><em>Available Geometry types for Leaflet</em></p></figcaption></figure>

## **Line Type**

* Navigate to the ***Geometry Type*** and select the ***Line***.

![](https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FLXp8P2bK9JjvYCBWRJhz%2Fimage.png?alt=media\&token=2d896099-c0e3-4a26-a9cc-ab2ebb3cf7d3)​

* Associate category and series fields to the chart.
* Use SDK method in dashboard script pane to fetch the ***Line shape file*** JSON which is configured in Admin Module.

```javascript
sdk.getWidget( 'map1' ).m_shapedetails.filename = "Line shape file";
```

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FpfCSu65DQntiTfo2ZG8L%2Fimage.png?alt=media&#x26;token=157a20b6-c60d-4db8-a955-08819c8acb9c" alt=""><figcaption></figcaption></figure>

* Preview the Dashboard to view line-type geometry.

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2Fjif8A7puRU8BY98njP79%2Fimage.png?alt=media&#x26;token=0ef3ba67-7d74-4e97-baac-92992f6dd7c3" alt=""><figcaption></figcaption></figure>

## **Polygon Type**

* Navigate to ***Geometry Type*** and select ***Polygon***.

![](https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2Fm9krRAPPrd8QYKGcwlcq%2Fimage.png?alt=media\&token=da71acd7-050b-4010-8158-569071f48175)​

* Associate category and series fields to the chart.

![](https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2F36FELcBweNWHi7Qy5H7f%2Fimage.png?alt=media\&token=1ac6a955-f9f6-4a2d-890a-bf73ebbee2c6)

* Use an SDK method in dashboard script pane to fetch the ***Line shape file*** ***JSON*** which is configured in the ***Admin Module***.

```javascript
sdk.getWidget( 'map1' ).m_shapedetails.filename = "Polygon shape file";
```

* Preview the dashboard to view the polygon-type geometry.