Increase Accuracy of Mapbox GL Geocoder - javascript

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."
}

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.

Related

Filter doesnt work on long string addresses

I am trying to build a little filtering tool in lightening web components and I can filter perfectly by the name but it fails if I try filtering by the billing address(state, city or country)
Returned API data looks like this
[
{
"Id": "001IY000002QarYYAS",
"Name": "Bertha Lee",
"BillingStreet": "22 Fifo Street",
"BillingCity": "Sunshine",
"BillingCountry": "Australia"
},
{
"Id": "001IY000002QV8nYAG",
"Name": "Sample Account for Entitlements"
},
{
"Id": "001IY000002QV8bYAG",
"Name": "Edge Communications",
"BillingStreet": "312 Constitution Place\nAustin, TX 78767\nUSA",
"BillingCity": "Austin"
},
{
"Id": "001IY000002QV8cYAG",
"Name": "Burlington Textiles Corp of America",
"BillingStreet": "525 S. Lexington Ave",
"BillingCity": "Burlington",
"BillingCountry": "USA"
},
{
"Id": "001IY000002QV8dYAG",
"Name": "Pyramid Construction Inc.",
"BillingStreet": "2 Place Jussieu",
"BillingCity": "Paris",
"BillingCountry": "France"
},
{
"Id": "001IY000002QV8eYAG",
"Name": "Dickenson plc",
"BillingStreet": "1301 Hoch Drive",
"BillingCity": "Lawrence",
"BillingCountry": "USA"
},
{
"Id": "001IY000002QV8fYAG",
"Name": "Grand Hotels & Resorts Ltd",
"BillingStreet": "2334 N. Michigan Avenue, Suite 1500\nChicago, IL 60601, USA",
"BillingCity": "Chicago"
},
{
"Id": "001IY000002QV8gYAG",
"Name": "United Oil & Gas Corp.",
"BillingStreet": "1301 Avenue of the Americas \nNew York, NY 10019\nUSA",
"BillingCity": "New York"
},
{
"Id": "001IY000002QV8hYAG",
"Name": "Express Logistics and Transport",
"BillingStreet": "620 SW 5th Avenue Suite 400\nPortland, Oregon 97204\nUnited States",
"BillingCity": "Portland"
},
{
"Id": "001IY000002QV8iYAG",
"Name": "University of Arizona",
"BillingStreet": "888 N Euclid \nHallis Center, Room 501\nTucson, AZ 85721\nUnited States",
"BillingCity": "Tucson"
}
]
Javascript code to manipulate data and push to my html
export default class Accountsfilter extends LightningElement {
availableAccounts;
error;
columns = columns;
searchString;
initialRecords;
#wire( fetchAccounts )
wiredAccount( { error, data } ) {
if ( data ) {
this.availableAccounts = JSON.parse(JSON.stringify(data));
console.log(this.availableAccounts);
this.initialRecords = JSON.parse(JSON.stringify(data));
this.error = undefined;
} else if ( error ) {
this.error = error;
this.availableAccounts = undefined;
}
}
handleSearch( event ) {
const searchKey = event?.target?.value.toLowerCase();
console.log(searchKey)
if ( searchKey ) {
console.log(searchKey)
this.availableAccounts = this.initialRecords;
if ( this.availableAccounts ) {
let recs = []
recs.concat(this.availableAccounts.filter(x => x?.BillingCity.toLowerCase().includes(searchKey)))
this.availableAccounts = recs
}
} else {
this.availableAccounts = this.initialRecords;
}
}
}
In the code above I use billing city and it fails. I wanna be able to filter using billingstreet, city and country

