@sitenna/site-navigator NPM

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

@googlemaps/js-api-loader @mapbox/mapbox-gl-geocoder @types/google.maps mapbox-gl preact-render-to-string

@everything-registry/sub-chunk-839

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago