IP to Location & US Address Lookup API

Combined Map

Interactive map with routing capabilities

About This Demo

A combined interactive map showcasing multiple mapping capabilities including routing, markers, and custom overlays.

Implementation Examples

// Generic PHP Example
$curl = curl_init();
curl_setopt_array($curl, [
    CURLOPT_URL => 'https://api.zipsuite.io/api/local-maps/route',
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_HTTPHEADER => ['Authorization: Bearer YOUR_API_TOKEN'],
    CURLOPT_POST => true,
    CURLOPT_POSTFIELDS => json_encode(['coordinates' => [[77.5946, 12.9716]]])
]);
$result = curl_exec($curl);
curl_close($curl);

// Generic JavaScript Example
const response = await fetch('https://api.zipsuite.io/api/endpoint', {
    method: 'POST',
    headers: {
        'Authorization': 'Bearer YOUR_API_TOKEN',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ /* payload */ })
});
const result = await response.json();

# Generic Python Example
import requests

headers = {'Authorization': 'Bearer YOUR_API_TOKEN'}
payload = {}
response = requests.post('https://api.zipsuite.io/api/endpoint', 
                        json=payload, headers=headers)
result = response.json()

# Generic cURL Example
curl -X POST https://api.zipsuite.io/api/endpoint \
  -H "Authorization: Bearer YOUR_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"key": "value"}'

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>API Demo</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background: #f9f9f9;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      background: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    input, textarea, button {
      padding: 10px 12px;
      margin: 8px 0;
      font-size: 14px;
      border: 1px solid #ddd;
      border-radius: 4px;
      width: 100%;
      box-sizing: border-box;
    }
    button {
      background: #10b981;
      color: white;
      border: none;
      cursor: pointer;
      font-weight: 600;
    }
    button:hover {
      background: #0d9970;
    }
    pre {
      background: #1e1e1e;
      color: #d4d4d4;
      padding: 15px;
      border-radius: 5px;
      overflow-x: auto;
      max-height: 400px;
      overflow-y: auto;
    }
  </style>
</head>

<body>
  <div class="container">
    <h2>API Interactive Demo</h2>
    <input type="text" id="token" placeholder="Enter your API token">
    <textarea id="payload" placeholder="Enter JSON payload" style="height: 150px;">{
  "example": "data"
}</textarea>
    <button onclick="makeRequest()">Send Request</button>
    <div id="result"></div>
  </div>

  <script>
    async function makeRequest() {
      const token = document.getElementById('token').value;
      const payload = document.getElementById('payload').value;
      if (!token) {
        alert('Please enter API token');
        return;
      }
      try {
        const response = await fetch('https://api.zipsuite.io/api/endpoint', {
          method: 'POST',
          headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
          },
          body: payload
        });
        const data = await response.json();
        document.getElementById('result').innerHTML = '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
      } catch (error) {
        document.getElementById('result').innerHTML = '<pre style="color:red;">Error: ' + error.message + '</pre>';
      }
    }
  </script>
</body>

</html>

Try It Now

Launch Demo

Autocomplete Route

Address autocomplete with routing

About This Demo

Type an address to see autocomplete suggestions, then select to visualize routing between multiple locations.

Implementation Examples

// Generic PHP Example
$curl = curl_init();
curl_setopt_array($curl, [
    CURLOPT_URL => 'https://api.zipsuite.io/api/local-maps/route',
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_HTTPHEADER => ['Authorization: Bearer YOUR_API_TOKEN'],
    CURLOPT_POST => true,
    CURLOPT_POSTFIELDS => json_encode(['coordinates' => [[77.5946, 12.9716]]])
]);
$result = curl_exec($curl);
curl_close($curl);

// Generic JavaScript Example
const response = await fetch('https://api.zipsuite.io/api/endpoint', {
    method: 'POST',
    headers: {
        'Authorization': 'Bearer YOUR_API_TOKEN',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ /* payload */ })
});
const result = await response.json();

# Generic Python Example
import requests

headers = {'Authorization': 'Bearer YOUR_API_TOKEN'}
payload = {}
response = requests.post('https://api.zipsuite.io/api/endpoint', 
                        json=payload, headers=headers)
result = response.json()

