You can start JMap NG App in a div of your website, or as a full page application.
Import library and application from CDN
You must import App js files from our CDN links (it will automatically load the JMap Core dependency).
<script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/jmap-app-js@7_Kathmandu_HF3"></script>
Make sure the version of the library matches the version of your JMap backend (JMap Cloud or JMap Server).
Set library and application options
You have to provide required and optional parameters to the library and the app:
window.JMAP_OPTIONS = {
projectId: 1,
restBaseUrl: "https://jmapdoc.jmaponline.net/services/rest/v2.0",
anonymous: true,
map: {
zoom: 8.468052241302663,
center: {
x: -74.049048172276,
y: 45.53487085859891
}
},
hideMainLayout: true,
application: {
containerId: "my-custom-app"
}
}
}
More information about startup options here
Display the app 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-app {
position: relative;
overflow: hidden;
margin-left: 50px;
margin-top: 50px;
width: 850px;
height: 700px;
border: 1px solid grey;
}
</style>
<title>JMap NG</title>
</head>
<body>
<div id="my-custom-app"></div>
<script type="text/javascript">
window.JMAP_OPTIONS = {
projectId: 1,
restBaseUrl: "https://jmapdoc.jmaponline.net/services/rest/v2.0",
anonymous: true,
map: {
zoom: 8.468052241302663,
center: {
x: -74.049048172276,
y: 45.53583011032552
}
},
hideMainLayout: true,
application: {
containerId: "my-custom-app"
}
}
</script>
<script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/jmap-app-js@7_Kathmandu_HF3"></script>
</body>
</html>
Display the map full screen
Try it out in Codepen.io
<!DOCTYPE html>
<html class="jmap_wrapper">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta charset="UTF-8">
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
</style>
<title>JMap NG</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: 8.035870457975536,
center: {
x: -74.18791345871016,
y: 45.55343159305562
}
},
hideMainLayout: true,
}
</script>
<script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/jmap-app-js@7_Kathmandu_HF3"></script>
</body>
</html
Dernière mise à jour
