Display all business locations from Data Source URL in Bing Maps - javascript

For a store locator, let's say I'm using Bing's example data source url: https://spatial.virtualearth.net/REST/v1/data/515d38d4d4e348d9a61c615f59704174/CoffeeShops/CoffeeShop
In Bing's example, the user has to search in order for the store locations to populate, which is fine if you're Starbuck's and you have thousands of locations, but business requirements are that we need to show all of our 10-15 locations on a map of the full United States.
It looks like there are plenty of modules for searching and finding all locations within a box, or finding nearby locations within a specified radius, clustering a lot of locations within the viewport, but I can't for the life of me figure out how to simply load all Contoso Coffee locations from the data source URL.
The closest answer that I could find is this:
Zoom to show all locations in bing maps
The chosen answer:
var locations = CurrentItems.Select(model => model.Location);
map.SetView(LocationRect.CreateLocationRect(locations));
But I could not get it to work. I've also tried:
var queryOptions = {
queryUrl: dataSourceUrl,
spatialFilter: {
spatialFilterType: 'nearby',
location: location,
radius: 1000
},
};
Microsoft.Maps.SpatialDataService.QueryAPIManager.search(queryOptions, map, function (results) {
...
});
This doesn't work because 1000 is the max radius and some of the my locations would be outside of it.
Other than that, I've been trying to find the exact module that reproduces vaguely what I'm looking for, but they keep coming up as dead ends.
I'm sure it's very simple, but the answer has eluded me. Thanks!
~Andrew

Instead of doing a radius search you can use a bounding box and page through the results if there is more than 250 (max results per query) by using the $top and $skip parameters. In theory you could download a full data source if you used a global bounding box and stepped through all results.
Here is an example: https://bingmapsv8samples.azurewebsites.net/#Load%20all%20results%20(parallel)
Just in case you hadn't noticed, the Contoso coffee data source is an example data source with fake coffee shop listings. It's primarily for testing/example use.

Related

Highlight an existing business on Google Maps API

I have a list of store addresses, and I'm trying to create a map out of it.
Using the Places API I am able to retrieve most of the informations and manually create and place the markers on the map:
const service = new google.maps.places.PlacesService(map);
service.findPlaceFromQuery({
query: '212 Enterprise Dr, Rockaway, Frank Pizza',
fields: ['all']
}, onPlaceFound);
However I'd like to select the original marker instead of overlapping a new one.
That is because I want the user to be able to open the default info window with store phone number, directions and stuff.
I know that I can re-create it, but it feels kinda lame since all the info is already there.
This SO post ask about the same, yet no solution has been found.
Based on the documentation found here, which shows findPlaceFromQuery(), the second parameter of findPlaceFromQuery should be a function where the first argument of that function is an Array of placeResults.
Therefore, after reviewing a link here and here your onPlaceFound function should be looking something like:
function onPlaceFound(placeResultsArray){
const firstResult = placeResultsArray[0], firstIconURL = firstResult.icon;
const latLng = firstResult.geometry.location, lat = latLng.lat(), lng = latLng.lng();
// do stuff with those variables here
}
Of course, that does not select Google's result as a Marker, but now you have the actual icon, and latitude and longitude.

How can I get the shape of a Road Element using the Javascript API?

I want to highlight a specific section of a road on my map. The user should be able to click on a map and using the Location of the click, I want to highlight the closest road element.
In the Here Android SDK, the RoadElement can do exactly what I want: I can pass some coordinates and use getGeometry() to obtain the exact shape of the road element.
However, I couldn't find something similar to this in the javascript SDK. I tried using Reverse Geocoding:
var geocodingParams = {
lat: road.lat,
lng: road.lng,
mode: 'retrieveAddresses',
maxresults: '1',
additionaldata: ['IncludeShapeLevel', 'postalCode'],
prox: road.lat + ',' + road.lng
};
this.geoCodingService.reverseGeocode(geocodingParams, onResult, null);
This way, I can find the closest road, but I don't get accurate shape data. In the Results View, there is only the Bounding Box (Location.MapView.BottomRight and Location.MapView.TopLeft).
How can I achieve something similar to the RoadElements, using the Javascript API?
Our routing APIs return the shape points along a route. So given a set of start and stop waypoints the JavaScript SDK routing API will give the route shape.
Example code is included on this page:
https://developer.here.com/documentation/maps/dev_guide/topics/routing.html
Another alternative will be to use the Advanced fleet telematics API and look into the datasets yourself.

How to obtain instagram pictures from a place consuming instagram API?

