Leaflet Latlong Map and API Wrapper

A Leaflet wrapper with built-in Latlong authentication for raster map tiles and API suite.

• LLMap - A wrapper to add Latlong Maps raster tile layers to Leaflet.
• LLApi - A wrapper to access Latlong APIs. API Documentation

Installation

npm install leaflet-latlong-maps leaflet

Peer dependency: leaflet >= 1.9.0

Authentication

This library uses JWT-only authentication. Generate a JWT on your server using your client credentials, then pass it to the frontend.

{ jwt: 'your-jwt-token' }

If you do not have credentials to generate a JWT, please Sign Up to create an account.

Latlong Map Tiles

To access Latlong map tiles use LLMap or createLLMap with the sample examples below.

Option 1: Async Factory (recommended)

createLLMap returns a promise that resolves once the map is fully loaded. No callbacks needed.

import { createLLMap, L } from 'leaflet-latlong-maps';
import 'leaflet-latlong-maps/styles.css';

const llmap = await createLLMap(
  { jwt: 'your-jwt-token' },
  { container: 'map', latitude: 12.9716, longitude: 77.5946, zoom: 12 }
);

// Safe immediately
L.marker([12.9716, 77.5946]).addTo(llmap.instance);
llmap.instance.flyTo([12.9352, 77.6101], 14);

Option 2: Class with load callback

import { LLMap, L } from 'leaflet-latlong-maps';
import 'leaflet-latlong-maps/styles.css';

const llmap = new LLMap(
  { jwt: 'your-jwt-token' },
  { container: 'map', latitude: 12.9716, longitude: 77.5946, zoom: 12 }
);

llmap.on('load', () => {
  L.marker([12.9716, 77.5946]).addTo(llmap.instance);
  llmap.instance.flyTo([12.9352, 77.6101], 14);
});

How to use Leaflet functions

L.marker([12.9716, 77.5946]).addTo(llmap.instance);
L.circle([12.9716, 77.5946], { radius: 500 }).addTo(llmap.instance);
llmap.instance.flyTo([12.9352, 77.6101], 14);

Config Options

| Option | Type | Default | Description | |-----------|-----------------------|----------------|-------------------------------------| | container | string | HTMLElement | (required) | Element or ID to mount the map into | | latitude | number | 12.9716 | Map center latitude | | longitude | number | 77.5946 | Map center longitude | | zoom | number | 4 | Initial zoom level | | minZoom | number | 0 | Minimum zoom level | | maxZoom | number | 22 | Maximum zoom level | | tileUrl | string | (raster) | Custom tile layer URL | | baseUrl | string | apihub URL | Base URL for tile API |

LLMap API

| Member | Type | Description | |--------------|----------|--------------------------------------------------| | instance | property | The underlying Leaflet Map instance (after load) | | isReady | property | Whether the map has finished loading | | on('load') | method | Register a callback for when the map is ready | | destroy() | method | Remove the map and clean up | | logout() | method | Clear stored token + destroy map |

React Example

import { useEffect, useRef, useState } from 'react';
import { LLMap, L } from 'leaflet-latlong-maps';
import 'leaflet-latlong-maps/styles.css';

function MapView({ token }: { token: string }) {
  const containerRef = useRef<HTMLDivElement>(null);
  const llmapRef = useRef<LLMap | null>(null);
  const [mapReady, setMapReady] = useState(false);

  useEffect(() => {
    if (!containerRef.current || llmapRef.current) return;

    const llmap = new LLMap(
      { jwt: token },
      { container: containerRef.current, latitude: 12.9716, longitude: 77.5946, zoom: 10 }
    );

    llmap.on('load', () => {
      llmapRef.current = llmap;
      setMapReady(true);
      llmap.instance.on('click', (e) => console.log('Clicked:', e.latlng));
    });

    return () => {
      llmap.destroy();
      llmapRef.current = null;
    };
  }, [token]);

  return <div ref={containerRef} style={{ width: '100%', height: '100vh' }} />;
}

LLApi

import { LLApi } from 'leaflet-latlong-maps';

const api = new LLApi({ jwt: 'your-jwt-token' });
const location = await api.geocode('Indiranagar, Bangalore');

Available Methods

| Method | Description | |--------|-------------| | getToken() | Get current auth token (throws if expired) | | logout() | Clear stored token | | autoComplete(query, locationBias?) | Text-based location search | | autoSuggest(query, lat, lng, strictBias?) | Location-biased place search | | landmarks(lat, lng) | Nearby landmarks for a coordinate | | directions(origin, destination, headers?) | Driving route between two points | | distanceMatrix(origins, destinations) | Distance/duration matrix | | geocode(address, accuracyLevel?) | Address to coordinates | | reverseGeocode(lat, lng, details?) | Coordinates to address | | geoValidation(address, lat, lng) | Validate address against coordinates | | pincode(pincode) | Pincode information | | isochrone(distanceLimit, lat, lng) | Reachability polygon | | geofenceCreate(geojson, name?) | Create a geofence | | geofenceUpdate(geofenceId, geojson, name?) | Update a geofence | | geofenceContains(geofenceId, lat, lng, buffer?) | Point-in-geofence check | | geofenceDetails(geofenceId) | Get geofence details | | geofenceDelete(geofenceId) | Delete a geofence | | snapToRoad(coordinates) | Snap coordinates to nearest road | | addlyser(address) | Break address into structured parts | | nearestCities(address, limit?) | Find nearest cities | | votingConstituencySearch(address) | Voting constituency lookup | | trips(path, roundTrip?) | Optimized route ordering | | pointOfInterest(lat, lng, category) | POI search by category | | storePincodeSearch(pincode, limit?) | Store search within a pincode |

For detailed information about response formats, status codes, and messages, please refer to our API Documentation.

Available imports

// Core
import { LLMap, createLLMap, LLApi } from 'leaflet-latlong-maps';
import type { LLMapAuth, LLMapConfig, LLApiAuth } from 'leaflet-latlong-maps';

// Utilities
import { isTokenExpired } from 'leaflet-latlong-maps';
import { validateBBox, clampZoom, clampLatitude, clampLongitude } from 'leaflet-latlong-maps';

// Leaflet re-export (use this to avoid duplicate instances)
import { L } from 'leaflet-latlong-maps';

// Types
import type { LeafletConfig, ViewState, BBox } from 'leaflet-latlong-maps';

// Styles
import 'leaflet-latlong-maps/styles.css';

License

MIT