SDKs overview

Longdo Map provides Software Development Kits (SDKs) and libraries primarily for web-based integration, focusing on its core mapping, geocoding, and routing services within Thailand. The official JavaScript SDK is the primary tool for developers to embed interactive maps and utilize Longdo Map's functionalities in web applications. These SDKs abstract the underlying API calls, simplifying development by providing a higher-level interface for common mapping tasks.

The SDKs are designed to facilitate the display of map tiles, overlay custom markers and shapes, interact with map events, and consume geocoding and routing results directly within a client-side environment. This approach allows for dynamic and responsive map applications without requiring extensive server-side logic for map rendering. Developers can access detailed documentation for the Longdo Map API to understand the full range of available features and endpoints that the SDKs interact with Longdo Map API reference.

While the focus is on a robust JavaScript offering, the underlying APIs can be consumed directly from any language capable of making HTTP requests. However, using the official SDK is recommended for streamlined integration and access to pre-built UI components and utilities. The Longdo Map platform offers various services, including Longdo Geocoding API for converting addresses to coordinates, and Longdo Routing API for calculating directions.

Official SDKs by language

Longdo Map's primary official SDK is developed for JavaScript, enabling web developers to integrate mapping functionalities directly into their browser-based applications. This SDK is maintained by Longdo Map and provides a comprehensive set of tools for map display, interaction, and data overlay. The SDK typically manages map tile loading, event handling (e.g., clicks, zooms), and rendering of geographical data layers.

The JavaScript SDK is designed for direct client-side implementation, reducing the need for server-side map rendering or complex data processing. It exposes classes and methods to initialize maps, add markers, draw polygons, and integrate with other Longdo Map services like geocoding and routing through client-side API calls. The SDK is regularly updated to support new features and improve performance, ensuring compatibility with modern web browsers and standards. For comprehensive information about the JavaScript SDK, refer to the Longdo Map developer documentation.

Official SDK Table

Language Package/Module Maturity Description
JavaScript LongdoMap (global object) Stable Official SDK for web applications, providing map display, controls, and integration with Longdo Map services.

Installation

The Longdo Map JavaScript SDK is typically integrated into web projects by including a script tag in the HTML. This method ensures that the necessary libraries and components are loaded directly from Longdo Map's content delivery network (CDN), simplifying setup and ensuring developers always use the latest stable version of the SDK. No package manager (like npm or yarn) installation is usually required for the core SDK itself, though modern build processes might integrate it differently.

Prerequisites

  • A valid Longdo Map API key, obtainable from the Longdo Map pricing page or dashboard.
  • An HTML file to embed the map.
  • Basic understanding of HTML, CSS, and JavaScript.

Installation Steps

  1. Include the SDK Script: Add the following script tag within the <head> or before the closing </body> tag of your HTML file. Replace YOUR_API_KEY with your actual Longdo Map API key.
    2. <script type="text/javascript" src="https://map.longdo.com/mmmap/mmmap.js?key=YOUR_API_KEY"></script>
  2. Prepare a Map Container: Create a <div> element in your HTML where the map will be rendered. Assign it an ID and define its dimensions using CSS.
    3. <style>
  #map { width: 100%; height: 500px; }
</style>
<div id="map"></div>
  3. Initialize the Map: Write JavaScript code to initialize the map once the DOM is ready. This typically involves calling a function provided by the LongdoMap global object.
    4. <script>
  function init() {
    var map = new longdo.Map({
      placeholder: document.getElementById('map')
    });
  }
  // Ensure the init function runs after the SDK is loaded
  var longdoMapScript = document.createElement('script');
  longdoMapScript.onload = init;
  longdoMapScript.src = "https://map.longdo.com/mmmap/mmmap.js?key=YOUR_API_KEY";
  document.head.appendChild(longdoMapScript);
</script>

For more detailed installation instructions and advanced configuration options, consult the Longdo Map official documentation.

Quickstart example

This quickstart example demonstrates how to embed a basic Longdo Map into a web page, center it on a specific location in Thailand, and add a marker. This snippet illustrates the fundamental steps for initializing the map and adding basic interactive elements using the Longdo Map JavaScript SDK.

HTML Structure

<!DOCTYPE html>
<html>
<head>
    <title>Longdo Map Quickstart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
        #map { width: 100%; height: 100%; }
    </style>
    
    <!-- Longdo Map SDK inclusion -->
    <script type="text/javascript" src="https://map.longdo.com/mmmap/mmmap.js?key=YOUR_API_KEY"></script>
