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.
Related
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).
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 have a leaflet project where I am delivering a continuous stream of 'coordinates' via WebSockets to the client browser. I need to be able to display markers corresponding to those locations for a set period of time (something like 1 or 2 seconds) and then remove them (to make room for more locations).
Can anyone help me out or point me in the direction of resources wherein I could find some help?
Thanks!
Edit : Why the downvote? Its a legitimate and common question and one without a lot of solutions online.
Here is some code from the documentation (http://leafletjs.com/reference-1.0.3.html#layer):
var layer = L.Marker(latLng).addTo(map);
layer.addTo(map);
layer.remove();
So in order to remove it after 2 seconds, I think you could try this one:
var layer = L.Marker(latLng).addTo(map);
layer.addTo(map);
setTimeout(function() {
layer.remove();
}, 2000);
Example
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