# Generic cURL Example
curl -X POST https://api.zipsuite.io/api/endpoint \
  -H "Authorization: Bearer YOUR_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"key": "value"}'

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>API Demo</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background: #f9f9f9;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      background: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    input, textarea, button {
      padding: 10px 12px;
      margin: 8px 0;
      font-size: 14px;
      border: 1px solid #ddd;
      border-radius: 4px;
      width: 100%;
      box-sizing: border-box;
    }
    button {
      background: #10b981;
      color: white;
      border: none;
      cursor: pointer;
      font-weight: 600;
    }
    button:hover {
      background: #0d9970;
    }
    pre {
      background: #1e1e1e;
      color: #d4d4d4;
      padding: 15px;
      border-radius: 5px;
      overflow-x: auto;
      max-height: 400px;
      overflow-y: auto;
    }
  </style>
</head>

<body>
  <div class="container">
    <h2>API Interactive Demo</h2>
    <input type="text" id="token" placeholder="Enter your API token">
    <textarea id="payload" placeholder="Enter JSON payload" style="height: 150px;">{
  "example": "data"
}</textarea>
    <button onclick="makeRequest()">Send Request</button>
    <div id="result"></div>
  </div>

  <script>
    async function makeRequest() {
      const token = document.getElementById('token').value;
      const payload = document.getElementById('payload').value;
      if (!token) {
        alert('Please enter API token');
        return;
      }
      try {
        const response = await fetch('https://api.zipsuite.io/api/endpoint', {
          method: 'POST',
          headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
          },
          body: payload
        });
        const data = await response.json();
        document.getElementById('result').innerHTML = '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
      } catch (error) {
        document.getElementById('result').innerHTML = '<pre style="color:red;">Error: ' + error.message + '</pre>';
      }
    }
  </script>
</body>

</html>

Try It Now

Launch Demo

OSRM Route

Open Source Routing Engine - route planning

About This Demo

Plan routes efficiently with turn-by-turn directions using Open Source Routing Machine algorithms.

Implementation Examples

// OSRM Route - PHP Example
$client = new \GuzzleHttp\Client();
$response = $client->post('https://api.zipsuite.io/api/local-maps/route', [
    'headers' => ['Authorization' => 'Bearer YOUR_API_TOKEN'],
    'json' => [
        'coordinates' => [[77.5946, 12.9716], [77.6245, 12.9352]],
        'alternatives' => true,
        'steps' => true,
        'annotations' => ['duration', 'distance']
    ]
]);
$data = json_decode($response->getBody());

// OSRM Route - JavaScript Example
const token = 'YOUR_API_TOKEN';
const route = await fetch('https://api.zipsuite.io/api/local-maps/route', {
    method: 'POST',
    headers: {
        'Authorization': `Bearer ${token}`,
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        coordinates: [[77.5946, 12.9716], [77.6245, 12.9352]],
        alternatives: true,
        steps: true
    })
});
const data = await route.json();
console.log(data);

# OSRM Route - Python Example
import requests

headers = {'Authorization': 'Bearer YOUR_API_TOKEN'}
data = {
    'coordinates': [[77.5946, 12.9716], [77.6245, 12.9352]],
    'alternatives': True,
    'steps': True
}
response = requests.post('https://api.zipsuite.io/api/local-maps/route', 
                        json=data, headers=headers)
result = response.json()
print(result)

# OSRM Route - cURL Example
curl -X POST https://api.zipsuite.io/api/local-maps/route \
  -H "Authorization: Bearer YOUR_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "coordinates": [[77.5946, 12.9716], [77.6245, 12.9352]],
    "alternatives": true,
    "steps": true
  }'

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>OSRM Route Demo</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background: #f9f9f9;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      background: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    h2 {
      color: #333;
      margin-bottom: 20px;
    }
    input, button {
      padding: 10px 12px;
      margin: 8px 0;
      font-size: 14px;
      border: 1px solid #ddd;
      border-radius: 4px;
      width: 100%;
      box-sizing: border-box;
    }
    button {
      background: #10b981;
      color: white;
      border: none;
      cursor: pointer;
      font-weight: 600;
    }
    button:hover {
      background: #0d9970;
    }
    #result {
      background: #f5f5f5;
      padding: 15px;
      border-radius: 5px;
      margin-top: 20px;
      max-height: 400px;
      overflow-y: auto;
    }
  </style>
</head>

