Start the JMap NG Core library
You can start JMap NG Core in a div of your website, or as a full page application.
Import the library from CDN
To use the JMap NG Core library, simply import the JMap NG Core Javascript library from our CDN link.
<script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/jmap-core-js@7_Kathmandu_HF3"></script>
Make sure the version of the library matches the version of your JMap Server instance.
Set library options
You have to specify options to the library:
window.JMAP_OPTIONS = {
projectId: 1,
restBaseUrl: "https://jmapdoc.jmaponline.net/services/rest/v2.0",
anonymous: true,
map: {
containerId: "my-custom-map",
zoom: 9.757829447748511,
center: {
x: -73.60243569463414,
y: 45.504533166207324
},
scaleControlVisible: true,
scaleControlPosition: "top-right"
}
}
More information about startup options here
Display the map in a div
Try it out in Codepen.io
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta charset="UTF-8">
<style>
#my-custom-map {
margin-left: 50px;
margin-top: 50px;
width: 400px;
height: 400px;
border: 1px solid grey;
}
</style>
<title>JMap Core</title>
</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: 8.702330187924481,
center: {
x: -73.71123535973672,
y: 45.565083749787306
},
scaleControlVisible: true,
scaleControlPosition: "top-right"
}
}
</script>
<script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/jmap-core-js@7_Kathmandu_HF3"></script>
</body>
</html>
Display the map full page
Instead of running JMap NG Core inside a DIV, you can start it directly in the body of the web page for a full page experience.
Try it out in Codepen.io
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta charset="UTF-8">
<title>JMap Core</title>
</head>
<body>
<script type="text/javascript">
window.JMAP_OPTIONS = {
projectId: 1,
restBaseUrl: "https://jmapdoc.jmaponline.net/services/rest/v2.0",
anonymous: true,
map: {
zoom: 9.01995956737214,
center: {
x: -73.69369778619411,
y: 45.50946387970188
}
}
}
</script>
<script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/jmap-core-js@7_Kathmandu_HF3"></script>
</body>
</html>