I gave a look to instafeed.js. It works good right away, I followed the first docs and got a 20 images sample displaying at web page.
However I really need to obtain pictures from a certain place (city, in my case). Working with Twitter API I used to look for the WOEID for the wanted place. Here it seems to be quite similar.
I read Instagram docs:
DISTANCE Default is 1000m (distance=1000), max distance is 5000.
FACEBOOK_PLACES_ID Returns a location mapped off of a Facebook places id. If used, a Foursquare id and lat, lng are not required.
FOURSQUARE_ID Returns a location mapped off of a foursquare v1 api location id. If used, you are not required to use lat and lng. Note that this method is deprecated; you should use the new foursquare IDs with V2 of their API.
LAT Latitude of the center search coordinate. If used, lng is required.
LNG Longitude of the center search coordinate. If used, lat is required.
FOURSQUARE_V2_ID Returns a location mapped off of a foursquare v2 api location id. If used, you are not required to use lat and lng.
But where the hell can I obtain such ID's for a city. Let's say I want pictures tagged with dinner at Puebla, Mexico. What should I do.
I used this nice site to get an ID from my coordinates: http://maihamakyo.org/etc/locastagram/index.php
Tried this Java Script code then:
var feed = new Instafeed({
get: 'tagged',
location: '46016173',
tagName: 'CLEU',
clientId: '***'
})
feed.run();
but got not the expected result.
As of version 1.3, you can add a filter function to Instafeed.js, to exclude images from the results.
So you should be able to set get: "location", and your locationId, and then filter out any images that don't contain the tag you're looking for:
var feed = new Instafeed({
get: 'location',
locationId: LOC_ID,
// other settings omitted for example
filter: function(image) {
return image.tags.indexOf('TAG_NAME') >= 0;
}
});
feed.run();
Update
The image parameter that gets passed to the filter function is the image data straight from Instagram's API. So you can filter on any criteria you want. Just make sure the function returns true or false:
filter: function(image) {
if (image.tags.indexOf('TAG_NAME') >= 0 && image.filter === "Normal") {
return true;
}
return false;
}
To get an idea of what properties that image object has, check this thread on GitHub.
Looking at the instafeed.js documentation, the option name/key for location should be locationId.
I'm not familiar with the Instagram API, but the instafeed.js documentation hints heavily that get needs to be set to location to use a location ID. So it is very possible you can only search for a tag, or a location, but not both.

google maps geocoding changes

Has anyone noticed that google maps geocoding have changed the variable name of the lat and lng from, Qa and Ra to Pa and Qa.
Does anyone know a reason for this?
Edit: If you're using the Google Maps Geocoding Service, as #hamczu suggests, then you should be getting the results like this:
{
... snip ...
geometry: {
location: LatLng,
... snip ...
}
}
It sounds like you're not using the API methods for the LatLng object, but are instead trying to use its undocumented properties. Your question demonstrates one of the best reasons why this is a Bad Idea - the Google code is compressed and obfuscated, using short, arbitrary variable and property names, and Google may recompress its code at any time, arbitrarily changing these names. What it won't change is the function and attribute names in the published API - that's the whole point of having an API to begin with, and the reason why developers should code against the API, not the "undocumented features" of the currently available code.
So the best approach is to use the documented methods:
var lat = result.geometry.location.lat();
var lng = result.geometry.location.lng();
Otherwise, your code will likely break every time Google recompresses its code.

Definitive reference for Google Maps Placemark object

I am using the following method to reverse geocode a google maps latlng:
[GClientGeocoder.getLocations(address:String, callback:function)][1]
Which states as follows:
As this method requires a call to a Google server, you must also pass a callback method to handle the response. This response will contain a Status code, and if successful, one or more Placemark objects.
Can anyone point me to a definitive reference of what a Placemark object is as it seems to return different attributes for different locations. e.g. sometimes I get a ThoroughfareName and others an AddressLine. I would like to understand if I will always get one or other of them and whether they are interchangeable.
This page is from the Google Maps API documentation, and contains a pretty straightforward explanation of what a Placemark object is.
However, the part you probably want to focus on is where it states what format Google uses for the AddressDetails object in a Placemark, which is xAL (eXtensible Address Language). There is a link to the spec there, which leads to a downloadable schema (xsd file), which essentially defines the entire format. A word of warning: the spec is pretty extensive, but you may not need to worry about a great deal of it for your project.
EDIT:
Apologies for not being allowed to add links to the relevant pages for you.
You have to hunt for it, but Google does in fact have some documentation about Placemarks hidden away.
The contents of the Placemark object do vary based on the data available. I found the best way to work out what I was getting back was to use JSON.stringify to examine the response (for debugging):
function onGeocode (resp)
{
document.getElementById("cd_output").innerHTML = JSON.stringify (resp);
}
This gave me the following results when I GeoCoded an address in Sydney, Australia:
Placemark
{
id, address,
AddressDetails
{
Country, CountryNameCode, CountryName,
AdministrativeArea
{
AdministrativeAreaName,
Locality
{
LocalityName
Thoroughfare { ThoroughfareName }
PostalCode { PostalCodeNumber }
}
}
}
Accuracy,
ExtendedData
{
LatLonBox { north,south,east,west }
Point { coordinates }
}
}

Categories

Resources