<body>
  <div class="container">
    <h2>OSRM Route Planner</h2>
    <input type="text" id="token" placeholder="Enter your API token">
    <input type="text" id="fromLng" placeholder="From Longitude" value="77.5946">
    <input type="text" id="fromLat" placeholder="From Latitude" value="12.9716">
    <input type="text" id="toLng" placeholder="To Longitude" value="77.6245">
    <input type="text" id="toLat" placeholder="To Latitude" value="12.9352">
    <button onclick="calculateRoute()">Get Route</button>
    <div id="result">Results will appear here...</div>
  </div>

  <script>
    async function calculateRoute() {
      const token = document.getElementById('token').value;
      if (!token) {
        alert('Please enter API token');
        return;
      }
      const coords = [
        [parseFloat(document.getElementById('fromLng').value), parseFloat(document.getElementById('fromLat').value)],
        [parseFloat(document.getElementById('toLng').value), parseFloat(document.getElementById('toLat').value)]
      ];
      try {
        const response = await fetch('https://api.zipsuite.io/api/local-maps/route', {
          method: 'POST',
          headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            coordinates: coords,
            alternatives: true,
            steps: true
          })
        });
        const data = await response.json();
        document.getElementById('result').innerHTML = '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
      } catch (error) {
        document.getElementById('result').innerHTML = '<p style="color:red;">Error: ' + error.message + '</p>';
      }
    }
  </script>
</body>

</html>

Try It Now

Launch Demo

OSRM Table

Distance/time matrix computation

About This Demo

Calculate distance and time matrices between multiple origins and destinations instantly.

Implementation Examples

// OSRM Table - PHP Example
$client = new \GuzzleHttp\Client();
$response = $client->post('https://api.zipsuite.io/api/local-maps/table', [
    'headers' => ['Authorization' => 'Bearer YOUR_API_TOKEN'],
    'json' => [
        'sources' => [[77.5946, 12.9716]],
        'destinations' => [[77.6245, 12.9352], [77.7089, 12.8975]]
    ]
]);
$matrix = json_decode($response->getBody());

// OSRM Table - JavaScript Example
const token = 'YOUR_API_TOKEN';
const response = await fetch('https://api.zipsuite.io/api/local-maps/table', {
    method: 'POST',
    headers: {
        'Authorization': `Bearer ${token}`,
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        sources: [[77.5946, 12.9716]],
        destinations: [[77.6245, 12.9352], [77.7089, 12.8975]]
    })
});
const matrix = await response.json();

# OSRM Table - Python Example
import requests

headers = {'Authorization': 'Bearer YOUR_API_TOKEN'}
data = {
    'sources': [[77.5946, 12.9716]],
    'destinations': [[77.6245, 12.9352], [77.7089, 12.8975]]
}
response = requests.post('https://api.zipsuite.io/api/local-maps/table', 
                        json=data, headers=headers)
matrix = response.json()

# OSRM Table - cURL Example
curl -X POST https://api.zipsuite.io/api/local-maps/table \
  -H "Authorization: Bearer YOUR_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "sources": [[77.5946, 12.9716]],
    "destinations": [[77.6245, 12.9352], [77.7089, 12.8975]]
  }'

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Distance Matrix Demo</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background: #f9f9f9;
    }
    .container {
      max-width: 900px;
      margin: 0 auto;
      background: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    input, button {
      padding: 10px 12px;
      margin: 8px 0;
      font-size: 14px;
      border: 1px solid #ddd;
      border-radius: 4px;
      width: 100%;
      box-sizing: border-box;
    }
    button {
      background: #10b981;
      color: white;
      border: none;
      cursor: pointer;
      font-weight: 600;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 12px;
      text-align: right;
    }
    th {
      background: #10b981;
      color: white;
    }
  </style>
</head>

<body>
  <div class="container">
    <h2>Distance/Time Matrix Calculator</h2>
    <input type="text" id="token" placeholder="API Token">
    <button onclick="calculateMatrix()">Calculate Matrix</button>
    <div id="result"></div>
  </div>

  <script>
    async function calculateMatrix() {
      const token = document.getElementById('token').value;
      if (!token) {
        alert('Please enter API token');
        return;
      }
      try {
        const response = await fetch('https://api.zipsuite.io/api/local-maps/table', {
          method: 'POST',
          headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            sources: [[77.5946, 12.9716]],
            destinations: [[77.6245, 12.9352], [77.7089, 12.8975]]
          })
        });
        const data = await response.json();
        let html = '<table><tr><th>From-To</th><th>Distance (m)</th><th>Duration (s)</th></tr>';
        if (data.distances) {
          data.distances[0].forEach((dist, i) => {
            html += `<tr><td>Source-Dest${i+1}</td><td>${dist}</td><td>${data.durations[0][i]}</td></tr>`;
          });
        }
        html += '</table>';
        document.getElementById('result').innerHTML = html;
      } catch (error) {
        document.getElementById('result').innerHTML = '<p style="color:red;">Error: ' + error.message + '</p>';
      }
    }
  </script>
</body>

</html>

Try It Now

Launch Demo

OSRM Trip

Trip optimization solver

About This Demo

