In this example, we will create a custom layer that fetches GeoJSON data from a file. It will display on top of all other layers.
<!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">
<div id="my-custom-map"></div>
<script type="text/javascript">
window.JMAP_OPTIONS = {
projectId: 1,
restBaseUrl: "https://jmapdoc.jmaponline.net/services/rest/v2.0",
anonymous: true,
map: {
containerId: "my-custom-map",
zoom: 9.573700695830425,
center: {
x: -73.7219880403544,
y: 45.53690235213574
}
},
onReady: () => {
JMap.Event.Map.on.mapLoad("my-listener", params => {
const map = params.map;
map.addSource("my-custom-source", {
type: "geojson",
data: "https://data.montreal.ca/dataset/ab112a84-0661-4360-9573-652eed16beeb/resource/a90678ac-7ea7-464c-b615-e8f5cb9f527b/download/rsqa_secteurs.geojson"
});
map.addLayer({
id: "my-custom-layer",
type: "fill",
source: "my-custom-source",
paint: {
"fill-color": "#0080ff",
"fill-opacity": 0.5
}
});
});
}
};
</script>
<script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/jmap-core-js@7_Kathmandu_HF3"></script>
</body>
</html>
