# Start the JMap NG App

You can start JMap NG App in a div of your website, or as a full page application.

<figure><img src="https://2224254070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDUF1p2rT0hfE3QBlbbvE%2Fuploads%2FOx1FDFwUEVsWis8qkRED%2FCapture%20d%E2%80%99e%CC%81cran%2C%20le%202024-05-06%20a%CC%80%2013.27.12.png?alt=media&#x26;token=f53ac9bc-dc52-4815-a9df-261385ce261a" alt="" width="375"><figcaption><p>JMap NG App</p></figcaption></figure>

## Import library and application from CDN

You must import App js files from our CDN links (it will automatically load the JMap Core dependency).

```html
  <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:

```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.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](https://codepen.io/k2-dev/pen/MWraJgm?editors=1000)

```html
<!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](https://codepen.io/k2-dev/pen/qBpORBy?editors=1000)

```html
<!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>
```
