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
<!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>
