In application I have Bing Maps API (Release Branch). Today suddenly I saw something wrong with direction module. I have set below mentioned direction modules option which were working earlier but not now. In below code I am trying to hide route and waypoints. It works for waypoints but not for route.
So I tried bing map SDK online example where I try to set routeDraggable : false but in the SDK example is not working.
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', () => {
that.directionsManager = new Microsoft.Maps.Directions.DirectionsManager(that.map);
// Set Route Mode to driving
that.directionsManager.setRequestOptions({
routeMode: Microsoft.Maps.Directions.RouteMode.driving,
routeDraggable: false
});
that.directionsManager.setRenderOptions({
drivingPolylineOptions: {
strokeColor: 'green',
strokeThickness: 3,
visible: false
},
waypointPushpinOptions: { visible: false },
viapointPushpinOptions: { visible: false },
autoUpdateMapView: false
});
const waypoint1 = new Microsoft.Maps.Directions.Waypoint({
location: new Microsoft.Maps.Location(startLoc.latitude, startLoc.longitude), icon: ''
});
const waypoint2 = new Microsoft.Maps.Directions.Waypoint({
location: new Microsoft.Maps.Location(endLoc.latitude, endLoc.longitude)
});
this.directionsManager.addWaypoint(waypoint1);
this.directionsManager.addWaypoint(waypoint2);
// Add event handler to directions manager.
Microsoft.Maps.Events.addHandler(this.directionsManager, 'directionsUpdated', function (e) {
// const that = this;
console.log(e);
var routeIndex = e.route[0].routeLegs[0].originalRouteIndex;
var nextIndex = routeIndex;
if (e.route[0].routePath.length > routeIndex) {
nextIndex = routeIndex + 1;
}
var nextLocation = e.route[0].routePath[nextIndex];
var pin = that.map.entities.get(index);
// var bearing = that.calculateBearing(startLoc,nextLocation);
that.MovePinOnDirection(that, e.route[0].routePath, pin, truckUrl, truckIdRanId);
});
this.directionsManager.calculateDirections();
});
https://www.bing.com/api/maps/sdk/mapcontrol/isdk/directionsgetrequestoptions
#rbrundritt Can you help me in this issue ?
Related
ok, here is my code
const members = [
{name: 'Abc Ijk', order: '646545', duration: '1.20h', createdOn: '02/03/2021 09:00 - 10:00', address: '1221 test Avenue Room 112 Portland OR 97204' },
{name: 'Xyz Opq', order: '646546', duration: '3.00h', createdOn: '02/03/2021 08:00 - 11:00', address: '945 nw street 852 Portland OR 97209' }
];
function loadEmpStatus() {
// var navigationBarMode = Microsoft.Maps.NavigationBarMode;
var map = new Microsoft.Maps.Map(document.getElementById('sdy-fserv-map'), {
/* No need to set credentials if already passed in URL */
// navigationBarMode: navigationBarMode.compact,
// supportedMapTypes: [Microsoft.Maps.MapTypeId.road, Microsoft.Maps.MapTypeId.aerial, Microsoft.Maps.MapTypeId.grayscale, Microsoft.Maps.MapTypeId.canvasLight],
supportedMapTypes: [Microsoft.Maps.MapTypeId.road, Microsoft.Maps.MapTypeId.aerial],
center: new Microsoft.Maps.Location(47.624527, -122.355255),
maxZoom: 11,
minZoom: 5
});
for( let row of members ) {
console.log(row);
doGeocode( map, row );
}
}
function doGeocode( map, data ) {
Microsoft.Maps.loadModule('Microsoft.Maps.Search', function () {
var searchManager = new Microsoft.Maps.Search.SearchManager(map);
var requestOptions = {
bounds: map.getBounds(),
where: data.address,
callback: function (answer, userData) {
map.setView({ bounds: answer.results[0].bestView });
var pushpin = new Microsoft.Maps.Pushpin(answer.results[0].location, {
icon: 'https://www.bingmapsportal.com/Content/images/poi_custom.png',
});
// map.entities.push(new Microsoft.Maps.Pushpin(answer.results[0].location));
map.entities.push(pushpin);
var infobox = new Microsoft.Maps.Infobox(answer.results[0].location, {
title: data.name,
description: data.address, visible: false,
actions: [
{ label: 'Handler1', eventHandler: function () { console.log('Handler1'); } },
{ label: 'Handler2', eventHandler: function () { console.log('Handler2'); } },
]
});
infobox.setMap(map);
Microsoft.Maps.Events.addHandler(pushpin, 'click', function () {
infobox.setOptions({ visible: true });
});
map.entities.push(pushpin);/**/
}
};
searchManager.geocode(requestOptions);
});
}
it runs smoothly and I have geocoded pushpins with infoboxes attached and showing up nicely.
But I am failing to figure out how to make all opened infoboxes close before opening new infobox on pushpin click event.
Please help..
I highly recommend creating a single infobox and reusing it as outline in this document: https://learn.microsoft.com/en-us/bingmaps/v8-web-control/map-control-concepts/infoboxes/multiple-pushpins-and-infoboxes
I am using Leaflet Map with geocoder (ESRI) and Routing Machine.
I have added two markers, let's say my home and my work
var marker_work = L.marker([50.27, 19.03], { title: 'MyWork'}).addTo(map)
.bindPopup("work").openPopup();
var marker_home = L.marker([50.10, 18.4], { title: 'MyHome'}).addTo(map)
.bindPopup("home").openPopup();
Here is an example fiddle:
https://jsfiddle.net/21nmk8so/1/
How can I add this markers/point as a predefined places for ControlGeocoder?
I want to use them in search and use as a start point / end point for route calculation.
Another example for the same question: how to add custom-fake city with lat/lon and be able to search (find route) to/from that city.
I don't know if this is the best solution but it is working:
Create a custom Geocoder Class which overwrites the geocode function. There you can overwrite the result function and apply suggestions to the result.
L.CustomGeocoder = L.Control.Geocoder.Nominatim.extend({
suggestions: [],
setSuggestions(arr){
this.suggestions = arr;
},
createSuggestionFromMarker(marker){
this.suggestions.push({name: marker.options.title, center: marker.getLatLng()});
},
getResultsOfSuggestions(query){
var results = [];
this.suggestions.forEach((point)=>{
if(point.name.indexOf(query) > -1){
point.center = L.latLng(point.center);
point.bbox = point.center.toBounds(100);
results.push(point);
}
});
return results;
},
geocode(query, resultFnc, context) {
var that = this;
var callback = function(results){
var sugg = that.getResultsOfSuggestions(query);
resultFnc.call(this,sugg.concat(results));
}
L.Control.Geocoder.Nominatim.prototype.geocode.call(that,query, callback, context);
}
})
Then you have to use the new Geocoder Class:
var geocoder = new L.CustomGeocoder({});
var control = L.Routing.control({
waypoints: [],
router: new L.Routing.osrmv1({
language: 'en',
profile: 'car'
}),
geocoder: geocoder
}).addTo(map);
And finally you can add suggestions over markers and theier title option over createSuggestionFromMarker(marker) or setSuggestions(arr):
var suggestions = [
{
name: 'Test Car 1',
center: [50.27, 19.03]
},
{
name: 'Test Car 2',
center: [50.10, 18.4]
}
];
geocoder.setSuggestions(suggestions);
var marker_work = L.marker([50.27, 19.03], { title: 'MyWork'}).addTo(map);
var marker_home = L.marker([50.10, 18.4], { title: 'MyHome'}).addTo(map);
geocoder.createSuggestionFromMarker(marker_work);
geocoder.createSuggestionFromMarker(marker_home);
Update, use marker Ref instead of fix latlng
Change this two function, then the marker is referenced and it always searches from the current position of the marker:
createSuggestionFromMarker(marker){
this.suggestions.push({name: marker.options.title, marker: marker});
},
getResultsOfSuggestions(query){
var results = [];
this.suggestions.forEach((point)=>{
if(point.name.indexOf(query) > -1){
if(point.marker){
point.center = point.marker.getLatLng();
}
point.center = L.latLng(point.center);
point.bbox = point.center.toBounds(100);
results.push(point);
}
});
return results;
},
You can test this in the demo, when you drag the marker
https://jsfiddle.net/falkedesign/hu25jfd1/
I try to visualize a WFS (from MapServer) in OL5.
The WFS works well (I can implement it without any problems in QGIS).
Also a request like:
http://blablabla/mapserv?service=WFS&version=1.1.0&request=GetFeature&typename=Flurstueckepunkt&srsname=EPSG:25832&bbox=411554,5791886,411677,5792008
gives me a nice gml-Output in epsg: 25832.
I try to implement it in OpenLayers like:
var vectorSource = new VectorSource({
format: new WFS(),
loader: function(extent, resolution, projection) {
var url = 'http://blablabla/mapserv?service=WFS&version=1.1.0&request=GetFeature&typename=ms:Flurstueckepunkt&srsname=EPSG:25832&bbox=412200,5791337,413600,5791800,EPSG:25832'
fetch(url).then(function(response) {
return response.text();
}).then(function(text) {
var features = vectorSource.getFormat().readFeatures(text);
// Add parsed features to vectorSource
vectorSource.addFeatures(features);
}).catch(function(error) {
alert(error.message);
})
}
});
var WFSLayer =new VectorLayer(
{
source: vectorSource,
projection: 'EPSG:25832',
style: new Style({ fill: new Fill({ color: 'yellow' })
})
});
var view = new View({
center: [rechtswert,hochwert],
zoom: mzoom,
projection: 'EPSG:25832'
});
var map = new Map({
layers: [osm,wmsLayer2,WFSLayer],
target: 'map',
view: view
});
...but the WFS-Layer is not shown at all.
Via the Mozialle-Debugger I can see, that the wfs-request workes, but nothing is visualized?
Has anybody an idea what is wrong here?
Allright, I got it. As the WFS ist delivering points the visualisation-style is important.
It workes now with:
var vectorSource = new Vector({
format: new GML3(),
loader: function(extent) {
var url = 'http://blablalbvlAn/cgi-bin/mapserv?service=WFS&version=1.1.0&request=GetFeature&typename=ms:Flurstueckepunkt&srsname=EPSG:25832&' +
'bbox='+ extent.join(',') +',EPSG:25832';
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
var onError = function() {
vectorSource.removeLoadedExtent(extent);
}
xhr.onerror = onError;
xhr.onload = function() {
if (xhr.status == 200) {
vectorSource.addFeatures(
vectorSource.getFormat().readFeatures(xhr.responseText));
var features3 = vectorSource.getFeatures();
} else {
onError();
}
}
xhr.send();
},
strategy: bbox
});
var WFSLayer =new VectorLayer(
{
source: vectorSource,
style: new Style({
image: new CircleStyle({
radius: 5,
fill: new Fill({
color: 'orange'
})
})
})
});
Bing Map Direction Manager throwing error on directionsUpdated event.
When I try to draw a rout using known source and destination lat & long with address it doesn't draw route on the map but just show source and destination icon and throw following error.
Error: We can't find directions between one or more waypoints.
Response Code: 1
Below is LoadDirection method code.
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', (e) => {
this.directionsManager = new Microsoft.Maps.Directions.DirectionsManager(this.detailMap);
this.directionsManager.clearAll();
// Set Route Mode to driving
this.directionsManager.setRequestOptions({
routeMode: Microsoft.Maps.Directions.RouteMode.driving,
routeDraggable: false
});
this.directionsManager.setRenderOptions({
drivingPolylineOptions: {
strokeThickness: 3
}
});
this.directionsManager.setRenderOptions({
firstWaypointPushpinOptions: { visible: false },
lastWaypointPushpinOptions: { visible: false },
waypointPushpinOptions: { visible: false }
});
const waypoint1 = new Microsoft.Maps.Directions.Waypoint({
address: '2115 Beall St, Houston, TX 77008, US',
location: new Microsoft.Maps.Location(29.8052803, -95.4181495), icon: ''
});
const waypoint2 = new Microsoft.Maps.Directions.Waypoint({
address: '4231 Brightwood Dr, Houston, TX 77068, US',
location: new Microsoft.Maps.Location(30.00005, -95.50392)
});
this.directionsManager.addWaypoint(waypoint1);
this.directionsManager.addWaypoint(waypoint2);
// Add event handler to directions manager.
Microsoft.Maps.Events.addHandler(this.directionsManager, 'directionsUpdated', function (e) {
console.log(e);
this.detailPathLayer.clear();
const routeIndex = e.route[0].routeLegs[0].originalRouteIndex;
const nextLocation = e.route[0].routePath[routeIndex + 1];
const pinLocation = pin.getLocation();
const nextCoord = this.CalculateNextCoord(pinLocation, nextLocation);
});
Microsoft.Maps.Events.addHandler(this.directionsManager, 'directionsError', function (e) {
console.log('Error: ' + e.message + '\r\nResponse Code: ' + e.responseCode);
});
this.directionsManager.calculateDirections();
});
There shouldn't be any problem finding a route between the two locations you provided. This standalone code below works fine, with directionsUpdated event arg printed in console (Note that you have set waypoint pushpins to invisible through render options):
var map = new Microsoft.Maps.Map(<CREATE_YOUR_MAP>);
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', (e) => {
this.directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
this.directionsManager.clearAll();
// Set Route Mode to driving
this.directionsManager.setRequestOptions({
routeMode: Microsoft.Maps.Directions.RouteMode.driving,
routeDraggable: false
});
this.directionsManager.setRenderOptions({
drivingPolylineOptions: { strokeThickness: 3 },
firstWaypointPushpinOptions: { visible: false },
lastWaypointPushpinOptions: { visible: false },
waypointPushpinOptions: { visible: false }
});
const waypoint1 = new Microsoft.Maps.Directions.Waypoint({
address: '2115 Beall St, Houston, TX 77008, US',
location: new Microsoft.Maps.Location(29.8052803, -95.4181495), icon: ''
});
const waypoint2 = new Microsoft.Maps.Directions.Waypoint({
address: '4231 Brightwood Dr, Houston, TX 77068, US',
location: new Microsoft.Maps.Location(30.00005, -95.50392)
});
this.directionsManager.addWaypoint(waypoint1);
this.directionsManager.addWaypoint(waypoint2);
Microsoft.Maps.Events.addHandler(this.directionsManager, 'directionsUpdated', function (e) {
console.log(e);
});
Microsoft.Maps.Events.addHandler(this.directionsManager, 'directionsError', function (e) {
console.log('Error: ' + e.message + '\r\nResponse Code: ' + e.responseCode);
});
this.directionsManager.calculateDirections();
});
Can you check if the error is indeed thrown between these two locations? Is everything happening in directionsUpdated handler intentional? (e.g. CalculateNextCoord perhaps?)
I have error about for info window data. I can't get the Please help me to check my code.
function initialize() {
map = new google.maps.Map(document.getElementById(map), {
center: new google.maps.LatLng(1.352083, 103.819836),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
//var infowindow;
if (markers) {
for (var level in markers) {
for (var i = 0; i < markers[level].length; i++) {
var details = markers[level][i];
//var infowindow;
markers[level][i] = new google.maps.Marker({
title: details.name,
position: new google.maps.LatLng(
details.location[0], details.location[1]),
clickable: true,
draggable: false,
icon: details.icon
});
var infowindow = new google.maps.InfoWindow({
content: details.description,
//content : markers[level][i].description,
position: new google.maps.LatLng(details.location[0], details.location[1])
//position: markers[level][i].position
});
google.maps.event.addListener(markers[level][i], 'click', function() {
infowindow.setPosition(this.position);
alert(this.position);
//infowindow.setContent(markers[level][i].description);
infowindow.open(map,markers[level][i]);
});
}
}
}
I can't get the description data. Please help me to check my code.