Integrating MazeMap with JS API

Owned by Robert Cox
09 Aug, 2024
3 min read

Summary

This support document provides a high-level guide to integrating MazeMap using the JavaScript API (JS API). It is intended to supplement the official MazeMap JS API documentation by offering a concise overview of the integration process and highlighting key considerations.

For comprehensive details and additional examples, please refer to the official MazeMap JS API documentation and additional resources linked below.

What is Covered in This Document

  • JS API Overview: A brief introduction to the MazeMap JS API and its capabilities.

  • Basic Setup: Instructions on how to include and initialise the MazeMap JS API in your project.

  • Key Features and Customisations: An overview of the main features available through the JS API, including UI customisation, interactivity, and styling.

  • When to Use the JS API: Situations where the JS API is the best choice for your project.

  • Additional Resources: Links to further documentation and examples for advanced usage.

JS API Overview

The MazeMap JS API allows developers to embed and customise interactive maps within their web applications. It provides a flexible and powerful set of tools for creating custom map interfaces, controlling map behaviour, and integrating with other services.

Key Features:

  • Customisable UI Components: Control over map elements such as zoom controls, search boxes, and markers.

  • Interactive Map Elements: Ability to add clickable markers, pop-ups, and dynamic layers.

  • Styling Options: Customise the map’s appearance to match your application's branding.

For more current version, detailed instructions and advanced configuration options, please refer to the official MazeMap JS API Documentation.

Basic Setup

To get started with the MazeMap JS API, follow these steps:

  1. Include the JS API: Add the MazeMap JS API script to your HTML file.

    <link rel="stylesheet" href="https://api.mazemap.com/js/v2.1.2/mazemap.min.css"> <script type='text/javascript' src='https://api.mazemap.com/js/v2.1.2/mazemap.min.js'></script>

     

  2. Initialise the Map: Set up the map container and initialise it with your configuration.

    <script> var map = new Mazemap.Map({ container: 'map', // container id specified in the HTML campuses: 121, // Your specific campus ID center: {lng: 13.270286316716465, lat: 52.502217640505705}, // initial position zoom: 18, // initial zoom zLevel: 3 // initial z level }); </script>

     

Key Features and Customisations

The JS API offers a range of features that can be used to customise the map experience:

  • UI Customisation: Show or hide specific UI components, such as navigation controls and search boxes.

  • Interactive Elements: Add markers, pop-ups, and other interactive components to the map.

  • Map Styling: Customise the look and feel of the map, including map styles and marker designs.

For practical examples and additional customisation options, visit MazeMap JS API Documentation and Examples and MazeMap Additional JS API Examples.

When to Use the JS API

The MazeMap JS API is ideal for projects where:

  • You need to create a custom map interface with specific UI elements.

  • You require interactive features such as clickable markers or custom navigation paths.

  • You want to fully control the map’s behaviour and appearance.

If your project requires minimal customisation, consider using the standard <iframe> embedding method.

Additional Resources

For further guidance and advanced examples, please refer to the following resources:

Conclusion

The MazeMap JS API provides a robust platform for embedding and customising interactive maps within your web applications. This document serves as a high-level introduction, supplementing the official documentation with key points and considerations. For a deeper dive into the API's capabilities, be sure to explore the linked resources.