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.
Copier < 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:
Copier 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
Copier <! 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 : 50 px ;
margin-top : 50 px ;
width : 400 px ;
height : 400 px ;
border : 1 px 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
Copier <! 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 >