> For the complete documentation index, see [llms.txt](https://docs-jmapserver-lima.k2geospatial.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-jmapserver-lima.k2geospatial.com/e/developer/jmap-ng-developer-manual/examples/start-the-jmap-ng-app.md).

# 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="/files/bpDqWrVIlYZfNeK3OrPZ" 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>
```
