> ## Documentation Index
> Fetch the complete documentation index at: https://docs.evidence.studio/llms.txt
> Use this file to discover all available pages before exploring further.

# Map

> Display an interactive map

<img src="https://mintcdn.com/evidence/Z2CIIsynbphd2HX3/images/components/map/map.png?fit=max&auto=format&n=Z2CIIsynbphd2HX3&q=85&s=40bb7db3ec9cdc8a0215c48393d81563" alt="Basic Map" width="1000" height="600" data-path="images/components/map/map.png" />

```liquid theme={null}
{% map %}
{% /map %}
```

## Examples

### Basic Map

<img src="https://mintcdn.com/evidence/Z2CIIsynbphd2HX3/images/components/map/map.png?fit=max&auto=format&n=Z2CIIsynbphd2HX3&q=85&s=40bb7db3ec9cdc8a0215c48393d81563" alt="Basic Map" width="1000" height="600" data-path="images/components/map/map.png" />

```liquid theme={null}
{% map %}
{% /map %}
```

### Map with Title

<img src="https://mintcdn.com/evidence/Z2CIIsynbphd2HX3/images/components/map/example-1.png?fit=max&auto=format&n=Z2CIIsynbphd2HX3&q=85&s=1f2f1e4e97366cd24cec800f785dfe7c" alt="Map with Title" width="1000" height="664" data-path="images/components/map/example-1.png" />

```liquid theme={null}
{% map title="Sales by Region" %}
{% /map %}
```

### Custom Height

<img src="https://mintcdn.com/evidence/Z2CIIsynbphd2HX3/images/components/map/example-2.png?fit=max&auto=format&n=Z2CIIsynbphd2HX3&q=85&s=0666986b3d6947170d007f858af07cda" alt="Custom Height" width="1000" height="1000" data-path="images/components/map/example-2.png" />

```liquid theme={null}
{% map height=500 %}
{% /map %}
```

### Custom Zoom Level

<img src="https://mintcdn.com/evidence/Z2CIIsynbphd2HX3/images/components/map/example-3.png?fit=max&auto=format&n=Z2CIIsynbphd2HX3&q=85&s=58630157fd46734cde230f72dfb5f57d" alt="Custom Zoom Level" width="1000" height="600" data-path="images/components/map/example-3.png" />

```liquid theme={null}
{% map zoom=10 %}
{% /map %}
```

### Map with Choropleth Layer

<img src="https://mintcdn.com/evidence/Z2CIIsynbphd2HX3/images/components/map/example-4.png?fit=max&auto=format&n=Z2CIIsynbphd2HX3&q=85&s=15cb2349486e795e6f6a997f9aa47752" alt="Map with Choropleth Layer" width="1000" height="600" data-path="images/components/map/example-4.png" />

````liquid theme={null}
```sql east_coast_states
    select 'Maine' as state, 1362359 as population union all 
    select 'New Hampshire', 1377529 union all 
    select 'Vermont', 643077 union all 
    select 'Massachusetts', 7029917 union all 
    select 'Rhode Island', 1097379 union all 
    select 'Connecticut', 3605944 union all 
    select 'New York', 20201249 union all 
    select 'New Jersey', 9288994 union all 
    select 'Pennsylvania', 13002700 union all 
    select 'Delaware', 989948 union all 
    select 'Maryland', 6177224
```

{% map %}
    {% area_layer
        geography="us_states"
        match_by="name"
        data="east_coast_states"
        area_id="state"
        value="population"
    /%}
{% /map %}
````

### Map with Point Layer

<img src="https://mintcdn.com/evidence/Z2CIIsynbphd2HX3/images/components/map/example-5.png?fit=max&auto=format&n=Z2CIIsynbphd2HX3&q=85&s=4d6564f56c3364cc3d7cdf95d984bad0" alt="Map with Point Layer" width="1000" height="664" data-path="images/components/map/example-5.png" />

````liquid theme={null}
```sql us_stores
select 40.7128 as lat, -74.0060 as lng, 1250000 as sales union all
select 34.0522, -118.2437, 980000 union all
select 41.8781, -87.6298, 875000 union all
select 29.7604, -95.3698, 720000 union all
select 33.4484, -112.0740, 650000 union all
select 39.9526, -75.1652, 590000 union all
select 29.4241, -98.4936, 480000 union all
select 32.7157, -117.1611, 520000 union all
select 32.7767, -96.7970, 810000 union all
select 37.3382, -121.8863, 690000 union all
select 30.2672, -97.7431, 560000 union all
select 47.6062, -122.3321, 920000
```

{% map title="Store Locations" %}
    {% point_layer
        data="us_stores"
        lat="lat"
        lng="lng"
        color_value="sales"
        color_palette=["#feedde", "#fdd0a2", "#fdae6b", "#fd8d3c", "#e6550d", "#a63603"]
    /%}
{% /map %}
````

### Map with Heatmap Layer

```liquid theme={null}
{% map title="Activity Density" %}
    {% heatmap_layer
        data="events"
        lat="latitude"
        lng="longitude"
        weight="event_count"
    /%}
{% /map %}
```

## Attributes

<ResponseField name="title" type="string">
  Title to display above the map
</ResponseField>

<ResponseField name="subtitle" type="string">
  Subtitle to display below the title
</ResponseField>

<ResponseField name="info" type="string">
  Information tooltip text (can only be used with title)
</ResponseField>

<ResponseField name="info_link" type="string">
  URL to link the info text to (can only be used with info)
</ResponseField>

<ResponseField name="info_link_title" type="string">
  Create a custom link title for the info link, placed after the info text (can only be used with info\_link)
</ResponseField>

<ResponseField name="height" type="number" default="300">
  Height of the map in pixels
</ResponseField>

<ResponseField name="initial_position" type="array">
  Initial map center position as \[latitude, longitude]. Overrides auto-zoom to data bounds
</ResponseField>

<ResponseField name="zoom" type="number">
  Zoom level (0-22, where higher is more zoomed in). When provided without initial\_position, centers on data at this zoom level. When provided with initial\_position, uses this zoom at that position
</ResponseField>

<ResponseField name="zoomable" type="boolean" default="true">
  Allow users to zoom in/out on the map
</ResponseField>

<ResponseField name="pannable" type="boolean" default="true">
  Allow users to pan/drag the map
</ResponseField>

<ResponseField name="base_style" type="string" default="mono">
  Base map style: "mono" for theme-aware monochrome basemap, "blank" for solid background only

  **Allowed values:**

  * `mono`
  * `blank`
</ResponseField>

<ResponseField name="projection" type="string" default="flat">
  Map projection: "globe" for 3D globe view, "flat" for 2D flat map

  **Allowed values:**

  * `globe`
  * `flat`
</ResponseField>

<ResponseField name="legend" type="boolean" default="true">
  Show legends for map layers
</ResponseField>

<ResponseField name="legend_location" type="string" default="bottom_right">
  Location of the legend within the map

  **Allowed values:**

  * `top_left`
  * `top_right`
  * `bottom_left`
  * `bottom_right`
</ResponseField>

<ResponseField name="width" type="number">
  Set the width of this component (in percent) relative to the page width
</ResponseField>

## Allowed Children

* [area\_layer](/components/area_layer)
* [point\_layer](/components/point_layer)
* [heatmap\_layer](/components/heatmap_layer)
