In this example, we will locate and select features on the map, for a given postal code.
In the example dataset, we will use the layer "Places", id=6. We will search on the postal code attribute (CODE_POSTA), and return all places having the given postal code.
Copier <!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;
margin-top: 1rem;
}
</style>
</head>
<body class="jmap_wrapper">
<span>Postal code: </span>
<input placeholder="Enter postal code" id="postalCode" value="H1A 1T9"/>
<button
id="searchButton"
onclick="alert('The map is loading, try again when the map is displayed on screen')">
Search features
</button>
<div id="my-custom-map"></div>
<script type="text/javascript">
const PLACE_LAYER_ID = 6;
let isSearching = false;
window.search = () => {
if (isSearching) {
return alert("Search in progress, please wait");
}
const postalCode = document.getElementById("postalCode").value;
if (!postalCode) {
return alert("Please enter a postal code");
}
isSearching = true;
if (!JMap.Layer.isSelectableById(PLACE_LAYER_ID)) {
JMap.Layer.setSelectabilityById(PLACE_LAYER_ID, true);
}
JMap.Layer.Search
.byAttribute({
layerId: PLACE_LAYER_ID,
attributeName: "CODE_POSTA",
attributeValue: postalCode
})
.then(features => {
console.log("Features", features);
isSearching = false;
if (features.length === 0) {
JMap.Map.Selection.clearLayersSelection([PLACE_LAYER_ID]);
return alert("No feature found !");
}
JMap.Map.Selection.setLayerSelection(PLACE_LAYER_ID, features);
JMap.Map.fitFeatures(features);
})
.catch(error => {
isSearching = false;
console.error("An error occured", error);
alert("An error occured");
});
};
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
}
},
onReady: () => {
JMap.Event.Map.on.mapLoad("my-listener", () => {
document.getElementById("searchButton").onclick = window.search;
});
}
};
</script>
<script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/jmap-core-js@7_Kathmandu_HF3"></script>
</body>
</html> 