# How to add a map to a list or to a show

You can easily add a map to a list or to a show.

**1. Declare your MapConfig**

If you want to add a map inside your list, just add this to your src/Crudit/Config/YourEntityCrudConfig.php

    public function getBrickConfigs(): array
    {
        $brickconfig = parent::getBrickConfigs();
        $indexBricks = [];

        $indexBricks[] = MapConfig::new();

        $brickconfig[CrudConfigInterface::INDEX] = $indexBricks;

        return $brickconfig;
    }

It is also possible to add a map to a tab:

    public function getTabs(): array
    {
        return [
           "yourentity.tab.map" => MapConfig::new()
        ];
    }

**2. Customise your map**

You can add these parameters inside MapConfig::new():

- zoom (default 6)
- lat (default 46)
- lng (default 2.5)
- geojsons (default null)
- editable (default false): allows you to move the marker directly on the map
- edit_route
- with_marker (default true)
- cssClass
- lat_field
- lng_field
- poly_field

Here is an example of a MapConfig with its options:
    
    MapConfig::new([
            "with_marker" => 0,
            "cssClass" => "col-8",
            "geojsons" => [
                [
                    "libelle" => "Site de collectes",
                    "url" => "/api/site_collecte/poly.json",
                    "popup_url" => "/api/site_collecte/popup/"
                ],
                [
                    "libelle" => "Points de collectes",
                    "url" => "/api/point_collecte/points.json",
                    "icon" => [
                        "iconUrl" => '/img/icons/tree_outline.svg',
                        "iconSize" => [32, 32] // size of the icon
                    ],
                    "popup_url" => "/api/point_collecte/popup/"
                ]
            ]
        ]);


**3. Customise your Leaflet popup**

If you want to apply the style of the app to the Leaflet popup, just add this to your template (the path placed into "popup_url" in MapConfig)

    {{ encore_entry_link_tags('app') }}
    <div>
        ... Your template ...
    </div>
