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.
Related
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?
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
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.
I'm writing my first larger project in react and I need to set up markers in my map component. I've set everythin up as it is shown in the tutorial however it is not working correctly with my code and the markers are not shown on map.
const dummyGeoJson = {
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {},
geometry: {
type: "Point",
coordinates: [16.959285736083984, 52.40472293138462]
}
}
]
};
class EventMap extends React.Component {
componentDidMount() {
this.map = L.map("map", {
center: [51.9194, 19.1451],
zoom: 6
});
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 20
}).addTo(this.map);
var geoJsonLayer = L.geoJSON().addTo(this.map);
geoJsonLayer.addData(dummyGeoJson);
}
render() {
return <Wrapper width="100%" height="800px" id="map" />;
}
}
From what i've read in official leaflet tutorial this code should create a new geojson layer and create a marker in a position referenced in geojson but actually the only thing that is shown is my tile layer.
You need to use a pointToLayer function in a GeoJSON options object when creating the GeoJSON layer like this:
componentDidMount() {
const map = L.map("map", {
center: [51.9194, 19.1451],
zoom: 6
});
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 20
}).addTo(map);
L.geoJSON(dummyGeoJson, {
pointToLayer: (feature, latlng) => {
return L.marker(latlng, { icon: customMarker });
}
}).addTo(map);
}
You can then pass a customMarker variable to define some options in order to make your marker be displayed on the UI
Demo
Welcome to SO!
The most probable reason is that you bundle your app (typically with webpack), but the build misses Leaflet default icon images.
So your Marker is there, but you cannot see it because its icon image is missing.
An easy way to debug it is to use another icon instead, as suggested in kboul's answer, or even more simply by using a CircleMarker.
Then to solve the issue of the build engine missing to process the default icon images, see Leaflet #4968:
explicitly import / require the Leaflet default icon images and modify the L.Icon.Default options to use the new imported paths
or use the leaflet-defaulticon-compatibility plugin (I am the author).
I am trying to use the angular google maps(http://angular-ui.github.io/angular-google-maps/) directive in my application, so converting my code to work with that directive and stuck up in that process to apply custom shape to the markers.
Anybody who is familiar with angular google maps can help me to resolve this issue, please check the below mentioned code written in plain google maps library and let me know how to make this code working with the angular google maps directive.
new google.maps.Marker({
position: latLng,
map: map,
icon: {
url: 'path/to/icon',
origin:new google.maps.Point(0,0),
anchor:new google.maps.Point(3,4)
},
shape: {
coords:[0, 6, 7, 0, 16, 0, 23, 6, 12, 12],
type:"poly"
}
});
Yeah, I found the solution here, we need to set that as an attribute to OPTIONS object as mentioned below:
markers.push({
latitude: site.latitude,
longitude: site.longitude,
id: 1,
icon: {
url: 'path/to/icon',
origin: origin,
anchor: anchor
},
options: {
shape: {
coords: phaseMarker.coords,
type: "poly"
}
}
});
Note: I tried this even before posting this question, but that didn't worked well due to duplicate ID attribute for markers, so make sure we have unique ID for each marker if we have a set of markers in our map.