Start the JMap NG Core library

Import the library from CDN
Set library options
Display the map in a div
Display the map full screen

You can start JMap NG Core in a div of your website, like this interactive example:

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 backend (JMap Server or JMap Cloud).

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

Show example 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 screen

Show example 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>