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

Try it out in

<!DOCTYPE html>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta charset="UTF-8">
      #my-custom-map {
        width: 600px;
        height: 600px;
        border: 1px solid grey;
  <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: "",
        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 {
              } = 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>`);
    "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 =>;
    "Selected hydrography features", getFeaturesByLayerId(HYDRO_LAYER_ID));
          renderMouseOver: (layer, feature) => {
            /* this method is processed for each feature that has been clicked */
            if ( !== HYDRO_LAYER_ID) {
            return {
              html: `
                <div style="display: flex; flex-direction: column; align-items: center;">
                    Hydro feature id="${}" clicked !
                    onclick="alert('Feature id=${} clicked !')"
                    style="cursor: pointer; border: 1px solid grey; margin: .5rem;">
                    Click me !
    <script defer type="text/javascript" src=""></script>  

Dernière mise à jour

K2 Geospatial 2023