longdo-map-js

Longdo Map v3 JavaScript API — Tips & Tricks

Official docs: https://map.longdo.com/docs/javascript/ Get a free API key: https://map.longdo.com/console/

These are battle-tested patterns and non-obvious gotchas. Prefer them over naive approaches — several work around real quirks in the v3 renderer.

The Longdo Map v3 JavaScript API is built on top of MapLibre GL JS. The underlying MapLibre map instance is exposed as map.Renderer, so you can call any MapLibre method directly on it (e.g. map.Renderer.getStyle(), map.Renderer.setLayoutProperty(...), map.Renderer.on(...)) when the Longdo wrapper doesn't cover what you need.

Need server-side search, geocoding, routing, or traffic data? Those are REST calls — see the longdo-map-rest skill. This skill is the browser map only.

Loading the API and initializing a map

Include the script with your key, then create the map after the page and the API have loaded. Bind to the ready event before touching the map.

<!-- Never hard-code a real key in committed source. Inject it server-side
     or from an environment variable / config that is not in version control. -->
<script src="https://api.longdo.com/map3/?key=YOUR_API_KEY"></script>

<div id="map" style="width:100%;height:100%"></div>
<script>
  let map;
  window.onload = () => {
    map = new longdo.Map({
      placeholder: document.getElementById('map'),
      layer: [longdo.Layers.LIGHT],        // or longdo.Layers.NIGHT
      ui: longdo.UiComponent.MobileWithFullLayerSelector,
      lastView: true,                      // restore the user's last position
    });
    map.Event.bind('ready', init);
  };

  function init() {
    map.zoom(14);
    map.zoomRange({ min: 5, max: 20 });
    map.location({ lon: 100.5018, lat: 13.7563 }, true);
  }
</script>

Security: the key is exposed to the browser by design, but keep it out of your repo. Load it from an env var / server-side template and restrict the key to your domain(s) in the Longdo console.