npm package: @sitenna/site-navigator
Description: Web component used to embed Sitenna's site navigator map on client websites.
Latest version: 1.3.0


# Sitenna Site Navigator Component

This is a web component built using StencilJS. It is a component that allows to embedded a Sitenna map on your website and display your sites on it. It will also allow people to make enquiries about your sites and send a message through the Sitenna Platform.

## Using this component

### Script tag

- Put a script tag similar to this `<script type='module' src='https://unpkg.com/@sitenna/site-navigator@latest/sitenna-site-navigator.esm.js'></script>` in the head of your index.html
- Then you can use the element anywhere on your website, for example in your template, JSX, html etc.

### Html tag
- Once the script has been loaded for the component, it can be used as a html tag. For example 

```html
<html>
  <head>
    <script type='module' src='https://unpkg.com/@sitenna/site-navigator@latest'></script>
  </head>
  <body>
    <sitenna-site-navigator></sitenna-site-navigator>
  </body>
</html>
```

- if you wish to use a fixed version of the component, you can replace `@latest` with the version number. For example `https://unpkg.com/@sitenna/site-navigator@@1.0.0`. However 
  it is recommended to use `@latest` as this will ensure that you are always using the latest version of the component.

### Passing properties to the component

- The component will need to be passed properties in order for it to work properly.
- The list of properties that can be passed to the component are as follows:
  - `api-key`: This is the api key that is used to authenticate the user. **This is the only required property** in order for the component to work.
  - `api-endpoint`: This is the api endpoint that is used to make the api calls. This is not required and will default to `api.sitenna.com`. Only change this value if you are instructed to do so.
  - `app-url`: This is the url of the app that is used to login. This is not required and will default to `app.sitenna.com`. Only change this value if you are instructed to do so.
  - `latitude`: This is the latitude of the center of the map. This is not required and will default to `40.7`. Change this to center the map on a different location.
  - `longitude`: This is the longitude of the center of the map. This is not required and will default to `-74.5`. Change this to center the map on a different location.
  - `zoom`: This is the zoom level of the map. This is not required and will default to `9`. Change this to zoom in or out of the map.
  - `max-zoom`: This is the maximum zoom level of the map. This is not required and will default to `20`. Change this to zoom in or out of the map.
  - `min-zoom`: This is the minimum zoom level of the map. This is not required and will default to `3`. Change this to zoom in or out of the map.

- An example of how to pass properties to the component is as follows:

```html
<html>
  <head>
    <script type='module' src='https://unpkg.com/@sitenna/site-navigator@latest'></script>
  </head>
  <body>
    <sitenna-site-navigator
      api-key="YOUR_API_KEY"
      api-endpoint="api.sitenna.com"
      app-url="app.sitenna.com"
      latitude="40.7"
      longitude="-74.5"
      zoom="9"
      max-zoom="20"
      min-zoom="3"
    ></sitenna-site-navigator>
  </body>
</html>
```