Increase Accuracy of Mapbox GL Geocoder

user_7690982 0
Viewed 511

Is it possible to increase de accracy / precision of the Geocoder JSON response?

I could accomplish it using the Map, however, with the Geocoder It wasn't possible.

Problem Description

Using Mapbox Geocoder for JS:

<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.2/mapbox-gl-geocoder.min.js"></script>

With the Tutorial Use the geocoder without a map:

https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder-no-map/

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Use the geocoder without a map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.2/mapbox-gl-geocoder.min.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.2/mapbox-gl-geocoder.css" type="text/css">
 
<style>
#geocoder {
z-index: 1;
margin: 20px;
}
.mapboxgl-ctrl-geocoder {
min-width: 100%;
}
</style>
 
<div id="geocoder"></div>
<pre id="result"></pre>
 
<script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiaGVldm8iLCJhIjoiY2t2bWZkZXVqNXkzcjJvcXB0MHZyeTV1ZiJ9.d-C9xDxy9sNFiiN4klZl_w';
const geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
types: 'country,region,place,postcode,locality,neighborhood'
});
 
geocoder.addTo('#geocoder');
 
// Get the geocoder results container.
const results = document.getElementById('result');
 
// Add geocoder result to container.
geocoder.on('result', (e) => {
results.innerText = JSON.stringify(e.result, null, 2);
});
 
// Clear results container when search is cleared.
geocoder.on('clear', () => {
results.innerText = '';
});
</script>
 
</body>
</html>

I receive a JSON response with lots of data, that I can configure with some options before sending the request. However, I couldn't find an option to increase the accuracy / precision of this response on the following documentation:

https://github.com/mapbox/mapbox-gl-geocoder/blob/main/API.md

The JSON Response has only 6 decimal digits, as can be seen on the Mapbox website example below and is not reliable to make calculations of close distances.

