Home / Map

Use the required JavaScript file below to integrate MAP API features in your frontend.

Asset Type Details Download
MAP API JavaScript JS Required for map rendering and route interactions. Get JS

How to Use on Your Page

Use the package-served JS endpoint below, then initialize a map container with route endpoint + tile URL.

1) Include the JS file
<script src="http://localhost:8000/map/local-maps.js"></script>
2) Add a map container
<meta name="api-token" content="YOUR_ACTIVE_API_TOKEN" />

<div
    id="localMap"
    class="local-maps-canvas"
    data-lat="12.9716"
    data-lng="77.5946"
    data-zoom="12"
    data-tile-url="https://api.systha.com/styles/basic/{z}/{x}/{y}.png"
    data-route-endpoint="/api/local-maps/route"
    style="height: 420px;"
></div>
3) Initialize and load a route
<script>
    document.addEventListener('DOMContentLoaded', async function () {
        const map = window.LocalMaps.create('#localMap');

        await map.loadRoute([
            [77.5946, 12.9716],
            [77.6200, 12.9900]
        ]);
    });
</script>

MAP API Endpoint Documentation

1. Maps Route

POST /api/local-maps/route

Calculate a driving route between two or more coordinates using your self-hosted OSRM server. Requires an active API token.

Payload / Parameters
  • `coordinates` (required) — array of `[lng, lat]` pairs, minimum 2
$payload = [
    'coordinates' => [[77.5946, 12.9716], [77.6200, 12.9900]],
];
$ch = curl_init('/api/local-maps/route');
curl_setopt_array($ch, [
    CURLOPT_POST           => true,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_HTTPHEADER     => ['Authorization: Bearer YOUR_ACTIVE_API_TOKEN', 'Content-Type: application/json'],
    CURLOPT_POSTFIELDS     => json_encode($payload),
]);
$response = json_decode(curl_exec($ch), true);
fetch('/api/local-maps/route', {
  method: 'POST',
  headers: { Authorization: 'Bearer YOUR_ACTIVE_API_TOKEN', 'Content-Type': 'application/json' },
  body: JSON.stringify({ coordinates: [[77.5946, 12.9716], [77.6200, 12.9900]] })
});
requests.post('/api/local-maps/route', headers=auth, json={'coordinates': [[77.5946, 12.9716], [77.6200, 12.9900]]})
{
  "code": "Ok",
  "routes": [{"distance": 3241.5, "duration": 412.3, "geometry": {"type": "LineString", "coordinates": [[77.5946,12.9716],[77.62,12.99]]}, "legs": []}],
  "waypoints": []
}

2. Maps Distance Table

POST /api/local-maps/table

Compute a duration/distance matrix for a set of coordinates. Returns all pairwise durations and/or distances.

Payload / Parameters
  • `coordinates` (required) — array of `[lng, lat]` pairs, minimum 2
$payload = ['coordinates' => [[77.5946, 12.9716], [77.6200, 12.9900], [77.5800, 12.9500]]];
fetch('/api/local-maps/table', {
  method: 'POST',
  headers: { Authorization: 'Bearer YOUR_ACTIVE_API_TOKEN', 'Content-Type': 'application/json' },
  body: JSON.stringify({ coordinates: [[77.5946, 12.9716], [77.6200, 12.9900], [77.5800, 12.9500]] })
});
requests.post('/api/local-maps/table', headers=auth, json={'coordinates': [[77.5946, 12.9716], [77.62, 12.99], [77.58, 12.95]]})
{"code": "Ok", "durations": [[0, 412.3, 208.1], [398.7, 0, 310.5], [215.2, 295.8, 0]], "sources": [], "destinations": []}

3. Maps Map-Match

POST /api/local-maps/match

Snap a GPS trace (ordered coordinate list) to the road network using OSRM map matching.

Payload / Parameters
  • `coordinates` (required) — ordered array of `[lng, lat]` GPS trace points
