# Custom mouseover on a layer

The mouseover is a popup window that is displayed after clicking on features on the map.

If no mouseover content is set in the layer configuration, no popup is displayed when clicking on a feature of that layer.

You can set your own mouseover content programatically in Javascript. For instance, you can add a mouseover on a layer that has no mousoever content in its configuration.

In the following example, the layer "Hydrography", id=3, has no mouseover defined.

We will set a custom mouseover content that:

* Always displays a custom header
* Displays the mouseover content for a clicked hydrography feature
* Avoids displaying a mouseover for the "Event" layer (blue dots on the map)
* Always displays a custom footer

## Set the custom mouseover

<figure><img src="/files/hKgtp2DvoCpyQEGbR0QA" alt="" width="375"><figcaption></figcaption></figure>

Try it out in [Codepen.io](https://codepen.io/k2-dev/pen/popjRrr?editors=1000)

```html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta charset="UTF-8">
    <style>
      #my-custom-map {
        width: 600px;
        height: 600px;
        border: 1px solid grey;
      }
    </style>
  </head>
  <body class="jmap_wrapper">
    <div id="my-custom-map"></div>
    <script type="text/javascript">
      const HYDRO_LAYER_ID = 3;
      const PLACE_LAYER_ID = 6;
      window.JMAP_OPTIONS = {
        projectId: 1,
        restBaseUrl: "https://jmapdoc.jmaponline.net/services/rest/v2.0",
        anonymous: true,
        map: {
          containerId: "my-custom-map",
          zoom: 13.797865986918877,
          center: {
            x: -73.48063889179525,
            y: 45.664231577062765
          }
        },
        extensions: [{
          id: "custom-mouseover-extension",
          initFn: () => {
            JMap.Event.MouseOver.on.beforeContentProcessed("My-custom-mouse-over", params => {
              const {
                selection,
                getFeaturesByLayerId,
                addHtmlContentAtTheBeginning,
                addHtmlContentAtTheEnd,
                removeFeaturesFromLayerSelection
              } = params;
              /* this method is processed each time we click on features on the map, even if no mouse-over is defined for a layer */
              /* add a message in the top of the mouseover popup */
              addHtmlContentAtTheBeginning(`<span style="font-size: 1rem">Custom popup header visible for all layers</span>`);
              /* add a message in the bottom of the mouseover popup */
              addHtmlContentAtTheEnd(`<span style="font-size: 1rem">Custom popup footer visible for all layers</span>`);
              console.info("All selected features", { ...selection });
              /* if some place feature has been selected, remove it from the mouseover */
              removeFeaturesFromLayerSelection(PLACE_LAYER_ID, getFeaturesByLayerId(PLACE_LAYER_ID).map(f => f.id));
              console.info("Selected hydrography features", getFeaturesByLayerId(HYDRO_LAYER_ID));
            })
          },
          renderMouseOver: (layer, feature) => {
            /* this method is processed for each feature that has been clicked */
            if (layer.id !== HYDRO_LAYER_ID) {
              return;
            }
            return {
              html: `
                <div style="display: flex; flex-direction: column; align-items: center;">
                  <span>
                    Hydro feature id="${feature.id}" clicked !
                  </span>
                  <button
                    onclick="alert('Feature id=${feature.id} clicked !')"
                    style="cursor: pointer; border: 1px solid grey; margin: .5rem;">
                    Click me !
                  </button>
                </div>`
            };
          }
        }]
      }
    </script>
    <script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/jmap-core-js@7_Kathmandu_HF3"></script>  
  </body>
</html>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.jmapcloud.io/en/jmap-ng/jmap-ng-developer-documentation/examples/custom-mouseover-on-a-layer.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
