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 |
Use the package-served JS endpoint below, then initialize a map container with route endpoint + tile URL.
<script src="http://localhost:8000/map/local-maps.js"></script>
<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>
<script>
document.addEventListener('DOMContentLoaded', async function () {
const map = window.LocalMaps.create('#localMap');
await map.loadRoute([
[77.5946, 12.9716],
[77.6200, 12.9900]
]);
});
</script>
Calculate a driving route between two or more coordinates using your self-hosted OSRM server. Requires an active API token.
$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": []
}Compute a duration/distance matrix for a set of coordinates. Returns all pairwise durations and/or distances.
$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": []}Snap a GPS trace (ordered coordinate list) to the road network using OSRM map matching.
$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": []}Solve a Traveling Salesman Problem (TSP) for a set of waypoints, returning the optimal visit order.
$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}]}Snap a coordinate to the nearest road segment on your local OSRM graph.
$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]}]}Search, add markers, popups, and get driving directions in one map. Great for all-in-one demos.
View DemoFrom/To address autocomplete with OSRM driving route. Click map or type addresses.
View DemoAdvanced route options: alternatives, annotations, overview, bearings, radiuses, and more.
View DemoDuration/distance matrix for multiple points. Useful for logistics and dispatch.
View DemoOptimized multi-stop route. Choose source, destination, roundtrip, and steps.
View DemoCorrect noisy GPS traces to the road network. Great for tracking and analytics.
View DemoSnap a coordinate to the nearest routable road. Useful for map-matching and corrections.
View DemoAddress/place to coordinates with typeahead suggestions. Place markers on the map.
View DemoCoordinates to address. Click map or enter coordinates to reverse geocode.
View DemoPreview local map tiles. Test tile server integration and display.
View DemoReady-to-run cURL commands for all API endpoints. Great for backend and CLI testing.
View Demo