$payload = ['coordinates' => [[77.5946, 12.9716], [77.5960, 12.9730], [77.5980, 12.9750]]];
fetch('/api/local-maps/match', {
  method: 'POST',
  headers: { Authorization: 'Bearer YOUR_ACTIVE_API_TOKEN', 'Content-Type': 'application/json' },
  body: JSON.stringify({ coordinates: [[77.5946, 12.9716], [77.5960, 12.9730], [77.5980, 12.9750]] })
});
requests.post('/api/local-maps/match', headers=auth, json={'coordinates': [[77.5946, 12.9716], [77.596, 12.973], [77.598, 12.975]]})
{"code": "Ok", "matchings": [{"confidence": 0.92, "distance": 412.3, "duration": 58.1, "geometry": {}}], "tracepoints": []}

4. Maps Trip

POST /api/local-maps/trip

Solve a Traveling Salesman Problem (TSP) for a set of waypoints, returning the optimal visit order.

Payload / Parameters
  • `coordinates` (required) — array of `[lng, lat]` waypoints, minimum 2
$payload = ['coordinates' => [[77.5946, 12.9716], [77.6200, 12.9900], [77.5800, 12.9500]]];
fetch('/api/local-maps/trip', {
  method: 'POST',
  headers: { Authorization: 'Bearer YOUR_ACTIVE_API_TOKEN', 'Content-Type': 'application/json' },
  body: JSON.stringify({ coordinates: [[77.5946, 12.9716], [77.6200, 12.9900], [77.5800, 12.9500]] })
});
requests.post('/api/local-maps/trip', headers=auth, json={'coordinates': [[77.5946, 12.9716], [77.62, 12.99], [77.58, 12.95]]})
{"code": "Ok", "trips": [{"distance": 8243.1, "duration": 1024.5, "geometry": {}}], "waypoints": [{"waypoint_index": 0}, {"waypoint_index": 2}, {"waypoint_index": 1}]}

5. Maps Nearest

GET /api/local-maps/nearest

Snap a coordinate to the nearest road segment on your local OSRM graph.

Payload / Parameters
  • `lng` and `lat` query params are required
$ch = curl_init('/api/local-maps/nearest?lng=77.5946&lat=12.9716');
curl_setopt_array($ch, [
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_HTTPHEADER     => ['Authorization: Bearer YOUR_ACTIVE_API_TOKEN'],
]);
$response = json_decode(curl_exec($ch), true);
fetch('/api/local-maps/nearest?lng=77.5946&lat=12.9716', {
  headers: { Authorization: 'Bearer YOUR_ACTIVE_API_TOKEN' }
});
requests.get('/api/local-maps/nearest', headers=auth, params={'lng': 77.5946, 'lat': 12.9716})
{"code": "Ok", "waypoints": [{"distance": 3.12, "name": "MG Road", "location": [77.5948, 12.9718]}]}

Combined Map

Search, add markers, popups, and get driving directions in one map. Great for all-in-one demos.

View Demo

Autocomplete Route

From/To address autocomplete with OSRM driving route. Click map or type addresses.

View Demo

OSRM Route

Advanced route options: alternatives, annotations, overview, bearings, radiuses, and more.

View Demo

OSRM Table

Duration/distance matrix for multiple points. Useful for logistics and dispatch.

View Demo

OSRM Trip

Optimized multi-stop route. Choose source, destination, roundtrip, and steps.

View Demo

OSRM Match

Correct noisy GPS traces to the road network. Great for tracking and analytics.

View Demo

OSRM Nearest

Snap a coordinate to the nearest routable road. Useful for map-matching and corrections.

View Demo

Nominatim Reverse

Coordinates to address. Click map or enter coordinates to reverse geocode.

View Demo

Tiles Preview

Preview local map tiles. Test tile server integration and display.

View Demo

cURL Examples

Ready-to-run cURL commands for all API endpoints. Great for backend and CLI testing.

View Demo