Getting Started

This guide will walk you through setting up and using MapLayr in your web applications.

Installation

To include MapLayr in your HTML page, add a <script> tag:

<script async src="http://cdn.attractions.io/frameworks/maplayr-web/v0.3/maplayr.js"></script>
Copy

The async attribute allows the browser to continue rendering the rest of your content while the script downloads.

Creating a Map Container

Create a container element for your map:

<style>
  #map {
    width: 500px;
    height: 300px;
  }
</style>

<div id="map"></div>
Copy

You can set any dimensions for your container - the map will fill the available space and adjust if the container is resized.

Loading and Displaying a Map

Load your map and attach it to the container:

addEventListener("load", async () => {
  // Wait for the map to be loaded
  const map = await maplayr.Map.managed("YOUR_MAP_ID");
  
  // Attach the map to the container
  const container = document.getElementById("map");
  const mapView = map.attach(container);
});
Copy

Make sure that:

1. The <script> has finished loading before you attempt to load the map
2. Your map container element has been loaded into the DOM before attaching the map to it
3. You have replaced "YOUR_MAP_ID" with your specific map identifier