API - Snap To Roads

A newer version of Maps for web SDK is available

A newer version of the SDK is available and is recommended for all users. Learn about the latest version, V2.0, in the Maps for web v2.0 documentation

With NextBillion.ai Maps API, you can access all kinds of services from the map data to support your business, with just a few lines of code.

In this section, we'll introduce the Snap To Roads API.

The Snap To Roads API takes a series of locations along a route, and returns the new locations on this route that are snapped to the best matched roads where the trip took place. You can set various parameters, such as timestamps or radiuses, to optimize the result.

You can use the SDK's built-in methods to request and render the result. Also, it's your freedom to manually process and visualize the data when needed.

There are detailed instructions in the references of Snap To Roads.

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <title>NBMap Basic Example</title>
6
    <link href="https://maps-gl.nextbillion.io/maps/api/css" rel="stylesheet" />
7
    <style>
8
      * {
9
        margin: 0;
10
        padding: 0;
11
      }
12
      #map {
13
        width: 100vw;
14
        height: 100vh;
15
      }
16
      #req-snap-to-road {
17
        position: absolute;
18
        top: 20px;
19
        right: 20px;
20
        padding: 12px;
21
        z-index: 99;
22
      }
23
      #remove-snap-to-road {
24
        position: absolute;
25
        top: 70px;
26
        right: 20px;
27
        padding: 12px;
28
        z-index: 99;
29
      }
30
    </style>
31
  </head>
32
  <body>
33
    <div id="map"></div>
34
    <button id="req-snap-to-road">Request Snap To Roads</button>
35
    <button id="remove-snap-to-road">Remove Snap To Roads</button>
36

37
    <script src="https://maps-gl.nextbillion.io/maps/api/js"></script>
38
    <script>
39
      ;(function () {
40
        nextbillion.setApiKey('your-api-key')
41
        // Optional: you can set the API host if it differs from "api.nextbillion.io"
42
        nextbillion.setApiHost('your-api-endpoint')
43
        var map = new nextbillion.maps.Map(document.getElementById('map'), {
44
          zoom: 12,
45
          center: { lat: 28.6139, lng: 77.209 },
46
        })
47

48
        const pathBeforeSnaped = [
49
          { lng: 77.21114158630371, lat: 28.604850536014702 },
50
          { lng: 77.21084117889404, lat: 28.605199049558387 },
51
          { lng: 77.21077680587769, lat: 28.605604077359384 },
52
          { lng: 77.21049785614014, lat: 28.606037361185322 },
53
          { lng: 77.21032619476318, lat: 28.606159810638356 },
54
          { lng: 77.21013307571411, lat: 28.60661193045945 },
55
          { lng: 77.21003651618958, lat: 28.60696043816028 },
56
          { lng: 77.20970392227173, lat: 28.60726184929353 },
57
          { lng: 77.20960736274719, lat: 28.607563259562024 },
58
          { lng: 77.20940351486206, lat: 28.608053049403924 },
59
          { lng: 77.20922112464905, lat: 28.608401552324047 },
60
          { lng: 77.20897436141968, lat: 28.608702959322628 },
61
          { lng: 77.20867395401001, lat: 28.608740635136623 },
62
          { lng: 77.20829844474792, lat: 28.608693540367003 },
63
          { lng: 77.20811605453491, lat: 28.608844243555513 },
64
          { lng: 77.20770835876465, lat: 28.608740635136623 },
65
          { lng: 77.20752596855164, lat: 28.608571093867152 },
66
          { lng: 77.20718264579773, lat: 28.60846748517888 },
67
          { lng: 77.20661401748656, lat: 28.608250848500468 },
68
          { lng: 77.20619559288025, lat: 28.607958859227068 },
69
          { lng: 77.20587372779846, lat: 28.6077516405407 },
70
        ]
71

72
        let snapToRoadsShapes = null
73
        document.getElementById('req-snap-to-road').onclick = async function () {
74
          const resp = await nextbillion.api.SnapToRoads({
75
            path: pathBeforeSnaped,
76
          })
77

78
          // Set the second parameter, the map will render a second polyline
79
          // to indicate the route before snapping. Omit it to just render
80
          // the result.
81
          snapToRoadsShapes = map.renderSnapToRoads(resp, pathBeforeSnaped)
82
        }
83

84
        document.getElementById('remove-snap-to-road').onclick = function () {
85
          if (!snapToRoadsShapes) {
86
            return
87
          }
88
          map.removeSnapToRoads(snapToRoadsShapes)
89
          snapToRoadsShapes = null
90
        }
91
      })()
92
    </script>
93
  </body>
94
</html>