Solve the traveling salesman problem to find the optimal order to visit multiple stops.

Implementation Examples

// OSRM Trip - PHP Example
$client = new \GuzzleHttp\Client();
$response = $client->post('https://api.zipsuite.io/api/local-maps/trip', [
    'headers' => ['Authorization' => 'Bearer YOUR_API_TOKEN'],
    'json' => [
        'coordinates' => [[77.5946, 12.9716], [77.6245, 12.9352], [77.7089, 12.8975]]
    ]
]);
$trips = json_decode($response->getBody());

// Generic JavaScript Example
const response = await fetch('https://api.zipsuite.io/api/endpoint', {
    method: 'POST',
    headers: {
        'Authorization': 'Bearer YOUR_API_TOKEN',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ /* payload */ })
});
const result = await response.json();

# Generic Python Example
import requests

headers = {'Authorization': 'Bearer YOUR_API_TOKEN'}
payload = {}
response = requests.post('https://api.zipsuite.io/api/endpoint', 
                        json=payload, headers=headers)
result = response.json()

# OSRM Trip - cURL Example
curl -X POST https://api.zipsuite.io/api/local-maps/trip \
  -H "Authorization: Bearer YOUR_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "coordinates": [[77.5946, 12.9716], [77.6245, 12.9352], [77.7089, 12.8975]]
  }'

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>API Demo</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background: #f9f9f9;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      background: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    input, textarea, button {
      padding: 10px 12px;
      margin: 8px 0;
      font-size: 14px;
      border: 1px solid #ddd;
      border-radius: 4px;
      width: 100%;
      box-sizing: border-box;
    }
    button {
      background: #10b981;
      color: white;
      border: none;
      cursor: pointer;
      font-weight: 600;
    }
    button:hover {
      background: #0d9970;
    }
    pre {
      background: #1e1e1e;
      color: #d4d4d4;
      padding: 15px;
      border-radius: 5px;
      overflow-x: auto;
      max-height: 400px;
      overflow-y: auto;
    }
  </style>
</head>

<body>
  <div class="container">
    <h2>API Interactive Demo</h2>
    <input type="text" id="token" placeholder="Enter your API token">
    <textarea id="payload" placeholder="Enter JSON payload" style="height: 150px;">{
  "example": "data"
}</textarea>
    <button onclick="makeRequest()">Send Request</button>
    <div id="result"></div>
  </div>

  <script>
    async function makeRequest() {
      const token = document.getElementById('token').value;
      const payload = document.getElementById('payload').value;
      if (!token) {
        alert('Please enter API token');
        return;
      }
      try {
        const response = await fetch('https://api.zipsuite.io/api/endpoint', {
          method: 'POST',
          headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
          },
          body: payload
        });
        const data = await response.json();
        document.getElementById('result').innerHTML = '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
      } catch (error) {
        document.getElementById('result').innerHTML = '<pre style="color:red;">Error: ' + error.message + '</pre>';
      }
    }
  </script>
</body>

</html>

Try It Now

Launch Demo

OSRM Match

GPS trace snapping to roads

About This Demo

Snap GPS traces to the road network, perfect for GPS data cleaning and analysis.

Implementation Examples

// OSRM Match (GPS Snapping) - PHP Example
$client = new \GuzzleHttp\Client();
$response = $client->post('https://api.zipsuite.io/api/local-maps/match', [
    'headers' => ['Authorization' => 'Bearer YOUR_API_TOKEN'],
    'json' => [
        'coordinates' => [[77.5946, 12.9716], [77.5948, 12.9718], [77.5950, 12.9720]]
    ]
]);
$matched = json_decode($response->getBody());

// Generic JavaScript Example
const response = await fetch('https://api.zipsuite.io/api/endpoint', {
    method: 'POST',
    headers: {
        'Authorization': 'Bearer YOUR_API_TOKEN',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ /* payload */ })
});
const result = await response.json();

# Generic Python Example
import requests

headers = {'Authorization': 'Bearer YOUR_API_TOKEN'}
payload = {}
response = requests.post('https://api.zipsuite.io/api/endpoint', 
                        json=payload, headers=headers)
result = response.json()

