Waygo.js

This is the reference documentation for all objects and methods available in Waygo.js - Waygo's JavaScript library for building web maps and apps using Waygo's interactive maps. With Waygo.js, you can embed Waygo maps into a web page or client application, customize map style, graphics, animations, data layers and map behavior, and get full search and routing functionality.

import waygomaps from 'waygo-maps';

waygomaps.setApiKey('89gn9NpS0M0a0c12mKmdh0NV-0agxon0aygNA_oaaHL');
const mapView = new waygomaps.MapView({
    container: 'map',
    sourceId: `ACCOUNT_ID.MAP_ID.MAP_VIEW_ID`,
    defaultControls: true,
    floor: 0
});

Domain restrictions

For enhanced security, Waygo.js is configured to work only on domains that have been explicitly authorized. Before embedding a map onto a webpage, please email support@waygomaps.com (at least 24 hours in advance) with the root domain URL to be authorized. We will add your domain to our allowlist, enabling the library to function properly on your webpage.

For example, if your website is https://example.com, we'll need to authorize this domain before the map can be embedded and displayed correctly.

Installation

In order to use Waygo.js, you need to install the library either using npm or the CDN. Choose the option that best fits your needs. Additionally, you'll need a valid API key to utilize the library and load any maps.

Option 1: Using the CDN (Vanilla JavaScript, HTML, etc.)

Add the following script and link tags to the head of your HTML file. The CSS file is required to display the map and its components properly.

<script src="https://cdn.jsdelivr.net/npm/waygo-maps@1.1.9/dist/bundle.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/waygo-maps@1.1.9/dist/style.css">

Now, you can use the Waygo.js library to create a map view and add it to your webpage. Add the following code to the body of your HTML file:

waygomaps.setApiKey("3wUV12HDX-9wMWl99pXpwSYBP4XXdPe7gCm8E3FK_CI");
const map = new waygomaps.MapView({
  container: 'map',
  sourceId: 'c9d01414d1594f12b50d90bac9d4b3fb.expo-expo-2024.PmemisplTIOErumFETKoYw',
  defaultControls: true
});

Option 2: Using npm (React, Vue, Angular, Module Bundlers, etc.)

Install the Waygo.js library using npm. The --save flag is optional, but it's recommended to save the package to your project's dependencies.

npm install --save waygo-maps

In addition to the package download via npm, you'll also need to include the package's CSS file in the head of your HTML file. The CSS file is required to display the map and its components properly.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/waygo-maps@1.1.9/dist/style.css">

Now, you can import the Waygo.js library into your project and configure it with your API key. After that, you can use the library to create a map view and add it to your webpage.

import waygomaps from 'waygo-maps';

waygomaps.setApiKey('89gn9NpS0M0a0c12mKmdh0NV-0agxon0aygNA_oaaHL');
const mapView = new waygomaps.MapView({
    container: 'map',
    sourceId: `${account_id}.${map_id}.${map_view_id}`,
    defaultControls: true,
    floor: 0
});