{
    "type": "FeatureCollection",
    "query": [
        "825",
        "s",
        "milwaukee",
        "ave",
        "deerfield",
        "il",
        "60015"
    ],
    "features": [{
            "id": "address.4356035406756260",
            "type": "Feature",
            "place_type": [
                "address"
            ],
            "relevance": 1,
            "properties": {},
            "text": "Milwaukee Ave",
            "place_name": "825 Milwaukee Ave, Deerfield, Illinois 60015, United States",
            "matching_text": "South Milwaukee Avenue",
            "matching_place_name": "825 South Milwaukee Avenue, Deerfield, Illinois 60015, United States",
            "center": [
                -87.921434,
                42.166602
            ],
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -87.921434,
                    42.166602
                ],
                "interpolated": true,
                "omitted": true
            },
            "address": "825",
            "context": [{
                    "id": "neighborhood.287187",
                    "text": "Lake Cook Road"
                },
                {
                    "id": "postcode.13903677306297990",
                    "text": "60015"
                },
                {
                    "id": "place.5958304312090910",
                    "wikidata": "Q287895",
                    "text": "Deerfield"
                },
                {
                    "id": "region.3290978600358810",
                    "short_code": "US-IL",
                    "wikidata": "Q1204",
                    "text": "Illinois"
                },
                {
                    "id": "country.9053006287256050",
                    "short_code": "us",
                    "wikidata": "Q30",
                    "text": "United States"
                }
            ]
        },
        {
            "id": "address.7464624790403620",
            "type": "Feature",
            "place_type": [
                "address"
            ],
            "relevance": 0.5,
            "properties": {},
            "text": "Milwaukee Ave",
            "place_name": "825 Milwaukee Ave, Wheeling, Illinois 60090, United States",
            "matching_text": "South Milwaukee Avenue",
            "matching_place_name": "825 South Milwaukee Avenue, Wheeling, Illinois 60090, United States",
            "center": [
                -87.910299,
                42.144504
            ],
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -87.910299,
                    42.144504
                ],
                "interpolated": true
            },
            "address": "825",
            "context": [{
                    "id": "neighborhood.287187",
                    "text": "Lake Cook Road"
                },
                {
                    "id": "postcode.9418633295906190",
                    "text": "60090"
                },
                {
                    "id": "place.9902190947082220",
                    "wikidata": "Q935043",
                    "text": "Wheeling"
                },
                {
                    "id": "region.3290978600358810",
                    "short_code": "US-IL",
                    "wikidata": "Q1204",
                    "text": "Illinois"
                },
                {
                    "id": "country.9053006287256050",
                    "short_code": "us",
                    "wikidata": "Q30",
                    "text": "United States"
                }
            ]
        },
        {
            "id": "address.6472754353404224",
            "type": "Feature",
            "place_type": [
                "address"
            ],
            "relevance": 0.5,
            "properties": {},
            "text": "Milwaukee Avenue",
            "place_name": "825 Milwaukee Avenue, Glenview, Illinois 60025, United States",
            "matching_text": "South Milwaukee Avenue",
            "matching_place_name": "825 South Milwaukee Avenue, Glenview, Illinois 60025, United States",
            "center": [
                -87.852677,
                42.071152
            ],
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -87.852677,
                    42.071152
                ]
            },
            "address": "825",
            "context": [{
                    "id": "neighborhood.275266",
                    "text": "Northfield Woods"
                },
                {
                    "id": "postcode.3787740186211610",
                    "text": "60025"
                },
                {
                    "id": "place.10211845459386970",
                    "wikidata": null,
                    "text": "Glenview"
                },
                {
                    "id": "region.3290978600358810",
                    "short_code": "US-IL",
                    "wikidata": "Q1204",
                    "text": "Illinois"
                },
                {
                    "id": "country.9053006287256050",
                    "short_code": "us",
                    "wikidata": "Q30",
                    "text": "United States"
                }
            ]
        },
        {
            "id": "address.1225436500189372",
            "type": "Feature",
            "place_type": [
                "address"
            ],
            "relevance": 0.5,
            "properties": {},
            "text": "Milwaukee Ave",
            "place_name": "825 Milwaukee Ave, Buffalo Grove, Illinois 60089, United States",
            "matching_text": "South Milwaukee Avenue",
            "matching_place_name": "825 South Milwaukee Avenue, Buffalo Grove, Illinois 60089, United States",
            "center": [
                -87.917484,
                42.158084
            ],
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -87.917484,
                    42.158084
                ],
                "interpolated": true
            },
            "address": "825",
            "context": [{
                    "id": "neighborhood.287187",
                    "text": "Lake Cook Road"
                },
                {
                    "id": "postcode.11727721238210580",
                    "text": "60089"
                },
                {
                    "id": "place.8589721255665070",
                    "wikidata": "Q967086",
                    "text": "Buffalo Grove"
                },
                {
                    "id": "region.3290978600358810",
                    "short_code": "US-IL",
                    "wikidata": "Q1204",
                    "text": "Illinois"
                },
                {
                    "id": "country.9053006287256050",
                    "short_code": "us",
                    "wikidata": "Q30",
                    "text": "United States"
                }
            ]
        },
        {
            "id": "address.240107872738130",
            "type": "Feature",
            "place_type": [
                "address"
            ],
            "relevance": 0.5,
            "properties": {},
            "text": "Milwaukee Avenue",
            "place_name": "825 Milwaukee Avenue, Wheeling, Illinois 60090, United States",
            "matching_text": "South Milwaukee Avenue",
            "matching_place_name": "825 South Milwaukee Avenue, Wheeling, Illinois 60090, United States",
            "center": [
                -87.898319,
                42.126289
            ],
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -87.898319,
                    42.126289
                ],
                "interpolated": true,
                "omitted": true
            },
            "address": "825",
            "context": [{
                    "id": "neighborhood.287189",
                    "text": "Milwaukee Avenue"
                },
                {
                    "id": "postcode.9418633295906190",
                    "text": "60090"
                },
                {
                    "id": "place.9902190947082220",
                    "wikidata": "Q935043",
                    "text": "Wheeling"
                },
                {
                    "id": "region.3290978600358810",
                    "short_code": "US-IL",
                    "wikidata": "Q1204",
                    "text": "Illinois"
                },
                {
                    "id": "country.9053006287256050",
                    "short_code": "us",
                    "wikidata": "Q30",
                    "text": "United States"
                }
            ]
        }
    ],
    "attribution": "NOTICE: © 2018 Mapbox and its suppliers. All rights reserved. Use of this data is subject to the Mapbox Terms of Service (https://www.mapbox.com/about/maps/). This response and the information it contains may not be retained. POI(s) provided by Foursquare."
}
mapbox-gl-js mapbox javascript
1 Answers