# OSRM Match (GPS Snapping) - cURL Example
curl -X POST https://api.zipsuite.io/api/local-maps/match \
  -H "Authorization: Bearer YOUR_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "coordinates": [[77.5946, 12.9716], [77.5948, 12.9718], [77.5950, 12.9720]]
  }'

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>API Demo</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background: #f9f9f9;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      background: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    input, textarea, button {
      padding: 10px 12px;
      margin: 8px 0;
      font-size: 14px;
      border: 1px solid #ddd;
      border-radius: 4px;
      width: 100%;
      box-sizing: border-box;
    }
    button {
      background: #10b981;
      color: white;
      border: none;
      cursor: pointer;
      font-weight: 600;
    }
    button:hover {
      background: #0d9970;
    }
    pre {
      background: #1e1e1e;
      color: #d4d4d4;
      padding: 15px;
      border-radius: 5px;
      overflow-x: auto;
      max-height: 400px;
      overflow-y: auto;
    }
  </style>
</head>

<body>
  <div class="container">
    <h2>API Interactive Demo</h2>
    <input type="text" id="token" placeholder="Enter your API token">
    <textarea id="payload" placeholder="Enter JSON payload" style="height: 150px;">{
  "example": "data"
}</textarea>
    <button onclick="makeRequest()">Send Request</button>
    <div id="result"></div>
  </div>

  <script>
    async function makeRequest() {
      const token = document.getElementById('token').value;
      const payload = document.getElementById('payload').value;
      if (!token) {
        alert('Please enter API token');
        return;
      }
      try {
        const response = await fetch('https://api.zipsuite.io/api/endpoint', {
          method: 'POST',
          headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
          },
          body: payload
        });
        const data = await response.json();
        document.getElementById('result').innerHTML = '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
      } catch (error) {
        document.getElementById('result').innerHTML = '<pre style="color:red;">Error: ' + error.message + '</pre>';
      }
    }
  </script>
</body>

</html>

Try It Now

Launch Demo

OSRM Nearest

Find nearest road segment

About This Demo

Find the nearest point on the road network to any coordinate location.

Implementation Examples

// OSRM Nearest - PHP Example
$client = new \GuzzleHttp\Client();
$response = $client->get('https://api.zipsuite.io/api/local-maps/nearest?coordinates=77.5946,12.9716', [
    'headers' => ['Authorization' => 'Bearer YOUR_API_TOKEN']
]);
$nearest = json_decode($response->getBody());

// Generic JavaScript Example
const response = await fetch('https://api.zipsuite.io/api/endpoint', {
    method: 'POST',
    headers: {
        'Authorization': 'Bearer YOUR_API_TOKEN',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ /* payload */ })
});
const result = await response.json();

# Generic Python Example
import requests

headers = {'Authorization': 'Bearer YOUR_API_TOKEN'}
payload = {}
response = requests.post('https://api.zipsuite.io/api/endpoint', 
                        json=payload, headers=headers)
result = response.json()

# OSRM Nearest - cURL Example
curl -X GET "https://api.zipsuite.io/api/local-maps/nearest?coordinates=77.5946,12.9716" \
  -H "Authorization: Bearer YOUR_API_TOKEN"

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>API Demo</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background: #f9f9f9;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      background: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    input, textarea, button {
      padding: 10px 12px;
      margin: 8px 0;
      font-size: 14px;
      border: 1px solid #ddd;
      border-radius: 4px;
      width: 100%;
      box-sizing: border-box;
    }
    button {
      background: #10b981;
      color: white;
      border: none;
      cursor: pointer;
      font-weight: 600;
    }
    button:hover {
      background: #0d9970;
    }
    pre {
      background: #1e1e1e;
      color: #d4d4d4;
      padding: 15px;
      border-radius: 5px;
      overflow-x: auto;
      max-height: 400px;
      overflow-y: auto;
    }
  </style>
</head>

<body>
  <div class="container">
    <h2>API Interactive Demo</h2>
    <input type="text" id="token" placeholder="Enter your API token">
    <textarea id="payload" placeholder="Enter JSON payload" style="height: 150px;">{
  "example": "data"
}</textarea>
    <button onclick="makeRequest()">Send Request</button>
    <div id="result"></div>
  </div>

  <script>
    async function makeRequest() {
      const token = document.getElementById('token').value;
      const payload = document.getElementById('payload').value;
      if (!token) {
        alert('Please enter API token');
        return;
      }
      try {
        const response = await fetch('https://api.zipsuite.io/api/endpoint', {
          method: 'POST',
          headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
          },
          body: payload
        });
        const data = await response.json();
        document.getElementById('result').innerHTML = '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
      } catch (error) {
        document.getElementById('result').innerHTML = '<pre style="color:red;">Error: ' + error.message + '</pre>';
      }
    }
  </script>
</body>

</html>

Try It Now

Launch Demo

Nominatim Search

Forward geocoding search

About This Demo

Search for address locations using forward geocoding with natural language queries.

Implementation Examples

