Is it possible to get a marker/point's coordinates, based on it's title?
I'm, loading in several points, which all have specific IDs as their title.
What i need now, is the ability to flyTo one of these markers when i enter the view and one is highlighted.
I'm highlighting with the below function, and would like to implement the flyTo in it.
$scope.$on('$ionicView.afterEnter', function(){
if(ShowOnMap.story()){
var storyId = ShowOnMap.story();
map.setFilter("highlight", ["==", "title", storyId]);
map.flyTo({
center: [---->storyId<-----],
zoom: 18
});
ShowOnMap.setStory(false);
}
});
So all i need, is a way to get the position(coordinates) of the point, based on the ID/Title i receive.
Bonus info: The storyID is sent from another view, and i am currently not able to send the coordinates and would like to avoid requesting the coordinates from server, based on ID.
Related
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.
I am trying to achieve dynamic 3D model of a building which i choose during search criteria, so far the code i have done is below.
map.on('load', function () {
// Listen for the `geocoder.input` event that is triggered when a user
// makes a selection
geocoder.on('result', function (ev) {
debugger;
var layers = map.getStyle().layers;
var styleSpec = ev.result;
var styleSpecBox = document.getElementById('json-response');
var styleSpecText = JSON.stringify(styleSpec, null, 2);
var syntaxStyleSpecText = syntaxHighlight(styleSpecText);
styleSpecBox.innerHTML = syntaxStyleSpecText;
map.addSource('floorplan', {
// GeoJSON Data source used in vector tiles, documented at
// https://gist.github.com/ryanbaumann/a7d970386ce59d11c16278b90dde094d
'type': 'geojson',
'data': 'https://docs.mapbox.com/mapbox-gl-js/assets/indoor-3d-map.geojson'
});
map.addLayer({
'id': 'room-extrusion',
'type': 'fill-extrusion',
'source': 'floorplan',
'paint': {
// See the Mapbox Style Specification for details on data expressions.
// https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions
// Get the fill-extrusion-color from the source 'color' property.
'fill-extrusion-color': ['get', 'color'],
// Get fill-extrusion-height from the source 'height' property.
'fill-extrusion-height': ['get', 'height'],
// Get fill-extrusion-base from the source 'base_height' property.
'fill-extrusion-base': ['get', 'base_height'],
// Make extrusions slightly opaque for see through indoor walls.
'fill-extrusion-opacity': 0.5
}
});
});
});
As i have tried to add this json URL (https://docs.mapbox.com/mapbox-gl-js/assets/indoor-3d-map.geojson) which i have found on this link: https://docs.mapbox.com/mapbox-gl-js/example/3d-extrusion-floorplan/
It only shows a fixed location in 3D of a building which is given on the second URL.
Now actually I want to achieve a specific 3D building on the map as only dynamic when i use search criteria.
The GeoJSON data at this file which you are using contains polygon features along with coordinates representing where in the geographic space these polygons are located. The extrude polygons for 3D indoor mapping example which you are referencing creates the "3D model" being display by taking the two-dimensional geometries specified by the polygon features in the GeoJSON used as a source, and then adding a corresponding layer which makes use of fill extrusions to visually extrude these two-dimensional polygons into three dimensions.
So, unless you change the contents of the GeoJSON file used as the source, it is expected behavior that the "3D model" of the building will continue to display at the same geographic location. If the geocoder returns the location of a particular building based on the input search criteria, you will still need to specify which GeoJSON polygons should be extruded to create the extruded model of the building. The Geocoding API response body for an address search itself likely won't be enough for this, since only a coordinate will be returned representing the location of this POI. As such, you would need to integrate some custom building data or another custom workflow to generate the polygons needed to extrude a variety of building polygon geometries.
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.
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.
I'm trying to reload points on a map based on when someone clicks a button.
I have a couple json objects saved in memory, "data" and "data2". The following code takes the "data2" JSON file and sets it equal to the "data" JSON file and then triggers a map reload event.
dataholder = data
function myFunction() {
data = dataholder
window.data = data2;
google.maps.event.trigger(map, 'resize');
}
Currently, the map won't reload with the new set of data. However, I am not getting any error messages.
There's no map reload event. The resize event, when it comes from a window resize, will at most recalculate the map bounds and reproject the existing features (markers, polylines, polygons). For this case in particular, I don't think that manually triggering the resize event will have any effect.
In second place, you say you have two json files, but your code suggest you instead have two json objects already in memory (meaning you don't need to perform aditional requests to retrieve the value of data2). The rest of the answer will assume that.
If your original collection of markers came from "data", which is a collection of LatLng pairs, and you want to replace the markers for the contents of "data2" the process would be:
1.- Push the markers into an object where you can find them later on
var markers=[];
for(onemarker in data) {
var newmarker=new google.maps.Marker({map: map, position: new google.maps.LatLng({onemarker.lat, onemarker.lng}) });
markers.push(newmarker);
}
2.- When you want to replace the markers, first purge the markers array
while(markers.length) {
var oldmarker=markers.pop();
oldmarker.setMap(null);
};
3.- Fill the markers array with the data from the data2 object
for(onemarker in data2) {
var newmarker=new google.maps.Marker({map: map, position: new google.maps.LatLng({onemarker.lat, onemarker.lng}) });
markers.push(newmarker);
}
For this kind of markers, as for the regular features, there's no instantaneous binding between the object and the underlying data. This is slightly different for the new google.maps.Data() layer for which you can skip the iteration and just feed it a geoJSON array. You still need to have an object to store the current markers, or else you won't have a way to access them when you want to remove them.