Precision of 6 decimal places gives you ~10 centimeter accuracy. Mapbox is using GeoJSON specification which has following recommendation about precision:

The size of a GeoJSON text in bytes is a major interoperability consideration, and precision of coordinate values has a large impact on the size of texts. A GeoJSON text containing many detailed Polygons can be inflated almost by a factor of two by increasing coordinate precision from 6 to 15 decimal places. For geographic coordinates with units of degrees, 6 decimal places (a default common in, e.g., sprintf) amounts to about 10 centimeters, a precision well within that of current GPS systems. Implementations should consider the cost of using a greater precision than necessary.

GPS-enabled smartphones are typically accurate to within a 4.9 m (16 ft.) radius under open sky. However, their accuracy worsens near buildings, bridges, and trees.ref

Here is a demo of distance accuracy when precision of 6 decimal places is used:

var lat1, lat2, lon1, lon2;

//https://www.geeksforgeeks.org/program-distance-two-points-earth/
// JavaScript program to calculate Distance Between Two Points on Earth
function distance(lat1, lat2, lon1, lon2) {

  // The math module contains a function
  // named toRadians which converts from
  // degrees to radians.
  lon1 = lon1 * Math.PI / 180;
  lon2 = lon2 * Math.PI / 180;
  lat1 = lat1 * Math.PI / 180;
  lat2 = lat2 * Math.PI / 180;

  // Haversine formula
  let dlon = lon2 - lon1;
  let dlat = lat2 - lat1;
  let a = Math.pow(Math.sin(dlat / 2), 2) +
    Math.cos(lat1) * Math.cos(lat2) *
    Math.pow(Math.sin(dlon / 2), 2);

  let c = 2 * Math.asin(Math.sqrt(a));

  // Radius of earth is 6371 kilometers
  let km = c * 6371; //kilometers
  let mi = c * 3956; //miles

  // calculate the result
  return [(km), (mi), (km * 1000), (km * 100000)];
}

function update() {
  lat1 = document.getElementById('lat1').value;
  lat2 = document.getElementById('lat2').value;
  lon1 = document.getElementById('lon1').value;
  lon2 = document.getElementById('lon2').value;
  let result = distance(lat1, lat2, lon1, lon2);
  format('result1', ...result);
}
update();

function format(id, km, mi, m, cm) {
  document.getElementById(id).innerHTML =
    `Centimeters:\t${cm}\n` +
    `Meters:\t\t${m}\n` +
    `Kilometers:\t${km}\n` +
    `Miles:\t\t${mi}\n`;
}
format('result2', ...distance(42.167803, 42.144516, -87.921589, -87.910345));
body {
  margin: 0;
  padding: 1rem;
}

input {
  width: 110px;
  font-size: 16px;
  color: red;
}

.result {
  width: 400px;
  height: 5rem;
  background-color: wheat;
  font-size: 16px;
  white-space: pre;
}
<p>Change values to update result.</p>
<label for="lat1">Latitude A:</label>
<input type="number" id="lat1" name="lat1" value="0.000000" step="0.000001" onchange="update()">
<label for="lon1">Longitude A:</label>
<input type="number" id="lon1" name="lon1" value="0.000000" step="0.000001" onchange="update()">
<br>
<label for="lat2">Latitude B:</label>
<input type="number" id="lat2" name="lat2" value="0.000001" step="0.000001" onchange="update()">
<label for="lon2">Longitude B:</label>
<input type="number" id="lon2" name="lon2" value="0.000000" step="0.000001" onchange="update()">

<div id="result1" class="result"></div>
<hr>
<p>(42.167803, -87.921589) to (42.144516, -87.910345) distance:</p>
<div id="result2" class="result"></div>

You can verify the above distance on Google Maps.

If you search "Illinois, United States" you get coordinates -89.2749461071049 40.1492928594. May be it's related to how they collect data. They collect data from open data sources, such as OpenStreetMap and NASA, and from purchased proprietary data sources, such as DigitalGlobe.ref. To verify, you can add new marker/location with more accurate coordinates and see if the APIs returns only 6 digits or entire provided coordinates.

user_152739680
Related