Map card: add steps on changing home location, adding entities and zones (#34999)

Co-authored-by: Franck Nijhof <git@frenck.dev>

source/_dashboards/map.markdown

@@ -10,18 +10,42 @@ related:
     title: Themes
   - docs: /dashboards/cards/
     title: Dashboard cards
+  - docs: /docs/configuration/basic/#editing-the-general-settings
+    title: Edit your home location
+  - docs: /getting-started/presence-detection/
+    title: Getting started tutorial on presence detection
 ---
 
-The map card that allows you to display entities on a map. This card is used on the [Map dashboard](/dashboards/dashboards/#map-dashboard), which is one of the default dashboards.
+The map card allows you to display your home zone, entities, and other predefined zones on a map. This card is used on the [Map dashboard](/dashboards/dashboards/#map-dashboard), which is one of the default dashboards.
 
 <p class='img'>
 <img src='/images/dashboards/map_card.png' alt='Screenshot of the map card'>
 Screenshot of the map card.
 </p>
 
-{% include dashboard/edit_dashboard.md %}
+## Adding the map card to your dashboard
 
-All options for this card can be configured via the user interface.
+1. In the top right of the screen, select the edit {% icon "mdi:edit" %} button.
+   - If this is your first time editing a dashboard, the **Edit dashboard** dialog appears.
+     - By editing the dashboard, you are taking over control of this dashboard.
+     - This means that it is no longer automatically updated when new dashboard elements become available.
+     - Once you've taken control, you can't set this dashboard to update automatically anymore. However, you can create a new default dashboard.
+     - To continue, in the dialog, select the three dots {% icon "mdi:dots-vertical" %} menu, then select **Take control**.
+2. [Add the map card](/dashboards/cards/#adding-cards-to-your-dashboard) to your dashboard.
+3. By default, you see the house {% icon "mdi:house" %} icon on your map. It represents your [home zone](/integrations/zone/#about-the-home-zone).
+   - To change the location of your home, you need to [edit your home's location in the general settings](/docs/configuration/basic/#editing-the-general-settings).
+
+    ![Edit map card settings](/images/dashboards/map_card_config.png)
+4. To learn how to show additional zones on your map, follow the steps on [adding a new zone](/integrations/zone/#adding-a-new-zone-or-editing-zones).
+5. To show other elements on the map, either add them under **Entities**, or use the **Geolocation sources**.
+   - For a description of the options, refer to the [YAML configuration](#yaml-configuration) section. It also applies to the options shown in the UI.
+   - {% icon "mdi:info" %} **Info**: The list of entities shows the device trackers available for your home, such as a mobile phone with the companion app.
+     - If you want to see a trace of the past locations of your entities, you need to define a time frame under **Hours to show**.
+   - For more information about presence detection, refer to the [getting started tutorial on presence detection](/getting-started/presence-detection/).
+
+## Configuration options
+
+All options for this card can be configured via the user interface. For a detailed description of the options, refer to the [YAML configuration](#yaml-configuration) section. It also applies to the options shown in the UI.
 
 ## YAML configuration
 
@@ -42,7 +66,7 @@ geo_location_sources:
   type: list
 auto_fit:
   required: false
-  description: The map will follow moving `entities` by adjusting the viewport of the map each time an entity is updated. 
+  description: The map will follow moving `entities` by adjusting the viewport of the map each time an entity is updated.
   type: boolean
   default: false
 fit_zones:
@@ -60,7 +84,7 @@ aspect_ratio:
   type: string
 default_zoom:
   required: false
-  description: The default zoom level of the map.
+  description: The default zoom level of the map. Use a lower number to zoom out and a higher number to zoom in.
   type: integer
   default: 14 (or whatever zoom level is required to fit all visible markers)
 theme_mode:
@@ -139,4 +163,3 @@ entities:
     focus: false
 hours_to_show: 48
 ```
-