When click on grid item, I pass lat and long for source and destination and route display on the map.
But everytime I see latitude and longitude on [A] and [B] route point instead of address.
So how to display address on [A] and [B] point instead of lat, long ?
Following is my code.
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', () => {
that.directionsManager = new Microsoft.Maps.Directions.DirectionsManager(that.map);
that.directionsManager.clearAll();
// Set Route Mode to driving
that.directionsManager.setRequestOptions({
routeMode: Microsoft.Maps.Directions.RouteMode.driving
});
that.directionsManager.setRenderOptions({
drivingPolylineOptions: {
strokeThickness: 3
}
});
const waypoint1 = new Microsoft.Maps.Directions.Waypoint({
location: new Microsoft.Maps.Location(that.truckData.currentLat, that.truckData.currentLong)
});
const waypoint2 = new Microsoft.Maps.Directions.Waypoint({
location: new Microsoft.Maps.Location(that.truckData.workLat, that.truckData.workLong)
});
that.directionsManager.addWaypoint(waypoint1);
that.directionsManager.addWaypoint(waypoint2);
that.directionsManager.calculateDirections();
If you want something else to display instead of the coordinates, pass it into the address property of the waypoints as shown in this code sample: https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk/directionscreatedrivingroute
Related
I am trying to get elevation of clicked location via fetching elevation values from MapQuest elevation profile API
https://developer.mapquest.com/documentation/open/elevation-api/elevation-profile/get/
But I can't find the parameter of getting elevation of only one point not for a route; I mean latLng not latLngCollection.
Here is my code:
var myLocation = e.latlng;
console.log(myLocation);
fetch('http://open.mapquestapi.com/elevation/v1/profile?key=tHXSNAGXRx6LAoBNdgjjLycOhGqJalg7&shapeFormat=raw&latLngCollection='+myLocation)
.then(r => r.json())
.then(data => {
var elevation = data;
console.log(data);
})
Is there is any way to get elevation for only one point?
A one location collection seems to be working as expected.
http://open.mapquestapi.com/elevation/v1/profile?shapeFormat=raw&key=KEY&latLngCollection=51.50631,%20-0.12714
I am using leaflet and routing.control to show a route. I have it working fine, but I would like one of the markers to move with the users location using watch.position. But for now I a just trying to move the marker when I click a button. Again this works fine but when the marker moves I would like the route to update automatically. Its possible if you drag the marker so surely its possible when marker is moved in a different way? I can it if I remove the control and add a new one but this flickers too much. Any advice?
The code for the routing.control is
myroute = L.Routing.control({
waypoints: [
L.latLng(window.my_lat, window.my_lng),
L.latLng(window.job_p_lat, window.job_p_lng)
],show: true, units: 'imperial',
router: L.Routing.mapbox('API KEY HERE'),
createMarker: function(i, wp, nWps) {
if (i === 0 || i === nWps + 1) {
return mymarker = L.marker(wp.latLng, {
icon: redIcon
});
} else {
return job_start = L.marker(wp.latLng, {
icon: greenIcon
});
}
}
}).addTo(map);
and the code for moving the marker is
function movemarker() {
var lat = "52.410490";
var lng = "-1.575950";
var newLatLng = new L.LatLng(lat, lng);
mymarker.setLatLng(newLatLng);
// I assume I call something here?
}
Sorted, I did it with this, which removes first point and replaces it with new data
myroutewithout.spliceWaypoints(0, 1, newLatLng);
I am trying to use bing map to search location city and zip codes for Denmark(DK).
But some times it is not working property. I have tried using the following code with SDK:
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'Your Bing Maps Key',
});
var geoDataRequestOptions = { entityType: 'PopulatedPlace' };
Microsoft.Maps.loadModule('Microsoft.Maps.Search', function () {
var searchManager = new Microsoft.Maps.Search.SearchManager(map);
var requestOptions = new Microsoft.Maps.Search.GeocodeRequestOptions();
requestOptions.bounds = map.getBounds();
requestOptions.where = "1011 København K, DK";
requestOptions.callback = function (answer, userData) {
map.setView({ bounds: answer.results[0].bestView });
};
searchManager.geocode(requestOptions);
});
I also tried to search "1011 København K, DK" with bing map on https://www.bing.com/ its not working perfactly for me.., where as some times it working fine that is if i have search "1052 København K, DK" or "København K, DK" it will be fine please help me for the same issue..
Looking around I can't find any mapping platform that can find "1011 København K, DK". It is either a very new address or invalid one.
How to add a custom icon in mapbox?
var map = L.mapbox.map('map', 'mapbox.streets').setView([0, 0], 1);
var geojson = { type: 'LineString', coordinates: value};
var start = value[0];
var end = value[value.length-1];
geojson.coordinates.push((start,end).slice());
// Add this generated geojson object to the map.
L.geoJson(geojson).addTo(map);
// Create a marker and add it to the map.
var marker = L.marker(end, {
icon: L.mapbox.marker.icon({
"iconUrl": "https://www.mapbox.com/mapbox.js/assets/images/astronaut2.png"
})
}).addTo(map);
});
I can't able to add a custom icon in above code. Please help me..
Thanks.
First you will have to create a var, for example 'myIcon', then simply replace the iconUrl with a path that specifies the custom marker you want to use.
You can use the iconSize option to specify the size of your marker
You can use the iconAnchor option to specify which part of your masker should be placed on the latlng.
myIcon=L.icon({
iconUrl:'img/custom-marker.png',
iconSize: [25,30]
});
Then create the marker, set the lat lng where you want your marker to be placed. And specify the icon you want to use.
var Marker = new L.Marker ( latlng, {icon:myIcon});
Finally add your market to the map:
map.addlayer(Marker);
I have a map of bing maps and I use has created pushpin do with double click. And now I want to make limits pushpin only <= 20.
If it has been over the limit point is then automatically pushpin cannot be displayed. Although double click in map.
But I don't understand how to create it. Can you help me? Thanks a lot. Gbu.
My code to show pushpin
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions);
Microsoft.Maps.Events.addHandler(map, 'dblclick',getLatlng );
}
//show pushpin
function getLatlng(e) {
if (e.targetType == "map")
{
var point = new Microsoft.Maps.Point(e.getX(), e.getY());
var locTemp = e.target.tryPixelToLocation(point);
var location = new Microsoft.Maps.Location(locTemp.latitude, locTemp.longitude);
alert(locTemp.latitude + "&" + locTemp.longitude);
var pin = new Microsoft.Maps.Pushpin(location, { 'draggable': false });
map.entities.push(pin);
alert("Done");
Microsoft.Maps.event.addListener(map, 'click', function (event)
{
}
// limit pushpin
*How to create limit pushpin?*
In the getlatlng function you can do a simple check to see how many shapes are on the map. You can get the number of shapes on the map in your application by doing the following:
var cnt = map.entities.getLength();