I am using mapbox geocoder to search for a location in one of my mapbox project. I am able to implement the search functionality successfully but I am having hard time in extracting the selected address by the user from the list of searched/suggested addresses.
Is there any way to get the coordinates of the searched place?
I went through mapbox docs but only found an event 'moveend' which is fired when we fly to some location. So I am listening for that event and once fired, I am calling getBounds() function on the map. It somehow works but it doesn't give me the exact coordinates since getBounds() gives the South West and North East coordinates of the box. Can we get the exact coordinates of the selected place?
Below is the code I am using to search for a place.
initMapSearch() {
var _this = this;
var geocoder = new MapboxGeocoder({ accessToken: environment.mapbox.accessToken, mapboxgl: mapboxgl });
this.locationObj = geocoder.onAdd(_this.map)
document.getElementById('geocoder').appendChild(this.locationObj);
}
And this is my moveend event.
this.map.on('moveend', function() {
_this.lat = _this.map.getBounds()["_ne"]["lng"];
_this.long = _this.map.getBounds()["_ne"]["lat"];
});
Thanks in advance to the community.
You should listen to geocoder.on('result') which is passed the feature (and its location).
Related
I found an address with the Mapbox Geocoding API. Then I want to highlight that building on the map.
It works in native, but does not in web. I want to have the point in the mapBox view for the renderedFeatures.
Something like this
pointInView = await map.getPointInView(foundAddress.center)
foundBuildings = await map.queryRenderedFeaturesAtPoint(pointInView)
How can I convert long,lat to the a point in mapbox-gl-js
Update
Found something helpful
How can I query the feature that's closest to the geocode result in Mapbox?
Found it, it's called project(LngLat)
pointInView = await map.project(foundAddress.center)
See: https://docs.mapbox.com/mapbox-gl-js/api/#map#project
Mapbox has a default geocoding feature called flyto. It zooms out of your current location pans across the map and zooms in on another location. This looks cool but it seems to run slow with a large data set. Is it possible to change the default geocoding feature to Jumpto instead of Flyto? I've noticed jumpto tends to load faster in other examples with large data.
See the API documentation https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md there is a flyTo option you can set to false.
Disabling the flyTo will result in the map not moving at all. There is currently no way to make use of a jumpTo animation with the Geocoder Control but what you can do change the animation properties.
As per the documentation, the flyTo parameter accepts an AnimationOptions object as a parameter, where you can set the duration to 0.
const geocoder = new MapboxGeocoder({
accessToken: MAPBOX_ACCESS_TOKEN,
mapboxgl: mapboxgl,
flyTo: { duration: 0 }
});
This will make the animation instantaneous.
I followed the Bing Maps docs for Zoom into Clusters. Since Microsoft only embeds a screenshot, here's a working example. When you click on a cluster, notice that the cluster itself is not updated. Just pan the map very little bit, and then the map with its clusters is refreshed.
So either the Bing Maps documentation is broken or it is a Bing Maps bug.
Any idea for a workaround, e.g. how to force a map refresh after the map has zoomed in?
The relevant code (which does not update the map/clusters) is this, especially the last line:
function clusterClicked(e) {
if (e.target.containedPushpins) {
var locs = [];
for (var i = 0, len = e.target.containedPushpins.length; i < len; i++) {
//Get the location of each pushpin.
locs.push(e.target.containedPushpins[i].getLocation());
}
//Create a bounding box for the pushpins.
var bounds = Microsoft.Maps.LocationRect.fromLocations(locs);
//Zoom into the bounding box of the cluster.
//Add a padding to compensate for the pixel area of the pushpins.
map.setView({ bounds: bounds, padding: 100 });
}
This is a known issue that has been fixed in the experimental branch. You can try this out by adding "&branch=experimental" to the map script URL. All fixes and features in the experimental branch will be rolled into the main release branch at the end of July.
Also, just so you are aware, there are a bunch of interactive code samples for V8 available here: http://www.bing.com/api/maps/sdk/mapcontrol/isdk#overview
I have a Mapbox GL map with a single layer and multiple markers on that layer, I am trying to draw route + show route information (distance / time / routes to take from origin to destination) in my app using the Directions GL plugin. Unfortunately I can't find any information beyond setting origin / destination (as shown below) in order to display route + route data on my map. The only available information I could find was that mentioned in MapBox GL driving directions example, yet this is not what I really want as I don't want to show the origin / destination as A and B points, nor show the A/ B points search box as in the mapbox.com example above.
Can someone please help me by telling me what I'm missing here and how I can draw the route between origin / destination, display route info using the Mapbox GL plugin? Thanks
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v8',
center: [userCoordinates.coords.longitude, userCoordinates.coords.latitude],
zoom: 15
});
var directions = new mapboxgl.Directions({
unit: 'metric',
profile: 'driving'
});
directions.setOrigin([userCoordinates.coords.longitude, userCoordinates.coords.latitude]);
map.on('click', function(e) {
var features = map.queryRenderedFeatures(e.point, { layers: ['gsLayer'] });
if (!features.length) {
return;
}
var feature = features[0];
directions.setDestination([feature.geometry.coordinates[0], feature.geometry.coordinates[1]]);
});
It sounds like you don't want to use a plugin at all and instead make a request directly to the Directions API.
I'd recommend taking a look at mapbox-sdk-js - a helpful js lib for making client requests. The API docs for directions can be found here.
i'm drawing polyline on MapView using "google direction API" and getting success in it.But the thing is that it draws straight line between two locations(with their longitude and latitude).I don't know how to draw line effectively like shown by google maps,when we click "get directions" between two locations.
I suggest taking a look at an SDK like CloudMade, this makes it very easy to implement custom maps and route's, you'll be able to draw a route between two locations within about 10 minutes of installing the SDK. Here is a quick example to get you started if you go down this route, excuse the pun.
CLLocationCoordinate2D initLocation;
initLocation.longitude = -0.127523;
initLocation.latitude = 51.51383;
CLLocationCoordinate2D destination;
destination.longitude = -0.125;
destination.latitude = 51;
TokenManager* tokenManager = [[TokenManager alloc] initWithApikey:#"YOUR API KEY"];
CMRoutingManager *routeManager = [[CMRoutingManager alloc] initWithMapView:mapView tokenManager:tokenManager];
[routeManager findRouteFrom:initLocation to:destination onVehicle:CMVehicleWalking];
You can find more information here in the documentation. Another alternative would be to use route-me which would allow you to choose from the following map sources:
OpenStreetMap, Microsoft VirtualEarth, CloudMade, OpenAerialMap, OpenCycleMap, SpatialCloud, and two offline, database-backed formats (DBMap and MBTiles)
Although personally i do not have any experience with route-me, so can't point you in the right direction to get started.
If you are adement on sticking with MKMapView, this blog post will get your started in the right direction.