unable to access properties of objects inside array of JSON objects [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
{
"results_found": "53",
"results_start": "11",
"results_shown": "10",
"restaurants": [
{
"id": "16774318",
"name": "Otto Enoteca & Pizzeria",
"url": "https://www.zomato.com/new-york-city/otto-enoteca-pizzeria-greenwich-village",
"location": {
"address": "1 5th Avenue, New York, NY 10003",
"locality": "Greenwich Village",
"city": "New York City",
"latitude": "40.732013",
"longitude": "-73.996155",
"zipcode": "10003",
"country_id": "216"
},
"average_cost_for_two": "60",
"price_range": "2",
"currency": "$",
"thumb": "https://b.zmtcdn.com/data/pictures/chains/8/16774318/a54deb9e4dbb79dd7c8091b30c642077_featured_thumb.png",
"featured_image": "https://d.zmtcdn.com/data/pictures/chains/8/16774318/a54deb9e4dbb79dd7c8091b30c642077_featured_v2.png",
"photos_url": "https://www.zomato.com/new-york-city/otto-enoteca-pizzeria-greenwich-village/photos#tabtop",
"menu_url": "https://www.zomato.com/new-york-city/otto-enoteca-pizzeria-greenwich-village/menu#tabtop",
"events_url": "https://www.zomato.com/new-york-city/otto-enoteca-pizzeria-greenwich-village/events#tabtop",
"user_rating": {
"aggregate_rating": "3.7",
"rating_text": "Very Good",
"rating_color": "5BA829",
"votes": "1046"
},
"has_online_delivery": "0",
"is_delivering_now": "0",
"has_table_booking": "0",
"deeplink": "zomato://r/16774318",
"cuisines": "Cafe",
"all_reviews_count": "15",
"photo_count": "18",
"phone_numbers": "(212) 228-2930"
}
]
}
Not able to access property "name" in "restaurants" array in node js.When I am parsing the body using JSON like,
var data = JSON.parse(body);
and trying to print "data"...the result is:
{
"results_found": 0,
"results_start": 0,
"results_shown": 0,
"restaurants": []
}
What may be the reason?? I am confused...the JSON is from Zomato API.
JSON value you have posted is not valid format.. you have a trailing coma after ']'
please use this a valid JSON file
{
"results_found": "53",
"results_start": "11",
"results_shown": "10",
"restaurants": [
{
"id": "16774318",
"name": "Otto Enoteca & Pizzeria",
"url": "https://www.zomato.com/new-york-city/otto-enoteca-pizzeria-greenwich-village",
"location": {
"address": "1 5th Avenue, New York, NY 10003",
"locality": "Greenwich Village",
"city": "New York City",
"latitude": "40.732013",
"longitude": "-73.996155",
"zipcode": "10003",
"country_id": "216"
},
"average_cost_for_two": "60",
"price_range": "2",
"currency": "$",
"thumb": "https://b.zmtcdn.com/data/pictures/chains/8/16774318/a54deb9e4dbb79dd7c8091b30c642077_featured_thumb.png",
"featured_image": "https://d.zmtcdn.com/data/pictures/chains/8/16774318/a54deb9e4dbb79dd7c8091b30c642077_featured_v2.png",
"photos_url": "https://www.zomato.com/new-york-city/otto-enoteca-pizzeria-greenwich-village/photos#tabtop",
"menu_url": "https://www.zomato.com/new-york-city/otto-enoteca-pizzeria-greenwich-village/menu#tabtop",
"events_url": "https://www.zomato.com/new-york-city/otto-enoteca-pizzeria-greenwich-village/events#tabtop",
"user_rating": {
"aggregate_rating": "3.7",
"rating_text": "Very Good",
"rating_color": "5BA829",
"votes": "1046"
},
"has_online_delivery": "0",
"is_delivering_now": "0",
"has_table_booking": "0",
"deeplink": "zomato://r/16774318",
"cuisines": "Cafe",
"all_reviews_count": "15",
"photo_count": "18",
"phone_numbers": "(212) 228-2930",
"photos": [
{
"id": "u_MjA5MjY1OTk5OT",
"url": "https://b.zmtcdn.com/data/reviews_photos/c15/9eb13ceaf6e90129c276ce6ff980bc15_1435111695_640_640_thumb.JPG",
"thumb_url": "https://b.zmtcdn.com/data/reviews_photos/c15/9eb13ceaf6e90129c276ce6ff980bc15_1435111695_200_thumb.JPG",
"user": {
"name": "John Doe",
"zomato_handle": "John",
"foodie_level": "Super Foodie",
"foodie_level_num": "9",
"foodie_color": "f58552",
"profile_url": "https://www.zomato.com/john",
"profile_deeplink": "zoma.to/u/1170245",
"profile_image": "string"
},
"res_id": "16782899",
"caption": "#awesome",
"timestamp": "1435111770",
"friendly_time": "3 months ago",
"width": "640",
"height": "640",
"comments_count": "0",
"likes_count": "0"
}
]
}
]
}
Sample snippet with above JSON
var json = "{\"results_found\":\"53\",\"results_start\":\"11\",\"results_shown\":\"10\",\"restaurants\":[{\"id\":\"16774318\",\"name\":\"Otto Enoteca & Pizzeria\",\"url\":\"https:\/\/www.zomato.com\/new-york-city\/otto-enoteca-pizzeria-greenwich-village\",\"location\":{\"address\":\"1 5th Avenue, New York, NY 10003\",\"locality\":\"Greenwich Village\",\"city\":\"New York City\",\"latitude\":\"40.732013\",\"longitude\":\"-73.996155\",\"zipcode\":\"10003\",\"country_id\":\"216\"},\"average_cost_for_two\":\"60\",\"price_range\":\"2\",\"currency\":\"$\",\"thumb\":\"https:\/\/b.zmtcdn.com\/data\/pictures\/chains\/8\/16774318\/a54deb9e4dbb79dd7c8091b30c642077_featured_thumb.png\",\"featured_image\":\"https:\/\/d.zmtcdn.com\/data\/pictures\/chains\/8\/16774318\/a54deb9e4dbb79dd7c8091b30c642077_featured_v2.png\",\"photos_url\":\"https:\/\/www.zomato.com\/new-york-city\/otto-enoteca-pizzeria-greenwich-village\/photos#tabtop\",\"menu_url\":\"https:\/\/www.zomato.com\/new-york-city\/otto-enoteca-pizzeria-greenwich-village\/menu#tabtop\",\"events_url\":\"https:\/\/www.zomato.com\/new-york-city\/otto-enoteca-pizzeria-greenwich-village\/events#tabtop\",\"user_rating\":{\"aggregate_rating\":\"3.7\",\"rating_text\":\"Very Good\",\"rating_color\":\"5BA829\",\"votes\":\"1046\"},\"has_online_delivery\":\"0\",\"is_delivering_now\":\"0\",\"has_table_booking\":\"0\",\"deeplink\":\"zomato:\/\/r\/16774318\",\"cuisines\":\"Cafe\",\"all_reviews_count\":\"15\",\"photo_count\":\"18\",\"phone_numbers\":\"(212) 228-2930\",\"photos\":[{\"id\":\"u_MjA5MjY1OTk5OT\",\"url\":\"https:\/\/b.zmtcdn.com\/data\/reviews_photos\/c15\/9eb13ceaf6e90129c276ce6ff980bc15_1435111695_640_640_thumb.JPG\",\"thumb_url\":\"https:\/\/b.zmtcdn.com\/data\/reviews_photos\/c15\/9eb13ceaf6e90129c276ce6ff980bc15_1435111695_200_thumb.JPG\",\"user\":{\"name\":\"John Doe\",\"zomato_handle\":\"John\",\"foodie_level\":\"Super Foodie\",\"foodie_level_num\":\"9\",\"foodie_color\":\"f58552\",\"profile_url\":\"https:\/\/www.zomato.com\/john\",\"profile_deeplink\":\"zoma.to\/u\/1170245\",\"profile_image\":\"string\"},\"res_id\":\"16782899\",\"caption\":\"#awesome\",\"timestamp\":\"1435111770\",\"friendly_time\":\"3 months ago\",\"width\":\"640\",\"height\":\"640\",\"comments_count\":\"0\",\"likes_count\":\"0\"}]}]}"
var data = JSON.parse(json);
console.log(data)
Your json is not valid. There is an extra comma at the end of restaurants[0].photos please remove it and everything will work fine

Accessing objects in arrays inside objects in Angular

I am having quite a hard time accessing data from an api call and having it shown on Mapbox. I am able to have one marker shown on the map, while I should have 10 markers. I think I am doing something wrong with ng-repeat, but I am not sure what. Any help would be appreciated.
Here is a link to view the full JSON response from the API call http://jsonblob.com/55e734cee4b01190df374f1e
// index.html
<div ng-repeat="venue in bars.venues">
<marker lat="{{venue.location.lat}}" lng="{{venue.location.lng}}">
<h1>{{venue.name}}</h1>
<p>{{venue.contact}}</p>
<p>{{venue.location.formattedAddress}}</p>
</marker>
</div>
// app.js
$http.get(url)
.then(function (response) {
$scope.bars = response.data.response;
});
// sample data from api
{
"meta": {
"code": 200,
"requestId": "55e72707498e3d9a002d7bc4"
},
"response": {
"venues": [
{
"id": "42c1e480f964a520c4251fe3",
"name": "The View",
"contact": {
"phone": "4158961600",
"formattedPhone": "(415) 896-1600"
},
"location": {
"address": "55 4th St",
"crossStreet": "at Marriott Marquis",
"lat": 37.78510950100554,
"lng": -122.40469515323639,
"distance": 29,
"postalCode": "94103",
"cc": "US",
"city": "San Francisco",
"state": "CA",
"country": "United States",
"formattedAddress": [
"55 4th St (at Marriott Marquis)",
"San Francisco, CA 94103",
"United States"
]
},
"categories": [
{
"id": "4bf58dd8d48988d1d5941735",
"name": "Hotel Bar",
"pluralName": "Hotel Bars",
"shortName": "Hotel Bar",
"icon": {
"prefix": "https://ss3.4sqi.net/img/categories_v2/travel/hotel_bar_",
"suffix": ".png"
},
"primary": true
}
],
"verified": false,
"stats": {
"checkinsCount": 12634,
"usersCount": 9499,
"tipCount": 121
},
"url": "http://www.sfviewlounge.com",
"hasMenu": true,
"menu": {
"type": "Menu",
"label": "Menu",
"anchor": "View Menu",
"url": "https://foursquare.com/v/the-view/42c1e480f964a520c4251fe3/menu",
"mobileUrl": "https://foursquare.com/v/42c1e480f964a520c4251fe3/device_menu"
},
So I figured out why only one marker was showing. I was previously using angular google maps and had ngMaps as a module. After I deleted it, all my markers showed.

JavaScript GeoJson Parser

i have geojson data:
{
"type":"FeatureCollection",
"metadata":{
"generated":1417015873000,
11-26T14:33:40&endtime=2014-11-26T14:33:45",
"title":"USGS Earthquakes",
"status":200,
"api":"1.0.13",
"count":1
},
"features":
[{
"type":"Feature",
"properties":
{
"mag":6.8,
"place":"160km NW of Kota Ternate, Indonesia",
"time":1417012423350,"updated":1417015584000,
"tz":480,
"url":"http://comcat.cr.usgs.gov/earthquakes/eventpage/usb000t08w",
"detail":"http://comcat.cr.usgs.gov/fdsnws/event/1/query?eventid=usb000t08w&format=geojson",
"felt":1,
"cdi":5,
"mmi":4.98,
"alert":"green",
"status":"reviewed",
"tsunami":1,
"sig":712,
"net":"us",
"code":"b000t08w",
"ids":",at00nfnhsd,pt14330000,usb000t08w,",
"sources":",at,pt,us,",
"types":",cap,dyfi,general-link,geoserve,impact-link,losspager,moment-tensor,nearby-cities,origin,phase-data,shakemap,tectonic-summary,",
"nst":null,
"dmin":1.45,
"rms":1.32,
"gap":37,
"magType":"mwb",
"type":"earthquake",
"title":"M 6.8 - 160km NW of Kota Ternate, Indonesia"
},
"geometry":{"type":"Point","coordinates":[126.5456,1.9752,41.06]},
"id":"usb000t08w"
}]
}
how to parse value "title" ?
var geojson = JSON.parse(geojson_data);
Turns the geojson string into an object, from there you can get whatever you values you want from it.
Edit: your json is invalid, where are you getting the data from? I cleaned it up, so you can call JSON.parse on it. However, it is not valid geojson, so I'd double check where you come up with the data. This geojson validator might help.
{
"metadata": {
"generated": 1417015873000,
"11-26T14: 33: 40&endtime=2014-11-26T14: 33": 45,
"title": "USGSEarthquakes",
"status": 200,
"api": "1.0.13",
"count": 1
},
"features": [
{
"type": "Feature",
"properties": {
"mag": 6.8,
"place": "160km NW of Kota Ternate, Indonesia",
"time": 1417012423350,
"updated": 1417015584000,
"tz": 480,
"url": "http://comcat.cr.usgs.gov/earthquakes/eventpage/usb000t08w",
"detail": "http://comcat.cr.usgs.gov/fdsnws/event/1/query?eventid=usb000t08w&format=geojson",
"felt": 1,
"cdi": 5,
"mmi": 4.98,
"alert": "green",
"status": "reviewed",
"tsunami": 1,
"sig": 712,
"net": "us",
"code": "b000t08w",
"ids": ",at00nfnhsd,pt14330000,usb000t08w,",
"sources": ",at,pt,us,",
"types": ",cap,dyfi,general-link,geoserve,impact-link,losspager,moment-tensor,nearby-cities,origin,phase-data,shakemap,tectonic-summary,",
"nst": null,
"dmin": 1.45,
"rms": 1.32,
"gap": 37,
"magType": "mwb",
"type": "earthquake",
"title": "M 6.8 - 160km NW of Kota Ternate, Indonesia"
},
"geometry": {
"type": "Point",
"coordinates": [
126.5456,
1.9752,
41.06
]
},
"id": "usb000t08w"
}
]
}

Finding places of interest, based on approx geo location

I was wondering if it is possible to get the places of interest in a location based on the lattitude/longitude information or approximate street address gathered from a GPS system?
places of interest are defined in this context as: Restaurants, Resorts, Parks, malls, movie theaters, etc.
Are there some online services either with bing maps / google maps / something else, that provides such information in some parsed format?
Thank you
On the client side, you use the Google AJAX Search API to search for places of interest around a specific coordinate:
<!DOCTYPE html>
<html>
<head>
<title>Google AJAX Search API Demo</title>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1');
var localSearch;
function localSearchComplete() {
// Check that we got results
if (localSearch.results && localSearch.results.length > 0) {
// Loop through our results, printing them to the page.
var results = localSearch.results;
document.getElementById('content').innerHTML = "";
for (var i = 0; i < results.length; i++) {
document.getElementById('content').innerHTML +=
'<div style="clear: both;">' +
'<div style="float: left; width: 160px;">' + results[i].title + '</div>' +
'<div style="float: left; width: 80px;">' + results[i].lat + '</div>' +
'<div style="float: left; width: 80px;">' + results[i].lng + '</div>' +
'<div style="float: left; width: 140px;">' + results[i].streetAddress + '</div>' +
'<div style="float: left; width: 120px;">' + results[i].city + '</div>' +
'</div>';
}
}
}
function OnLoad() {
localSearch = new google.search.LocalSearch();
// Coordinates for "New York, NY"
localSearch.setCenterPoint("40.70, -74.00");
localSearch.setSearchCompleteCallback(this, localSearchComplete, null);
localSearch.execute("restaurants");
}
google.setOnLoadCallback(OnLoad);
</script>
</head>
<body style="font-family: Arial; font-size: 11px;">
<div id="content">Loading...</div>
</body>
</html>
The result would be the following:
Local Search Results http://img693.imageshack.us/img693/240/localsearch.png
To get the same results from the server side in JSON format, you may want to check the following article:
Google AJAX Search API: Flash and other Non-Javascript Environment
Basically you would be able to issue a request to Google in the following format:
http://ajax.googleapis.com/ajax/services/search/local?v=2.0&q=restaurants+40.70,-74.00
Which would return the following JSON:
{
"responseData": {
"results": [
{
"GsearchResultClass": "GlocalSearch",
"viewportmode": "explicit",
"listingType": "local",
"lat": "40.703684",
"lng": "-73.994861",
"accuracy": "8",
"title": "The River Cafe",
"titleNoFormatting": "The River Cafe",
"ddUrl": "http://www.google.com/maps?source\u003duds\u0026daddr\u003d1+Water+Street%2C+Brooklyn%2C+NY+%28The+River+Cafe%29+%4040.703684%2C-73.994861\u0026saddr\u003d40.70%2C-74.00",
"ddUrlToHere": "http://www.google.com/maps?source\u003duds\u0026daddr\u003d1+Water+Street%2C+Brooklyn%2C+NY+%28The+River+Cafe%29+%4040.703684%2C-73.994861\u0026iwstate1\u003ddir%3Ato",
"ddUrlFromHere": "http://www.google.com/maps?source\u003duds\u0026saddr\u003d1+Water+Street%2C+Brooklyn%2C+NY+%28The+River+Cafe%29+%4040.703684%2C-73.994861\u0026iwstate1\u003ddir%3Afrom",
"streetAddress": "1 Water Street",
"city": "Brooklyn",
"region": "NY",
"country": "United States",
"staticMapUrl": "http://mt.google.com/mapdata?cc\u003dus\u0026tstyp\u003d5\u0026Point\u003db\u0026Point.latitude_e6\u003d40703684\u0026Point.longitude_e6\u003d-73994861\u0026Point.iconid\u003d15\u0026Point\u003de\u0026w\u003d150\u0026h\u003d100\u0026zl\u003d4",
"url": "http://www.google.com/maps/place?source\u003duds\u0026q\u003drestaurants\u0026cid\u003d9181090609208620883",
"content": "",
"maxAge": 604800,
"phoneNumbers": [
{
"type": "",
"number": "(718) 522-5200"
}
],
"addressLines": [
"1 Water Street",
"Brooklyn, NY"
]
},
{
"GsearchResultClass": "GlocalSearch",
"viewportmode": "explicit",
"listingType": "local",
"lat": "40.702956",
"lng": "-73.994105",
"accuracy": "8",
"title": "Pete\u0026#39;s Downtown \u003cb\u003eRestaurant\u003c/b\u003e",
"titleNoFormatting": "Pete's Downtown Restaurant",
"ddUrl": "http://www.google.com/maps?source\u003duds\u0026daddr\u003d1+Cadman+Plaza+West%2C+Brooklyn%2C+NY+%28Pete%27s+Downtown+Restaurant%29+%4040.702956%2C-73.994105\u0026saddr\u003d40.70%2C-74.00",
"ddUrlToHere": "http://www.google.com/maps?source\u003duds\u0026daddr\u003d1+Cadman+Plaza+West%2C+Brooklyn%2C+NY+%28Pete%27s+Downtown+Restaurant%29+%4040.702956%2C-73.994105\u0026iwstate1\u003ddir%3Ato",
"ddUrlFromHere": "http://www.google.com/maps?source\u003duds\u0026saddr\u003d1+Cadman+Plaza+West%2C+Brooklyn%2C+NY+%28Pete%27s+Downtown+Restaurant%29+%4040.702956%2C-73.994105\u0026iwstate1\u003ddir%3Afrom",
"streetAddress": "1 Cadman Plaza West",
"city": "Brooklyn",
"region": "NY",
"country": "United States",
"staticMapUrl": "http://mt.google.com/mapdata?cc\u003dus\u0026tstyp\u003d5\u0026Point\u003db\u0026Point.latitude_e6\u003d40702956\u0026Point.longitude_e6\u003d-73994105\u0026Point.iconid\u003d15\u0026Point\u003de\u0026w\u003d150\u0026h\u003d100\u0026zl\u003d4",
"url": "http://www.google.com/maps/place?source\u003duds\u0026q\u003drestaurants\u0026cid\u003d4933341782274549162",
"content": "",
"maxAge": 604800,
"phoneNumbers": [
{
"type": "",
"number": "(718) 858-3510"
}
],
"addressLines": [
"1 Cadman Plaza West",
"Brooklyn, NY"
]
},
{
"GsearchResultClass": "GlocalSearch",
"viewportmode": "explicit",
"listingType": "local",
"lat": "40.702726",
"lng": "-73.993499",
"accuracy": "8",
"title": "Grimaldi\u0026#39;s Pizzeria",
"titleNoFormatting": "Grimaldi's Pizzeria",
"ddUrl": "http://www.google.com/maps?source\u003duds\u0026daddr\u003d19+Old+Fulton+St%2C+%2C+NY+%28Grimaldi%27s+Pizzeria%29+%4040.702726%2C-73.993499\u0026saddr\u003d40.70%2C-74.00",
"ddUrlToHere": "http://www.google.com/maps?source\u003duds\u0026daddr\u003d19+Old+Fulton+St%2C+%2C+NY+%28Grimaldi%27s+Pizzeria%29+%4040.702726%2C-73.993499\u0026iwstate1\u003ddir%3Ato",
"ddUrlFromHere": "http://www.google.com/maps?source\u003duds\u0026saddr\u003d19+Old+Fulton+St%2C+%2C+NY+%28Grimaldi%27s+Pizzeria%29+%4040.702726%2C-73.993499\u0026iwstate1\u003ddir%3Afrom",
"streetAddress": "19 Old Fulton St",
"city": "",
"region": "NY",
"country": "United States",
"staticMapUrl": "http://mt.google.com/mapdata?cc\u003dus\u0026tstyp\u003d5\u0026Point\u003db\u0026Point.latitude_e6\u003d40702726\u0026Point.longitude_e6\u003d-73993499\u0026Point.iconid\u003d15\u0026Point\u003de\u0026w\u003d150\u0026h\u003d100\u0026zl\u003d4",
"url": "http://www.google.com/maps/place?source\u003duds\u0026q\u003drestaurants\u0026cid\u003d4244157563901397553",
"content": "",
"maxAge": 604800,
"phoneNumbers": [
{
"type": "",
"number": "(718) 858-4300"
}
],
"addressLines": [
"19 Old Fulton St",
"Brooklyn, NY"
]
},
{
"GsearchResultClass": "GlocalSearch",
"viewportmode": "explicit",
"listingType": "local",
"lat": "40.695108",
"lng": "-73.996252",
"accuracy": "8",
"title": "Teresa\u0026#39;s \u003cb\u003eRestaurant\u003c/b\u003e",
"titleNoFormatting": "Teresa's Restaurant",
"ddUrl": "http://www.google.com/maps?source\u003duds\u0026daddr\u003d80+Montague+Street%2C+Brooklyn%2C+NY+%28Teresa%27s+Restaurant%29+%4040.695108%2C-73.996252\u0026saddr\u003d40.70%2C-74.00",
"ddUrlToHere": "http://www.google.com/maps?source\u003duds\u0026daddr\u003d80+Montague+Street%2C+Brooklyn%2C+NY+%28Teresa%27s+Restaurant%29+%4040.695108%2C-73.996252\u0026iwstate1\u003ddir%3Ato",
"ddUrlFromHere": "http://www.google.com/maps?source\u003duds\u0026saddr\u003d80+Montague+Street%2C+Brooklyn%2C+NY+%28Teresa%27s+Restaurant%29+%4040.695108%2C-73.996252\u0026iwstate1\u003ddir%3Afrom",
"streetAddress": "80 Montague Street",
"city": "Brooklyn",
"region": "NY",
"country": "United States",
"staticMapUrl": "http://mt.google.com/mapdata?cc\u003dus\u0026tstyp\u003d5\u0026Point\u003db\u0026Point.latitude_e6\u003d40695108\u0026Point.longitude_e6\u003d-73996252\u0026Point.iconid\u003d15\u0026Point\u003de\u0026w\u003d150\u0026h\u003d100\u0026zl\u003d4",
"url": "http://www.google.com/maps/place?source\u003duds\u0026q\u003drestaurants\u0026cid\u003d12686375620276309855",
"content": "",
"maxAge": 604800,
"phoneNumbers": [
{
"type": "",
"number": "(718) 797-3996"
}
],
"addressLines": [
"80 Montague Street",
"Brooklyn, NY"
]
}
],
"cursor": {
"pages": [
{
"start": "0",
"label": 1
},
{
"start": "4",
"label": 2
},
{
"start": "8",
"label": 3
},
{
"start": "12",
"label": 4
}
],
"estimatedResultCount": "189307",
"currentPageIndex": 0,
"moreResultsUrl": "http://www.google.com/local?oe\u003dutf8\u0026ie\u003dutf8\u0026num\u003d4\u0026mrt\u003dyp%2Cloc\u0026sll\u003d37.779160%2C-122.420090\u0026start\u003d0\u0026hl\u003den\u0026q\u003drestaurants+40.70%2C-74.00"
},
"viewport": {
"center": {
"lat": "40.699396",
"lng": "-73.99675"
},
"span": {
"lat": "0.010291",
"lng": "0.007801"
},
"sw": {
"lat": "40.69425",
"lng": "-74.00065"
},
"ne": {
"lat": "40.70454",
"lng": "-73.99285"
}
}
},
"responseDetails": null,
"responseStatus": 200
}
The Google AJAX Search API documentation provides some code snippets that demonstrate API access in Java, PHP, Python, Perl and Flash.

Categories