// Nominatim Search - PHP Example
$client = new \GuzzleHttp\Client();
$response = $client->get('https://api.zipsuite.io/api/local-maps/search', [
    'query' => ['q' => '123 Main Street, New York'],
    'headers' => ['Authorization' => 'Bearer YOUR_API_TOKEN']
]);
$results = json_decode($response->getBody());

// Nominatim Search - JavaScript Example
const search = await fetch('https://api.zipsuite.io/api/local-maps/search?q=123 Main Street', {
    headers: {'Authorization': 'Bearer YOUR_API_TOKEN'}
});
const results = await search.json();
results.forEach(place => {
    console.log(`${place.name}: ${place.lat}, ${place.lon}`);
});

# Nominatim Search - Python Example
import requests

headers = {'Authorization': 'Bearer YOUR_API_TOKEN'}
params = {'q': '123 Main Street, New York'}
response = requests.get('https://api.zipsuite.io/api/local-maps/search', 
                       params=params, headers=headers)
results = response.json()
for place in results:
    print(f"{place['name']}: {place['lat']}, {place['lon']}")

# Nominatim Search - cURL Example
curl -X GET "https://api.zipsuite.io/api/local-maps/search?q=123%20Main%20Street" \
  -H "Authorization: Bearer YOUR_API_TOKEN"

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Address Search Demo</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background: #f9f9f9;
    }
    .container {
      max-width: 600px;
      margin: 0 auto;
      background: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    input, button {
      padding: 10px 12px;
      margin: 8px 0;
      font-size: 14px;
      border: 1px solid #ddd;
      border-radius: 4px;
      width: 100%;
      box-sizing: border-box;
    }
    button {
      background: #10b981;
      color: white;
      border: none;
      cursor: pointer;
      font-weight: 600;
    }
    .result-item {
      background: #f5f5f5;
      padding: 12px;
      margin: 10px 0;
      border-radius: 5px;
      cursor: pointer;
      border-left: 4px solid #10b981;
    }
    .result-item:hover {
      background: #e8f5e9;
    }
  </style>
</head>

<body>
  <div class="container">
    <h2>Address Search</h2>
    <input type="text" id="token" placeholder="API Token">
    <input type="text" id="searchBox" placeholder="Enter address..." value="123 Main Street">
    <button onclick="searchAddress()">Search</button>
    <div id="results"></div>
  </div>

  <script>
    async function searchAddress() {
      const query = document.getElementById('searchBox').value;
      const token = document.getElementById('token').value;
      if (!token) {
        alert('Please enter API token');
        return;
      }
      if (!query) {
        alert('Please enter search query');
        return;
      }
      try {
        const response = await fetch(`https://api.zipsuite.io/api/local-maps/search?q=${encodeURIComponent(query)}`, {
          headers: { 'Authorization': `Bearer ${token}` }
        });
        const results = await response.json();
        let html = '';
        if (Array.isArray(results) && results.length > 0) {
          results.forEach(place => {
            html += `<div class="result-item"><strong>${place.name || 'Unknown'}</strong><br><small>Lat: ${place.lat}, Lon: ${place.lon}</small></div>`;
          });
        } else {
          html = '<p style="color:#666;">No results found</p>';
        }
        document.getElementById('results').innerHTML = html;
      } catch (error) {
        document.getElementById('results').innerHTML = '<p style="color:red;">Error: ' + error.message + '</p>';
      }
    }
  </script>
</body>

</html>

Try It Now

Launch Demo

Nominatim Reverse

Reverse geocoding lookup

About This Demo

Look up address details from latitude and longitude coordinates.

Implementation Examples

// Nominatim Reverse - PHP Example
$client = new \GuzzleHttp\Client();
$response = $client->get('https://api.zipsuite.io/api/local-maps/reverse', [
    'query' => ['lat' => '12.9716', 'lon' => '77.5946'],
    'headers' => ['Authorization' => 'Bearer YOUR_API_TOKEN']
]);
$address = json_decode($response->getBody());

// Nominatim Reverse - JavaScript Example
const reverse = await fetch('https://api.zipsuite.io/api/local-maps/reverse?lat=12.9716&lon=77.5946', {
    headers: {'Authorization': 'Bearer YOUR_API_TOKEN'}
});
const address = await reverse.json();
console.log(address.address);

# Nominatim Reverse - Python Example
import requests

headers = {'Authorization': 'Bearer YOUR_API_TOKEN'}
params = {'lat': '12.9716', 'lon': '77.5946'}
response = requests.get('https://api.zipsuite.io/api/local-maps/reverse', 
                       params=params, headers=headers)
address = response.json()
print(address['address'])

# Nominatim Reverse - cURL Example
curl -X GET "https://api.zipsuite.io/api/local-maps/reverse?lat=12.9716&lon=77.5946" \
  -H "Authorization: Bearer YOUR_API_TOKEN"

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Reverse Geocoding Demo</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background: #f9f9f9;
    }
    .container {
      max-width: 600px;
      margin: 0 auto;
      background: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    input, button {
      padding: 10px 12px;
      margin: 8px 0;
      font-size: 14px;
      border: 1px solid #ddd;
      border-radius: 4px;
      width: 100%;
      box-sizing: border-box;
    }
    button {
      background: #10b981;
      color: white;
      border: none;
      cursor: pointer;
      font-weight: 600;
    }
    #result {
      background: #f5f5f5;
      padding: 15px;
      border-radius: 5px;
      margin-top: 20px;
    }
  </style>