</head>
<body>
    <div id="map"></div>

    <script>
        var map; // Declare map globally or within a scope accessible by other functions

        function initMap() {
            map = new longdo.Map({
                placeholder: document.getElementById('map'),
                // Set initial center to Bangkok, Thailand (latitude, longitude)
                center: { lat: 13.7563, lon: 100.5018 }, 
                zoom: 10 // Set initial zoom level
            });

            // Add a marker at the center of Bangkok
            map.Overlays.add(
                new longdo.Marker({
                    lon: 100.5018, 
                    lat: 13.7563
                })
            );

            // Optional: Add a listener for map clicks
            map.Event.add('click', function(overlay) {
                if (overlay instanceof longdo.Marker) {
                    alert('Marker clicked at: ' + overlay.location.lat + ', ' + overlay.location.lon);
                } else if (overlay instanceof longdo.Location) {
                    alert('Map clicked at: ' + overlay.lat + ', ' + overlay.lon);
                }
            });

            console.log('Longdo Map initialized successfully.');
        }

        // Ensure the initMap function runs after the SDK is fully loaded
        // This pattern handles cases where the script tag might load asynchronously or if placed in head
        if (window.longdo && window.longdo.Map) {
            initMap();
        } else {
            window.onload = initMap;
        }
    </script>
</body>
</html>

Explanation

  • API Key: Replace YOUR_API_KEY in the script URL with your actual Longdo Map API key.
  • Map Container: The <div id="map"> element serves as the placeholder for the map. Its width and height are set to 100% to fill the viewport.
  • initMap() Function: This function is responsible for initializing the map. It creates a new longdo.Map instance, passing the container element and initial map options like center (latitude and longitude) and zoom level.
  • Map Centering: The center property is set to { lat: 13.7563, lon: 100.5018 }, which corresponds to the approximate coordinates of Bangkok, Thailand.
  • Adding a Marker: map.Overlays.add() is used to place a marker on the map at the specified coordinates. This demonstrates how to add custom graphical elements.
  • Event Listener: An optional map.Event.add('click', ...) listener is included to demonstrate how to handle user interactions with the map or its overlays. This particular listener logs the coordinates of a map click or displays an alert if a marker is clicked.
  • Initialization Logic: The script checks if window.longdo.Map is already available. If not, it assigns initMap to window.onload to ensure the map initializes only after the entire page, including the Longdo Map SDK, has fully loaded. This is a common pattern for ensuring that the SDK's global objects are defined before being accessed.

This example provides a foundational understanding of how to get a Longdo Map up and running quickly. Further customization, such as adding more complex overlays, integrating geocoding, or implementing routing, would build upon these basic steps. Developers can find more advanced examples and API details in the official Longdo Map documentation.

Community libraries

As of late 2024, the ecosystem for Longdo Map largely centers around its official JavaScript SDK. While there isn't a wide array of officially recognized or widely adopted third-party community-contributed libraries for different programming languages or frameworks specifically for Longdo Map, developers often integrate Longdo Map functionalities into their applications using standard web development practices.

For server-side interactions, such as calling the Longdo Geocoding API or Longdo Routing API directly, developers typically use standard HTTP client libraries available in their preferred programming language (e.g., Axios in JavaScript, Requests in Python, Guzzle in PHP, OkHttp in Java). These clients facilitate making authenticated requests to the Longdo Map REST API endpoints and processing the JSON responses.

In front-end frameworks like React, Vue, or Angular, developers commonly encapsulate the official Longdo Map JavaScript SDK within components. This involves creating a wrapper component that handles the initialization of the map and exposes its functionalities through props or events, aligning with the framework's reactive patterns. For instance, a React component might use the useEffect hook to initialize the map when the component mounts and clean it up when it unmounts.

While dedicated community wrappers are less prevalent compared to globally popular mapping platforms like Google Maps Platform or Mapbox, the direct inclusion of the JavaScript SDK and standard API consumption methods allow for flexible integration into diverse application architectures. Developers looking for specific integrations or examples might find relevant discussions or code snippets in general web development forums or on platforms like Stack Overflow, though dedicated Longdo Map community resources are more focused on the official documentation. The general principles of integrating third-party JavaScript libraries into modern frameworks (as described by resources like MDN Web Docs on Web Components) are applicable here for creating reusable components.