I have added MapboxDirections control to by map using the normal method, which is working.
map.current = new mapboxgl.Map({
container: mapContainer.current,
style: 'mapbox://styles/mapbox/outdoors-v11',
center: [lng, lat],
zoom: zoom
});
directions.current = new MapboxDirections({
accessToken: mapboxgl.accessToken,
unit: 'metric',
profile: 'mapbox/cycling'
});
map.current.addControl(directions.current, 'top-left');
I want to add a SAVE button allowing me to get all the waypoints/coordinates of the route (that I can see on the map) but I cannot find a way to extract the coordinates out of the mapboxgl.Map or MapboxDirections object. I want to be able to save/download the results to a file.
Any ideas?
Related
I'm working on a mapbox app and I need to make a dynamic URL to reflect mapbox info like lat, long and zoom level.
ex: /?city=London&zoom=1&lat=30&lng=140. On page load map should be centred and zoomed accordingly. How to read/write page URL?
Just activate the hash : true in the Map initial settings
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/outdoors-v11',
center: [128, 47],
zoom: 16.5,
pitch: 60,
hash: true // just add this
});
It’s not the same param names but you’ll have the same information
I am integrating MapBox Direction API in react. I have more than 25 waypoints (around 500). How do I use all using "mapbox-gl-directions". Because, I can't send not more than 25 wp. So, how can I send multiple request with 25 wp each time 25. How?
Below is my sample code:
componentDidMount() {
let directions = new MapboxDirections({
accessToken: mapboxgl.accessToken,
unit: 'metric',
profile: 'mapbox/driving',
interactive: false,
controls: false
});
this.map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [3.1026, 36.6686],
//center: [this.state.lng, this.state.lat],
zoom: 10
});
this.map.on('load', function() {
directions.setOrigin([-117.1425, 32.63638889]);
directions.addWaypoint(0, [-117.1425, 32.63638889]);
directions.addWaypoint(1, [-117.195, 32.75416667]);
---
---
directions.addWaypoint(23, [-116.5012667, 32.92583333]);
directions.setDestination([-116.5616667, 32.93583333]);
})
this.map.addControl(directions, 'top-left');
}```
Any suggestion? Thanks in advance.
You could break the waypoints up into 25 waypoints chunks and request directions from the Directions API before loading the map. Then you could join the response route JSON objects to one route object, which you can then use in the same way as the single route object in terms of drawing it on the map.
I am using OpenLayers Library for Showing some specific points on Map. I want to show only 10km area from the center point. Can any one help me doing this?
Here is the snippet of my code.
var map = new Map({
layers: [
new TileLayer({
source: new OSM()
}),
vectorLayer
],
target: 'map',
view: new View({
center: transform([19.83752162, 52.09696925], 'EPSG:4326', 'EPSG:3857'),
zoom: 12,
})
});
To achieve this you have to do some pre-processing before map initializing.
1- Make feature from center coordinates.
let pointFeature = new ol.Feature(
new ol.geom.Point(transform([19.83752162, 52.09696925], 'EPSG:4326', 'EPSG:3857'))
);
2- Get extent of above created feature.
let poitnExtent = pointFeature.getGeometry().getExtent();
3- Buffer the extent to your desired radius.
let bufferedExtent = new ol.extent.buffer(poitnExtent, raduis goes here (In meters));
4- Use this buffered extent to initialize map.
var map = new Map({
layers: [
new TileLayer({
source: new OSM()
}),
vectorLayer
],
target: 'map',
view: new View({
center: transform([19.83752162, 52.09696925], 'EPSG:4326', 'EPSG:3857'),
extent: bufferedExtent,
zoom: 12,
})
});
It's a react.js project with OpenLayers 5.3.0
The map is defined in
componentDidUpdate() {
this.map = new Map({
target: this.container,
view: new View({
center: [2.5, 2.5],
projection: projection,
zoom: 2,
minZoom: 0.1,
maxZoom: 7
}),
interactions: defaultInteractions({
// dragPan: false,
keyboard: false,
// mouseWheelZoom: false,
doubleClickZoom :false
}),
layers: [graphic, this.roadLayer, this.robotLayer, this.laserLayer, this.targetLayer, this.restrictLayer, this.specialLayer]
});
view=this.map.getView();
zoom=view.getZoom();
view.on('change:resolution',function(e){
console.log('change:resolution');// dosen't work
});
view.on('change:center',function(e){
console.log('moveing');
});
this.map.on('moveend',function(e){
console.log(view);
zoom = view.getZoom();
// console.log("resolution", view.getResolution()); // Always the same
// console.log('moveend');
console.log("zoom"+zoom); // Always 2
if(view.getZoom()!==zoom)
console.log('zomeend了,change:zoom了');
});
};
The problem is when I zoomin the map, change:resolution won't be triggered and zoom would always be 2 as init value. I also tried put map.on('moveend') at like componentDidMount(), same result.
Why can't I get the current Zoom?
Is it the problem of life circle of React? Any hint would be a huge help.
According to the documention a marker is optional with an infoWindow, so how is this achieved please? I have tried infowindow.open(map) and infowindow.open(map,null) but both produce nothing.
If the position is set, there is no problem showing the info window
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {lat: 55.6761, lng: 12.5683},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var infowindow = new google.maps.InfoWindow({
content: "Copenhagen"
});
infowindow.setPosition({lat: 55.6761, lng: 12.5683});
infowindow.open(map);
}
infowindow.open(map) makes no sense since you need to specify the position where the infowindow should open, also it has a tapered stem which specifies the location where it should point.
According to the documentation of Infowindows- InfoWindows may be attached to either Marker objects (in which case their position is based on the marker's location) or on the map itself at a specified LatLng.
So if you donot want the marker to open the infowindow, use the map click event-
var iwindow= new google.maps.InfoWindow;
google.maps.event.addListener(map,'click',function(event)
{
iwindow.setContent(event.latLng.lat()+","+event.latLng.lng());
iwindow.open(map,this);
iwindow.open(map,this);
});
And to close a InfowWindow- infowindow.setMap(null);
Hope that cleared your doubts.
Since the api has changed, it is not possible to set position on info window any more. the solution i found is to add a marker to the map with visibility false:
this.map.addMarker({
position: {
'lat': sites[0].latitude,
'lng': sites[0].longitude
},
// setting visible false since the icon will be the poi icon
visible: false
}).then((marker: Marker) => {
this.htmInfoWindow.open(marker);
});