</head>

<body>
  <div class="container">
    <h2>Reverse Geocoding (Coordinates to Address)</h2>
    <input type="text" id="token" placeholder="API Token">
    <input type="text" id="latitude" placeholder="Latitude" value="12.9716">
    <input type="text" id="longitude" placeholder="Longitude" value="77.5946">
    <button onclick="reverseGeocode()">Get Address</button>
    <div id="result"></div>
  </div>

  <script>
    async function reverseGeocode() {
      const lat = document.getElementById('latitude').value;
      const lon = document.getElementById('longitude').value;
      const token = document.getElementById('token').value;
      if (!token) {
        alert('Please enter API token');
        return;
      }
      try {
        const response = await fetch(`https://api.zipsuite.io/api/local-maps/reverse?lat=${lat}&lon=${lon}`, {
          headers: { 'Authorization': `Bearer ${token}` }
        });
        const data = await response.json();
        let html = '<h3 style="color:#10b981;">Location Address</h3>';
        if (data.address) {
          html += '<p><strong>' + (data.address.name || 'Location') + '</strong></p>';
          html += '<p style="color:#666;">' + (data.address.address || 'Address not found') + '</p>';
        } else {
          html += '<p>No address found</p>';
        }
        document.getElementById('result').innerHTML = html;
      } catch (error) {
        document.getElementById('result').innerHTML = '<p style="color:red;">Error: ' + error.message + '</p>';
      }
    }
  </script>
</body>

</html>

Try It Now

Launch Demo

Tiles Preview

Map tile rendering preview

About This Demo

Preview our high-quality map tiles in different zoom levels and styles.

Implementation Examples

// Generic PHP Example
$curl = curl_init();
curl_setopt_array($curl, [
    CURLOPT_URL => 'https://api.zipsuite.io/api/local-maps/route',
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_HTTPHEADER => ['Authorization: Bearer YOUR_API_TOKEN'],
    CURLOPT_POST => true,
    CURLOPT_POSTFIELDS => json_encode(['coordinates' => [[77.5946, 12.9716]]])
]);
$result = curl_exec($curl);
curl_close($curl);

// Generic JavaScript Example
const response = await fetch('https://api.zipsuite.io/api/endpoint', {
    method: 'POST',
    headers: {
        'Authorization': 'Bearer YOUR_API_TOKEN',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ /* payload */ })
});
const result = await response.json();

# Generic Python Example
import requests

headers = {'Authorization': 'Bearer YOUR_API_TOKEN'}
payload = {}
response = requests.post('https://api.zipsuite.io/api/endpoint', 
                        json=payload, headers=headers)
result = response.json()

# Get Map Tile - cURL Example
curl -X GET "https://api.zipsuite.io/styles/basic/12/2048/2048.png" \
  -H "Authorization: Bearer YOUR_API_TOKEN" \
  -o map_tile.png

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>API Demo</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background: #f9f9f9;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      background: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    input, textarea, button {
      padding: 10px 12px;
      margin: 8px 0;
      font-size: 14px;
      border: 1px solid #ddd;
      border-radius: 4px;
      width: 100%;
      box-sizing: border-box;
    }
    button {
      background: #10b981;
      color: white;
      border: none;
      cursor: pointer;
      font-weight: 600;
    }
    button:hover {
      background: #0d9970;
    }
    pre {
      background: #1e1e1e;
      color: #d4d4d4;
      padding: 15px;
      border-radius: 5px;
      overflow-x: auto;
      max-height: 400px;
      overflow-y: auto;
    }
  </style>
</head>

<body>
  <div class="container">
    <h2>API Interactive Demo</h2>
    <input type="text" id="token" placeholder="Enter your API token">
    <textarea id="payload" placeholder="Enter JSON payload" style="height: 150px;">{
  "example": "data"
}</textarea>
    <button onclick="makeRequest()">Send Request</button>
    <div id="result"></div>
  </div>

  <script>
    async function makeRequest() {
      const token = document.getElementById('token').value;
      const payload = document.getElementById('payload').value;
      if (!token) {
        alert('Please enter API token');
        return;
      }
      try {
        const response = await fetch('https://api.zipsuite.io/api/endpoint', {
          method: 'POST',
          headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
          },
          body: payload
        });
        const data = await response.json();
        document.getElementById('result').innerHTML = '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
      } catch (error) {
        document.getElementById('result').innerHTML = '<pre style="color:red;">Error: ' + error.message + '</pre>';
      }
    }
  </script>
</body>

</html>

Try It Now

Launch Demo

cURL Examples

Copy-paste ready API examples

About This Demo

Copy-paste ready cURL commands to test all API endpoints directly from your terminal.

Implementation Examples

// Generic PHP Example
$curl = curl_init();
curl_setopt_array($curl, [
    CURLOPT_URL => 'https://api.zipsuite.io/api/local-maps/route',
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_HTTPHEADER => ['Authorization: Bearer YOUR_API_TOKEN'],
    CURLOPT_POST => true,
    CURLOPT_POSTFIELDS => json_encode(['coordinates' => [[77.5946, 12.9716]]])
]);
$result = curl_exec($curl);
curl_close($curl);

// Generic JavaScript Example
const response = await fetch('https://api.zipsuite.io/api/endpoint', {
    method: 'POST',
    headers: {
        'Authorization': 'Bearer YOUR_API_TOKEN',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ /* payload */ })
});
const result = await response.json();

# Generic Python Example
import requests

headers = {'Authorization': 'Bearer YOUR_API_TOKEN'}
payload = {}
response = requests.post('https://api.zipsuite.io/api/endpoint', 
                        json=payload, headers=headers)
result = response.json()

# Generic cURL Example
curl -X POST https://api.zipsuite.io/api/endpoint \
  -H "Authorization: Bearer YOUR_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"key": "value"}'

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>API Demo</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background: #f9f9f9;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      background: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    input, textarea, button {
      padding: 10px 12px;
      margin: 8px 0;
      font-size: 14px;
      border: 1px solid #ddd;
      border-radius: 4px;
      width: 100%;
      box-sizing: border-box;
    }
    button {
      background: #10b981;
      color: white;
      border: none;
      cursor: pointer;
      font-weight: 600;
    }
    button:hover {
      background: #0d9970;
    }
    pre {
      background: #1e1e1e;
      color: #d4d4d4;
      padding: 15px;
      border-radius: 5px;
      overflow-x: auto;
      max-height: 400px;
      overflow-y: auto;
    }
  </style>
</head>

<body>
  <div class="container">
    <h2>API Interactive Demo</h2>
    <input type="text" id="token" placeholder="Enter your API token">
    <textarea id="payload" placeholder="Enter JSON payload" style="height: 150px;">{
  "example": "data"
}</textarea>
    <button onclick="makeRequest()">Send Request</button>
    <div id="result"></div>
  </div>

  <script>
    async function makeRequest() {
      const token = document.getElementById('token').value;
      const payload = document.getElementById('payload').value;
      if (!token) {
        alert('Please enter API token');
        return;
      }
      try {
        const response = await fetch('https://api.zipsuite.io/api/endpoint', {
          method: 'POST',
          headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
          },
          body: payload
        });
        const data = await response.json();
        document.getElementById('result').innerHTML = '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
      } catch (error) {
        document.getElementById('result').innerHTML = '<pre style="color:red;">Error: ' + error.message + '</pre>';
      }
    }
  </script>
</body>

</html>

Try It Now

Launch Demo

🗺️ Interactive Demos

Available Demos

Combined Map

About This Demo

Implementation Examples

Try It Now

Autocomplete Route

About This Demo

Implementation Examples

Try It Now

OSRM Route

About This Demo

Implementation Examples

Try It Now

OSRM Table

About This Demo

Implementation Examples

Try It Now

OSRM Trip

About This Demo

Implementation Examples

Try It Now

OSRM Match

About This Demo

Implementation Examples

Try It Now

OSRM Nearest

About This Demo

Implementation Examples

Try It Now

Nominatim Search

About This Demo

Implementation Examples

Try It Now

Nominatim Reverse

About This Demo

Implementation Examples

Try It Now

Tiles Preview

About This Demo

Implementation Examples

Try It Now

cURL Examples

About This Demo

Implementation Examples

Try It Now