I am trying to do is show a small bing generated map centred on a uk postcode through the ajax API. I am sure this is possible; what i can't find in the Bing Map documentation how to convert a UK Postcode into coordinates that I can plug into the Maps Ajax Control. Can anyone point me in the right direction?
function GetMap()
{
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
{credentials: "MyKeyHere",
center: new Microsoft.Maps.Location(45.5, -122.5),
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 7});
}
You can use the Bing Maps REST Locations service to geocode the postcode, and then create a map centred on the resulting coordinate location:
For example, to geocode the postcode "NR2 4TE":
http://dev.virtualearth.net/REST/v1/Locations/UK/NR24TE?key=YourBingMapsKey
Look in the coordinates property of the "point" object returned to get the latitude and longitude coordinates on which to centre your map.
Related
For example:
When I add a routingControl to the map, I have all the route coordinates in this object:
const routingControl = L.Routing.control({
waypoints: route.points,
}).addTo(map)
console.log("routingControl", routingControl)
In routingControl._line._route.coordinates I have all calculated coordinates
Can I get these coordinates without .addTo(map)?
Bing snap to road api - https://learn.microsoft.com/en-us/bingmaps/rest-services/routes/snap-points-to-roads
How to project the response on bing map?
You have to convert the points array into an array of Location objects and then pass that into a polyline to render it on the map as line. For example:
var coords = [];
response.points.forEach(p => {
coords.push(new Microsoft.Maps.Location(p.latitude, p.longitude));
});
//Create a polyline
var line = new Microsoft.Maps.Polyline(coords, {
strokeColor: 'red'
});
//Add the polyline to map
map.entities.push(line);
I learned how to create a Leaflet map with Socrata open data when latitude and longitude appear in separate columns. See working examples at https://github.com/JackDougherty/leaflet-socrata
My problem: how to make this work when latitude and longitude are combined in one point data field (geom) inside Socrata? This is common for datasets published on http://data.hartford.gov. See my non-working example at https://github.com/JackDougherty/leaflet-socrata
Solved with this code snippet:
// load open data from Socrata endpoint in GeoJSON format
// Food Establishments, City of Hartford Open Data https://data.hartford.gov/resource/daux-ukcc
$.getJSON("https://data.hartford.gov/resource/daux-ukcc.geojson", function (data){
var geoJsonLayer = L.geoJson(data, {
pointToLayer: function( feature, latlng) {
var marker = L.marker(latlng);
marker.bindPopup(feature.properties.blms_dba); // replace last term with property data labels to display from GeoJSON file
return marker;
}
}).addTo(map);
});
See my notes and more examples at https://www.datavizforall.org/leaflet/with-socrata/
Is it possible in Mapbox GL JS to get the users bearing?
I would like to show the direction in which the user is facing, to assist them in navigating to nearby POI.
I understand that it is possible to set the bearing of the map and also get the current bearing of it, but i need the actual real life bearing of the user.
Kind of the same thing as on Google Maps:
The service is intended to run as an Ionic app on iOS and Android, and the assistance in bearing is a key feature in helping them locate nearby POI on a well populated map.
You can get the user's bearing (if their device has such a sensor) by obtaining a Coordinates object from Gelocation#getCurrentPosition() and reading Coordinates#heading.
Mapbox GL JS has no built-in user interface for displaying a user's heading. Building your own user interface is easy. See this example which uses the symbol-rotation property.
So, after some time spend on this, i thought I'd show how i ended up doing this, in case someone else needs it or have a better solution.
It seems cordova has a built in "heading" property in the position object.
https://github.com/apache/cordova-plugin-geolocation
var heading = $rootScope.position.heading;
First, i make sure that the marker is always pointing in the heading direction, even when the user turns the map, by subtracting the mapBearing(degrees the map has turned from North), from the user heading.
map.on('rotate', function(){
map.setLayoutProperty('drone', 'icon-rotate', heading - map.getBearing())
});
I create an icon, at the users position, add the source and add the layer with the source.
map.on('load', function () {
var point = {"type": "Point", "coordinates": [$rootScope.position.long, $rootScope.position.lat]};
map.addSource('drone', {type: 'geojson', data: point });
map.addLayer({
"id": "drone",
"type": "symbol",
"source": "drone"
}
});
Next i check that heading is actually available, since it only appears to return a value, when the user is moving(only tested on Android so far), and if it is, update the heading of the point.
if($rootScope.position.heading){
var heading = $rootScope.position.heading;
map.setLayoutProperty('drone', 'icon-rotate', $rootScope.position.heading);
};
Finally i update the position of the point, in a "$watch" position.
map.getSource('drone').setData(point);
This way, i can watch the users heading, and the point keeps on track, even when the user rotates the map.
For the users coming here after 2020 (what an year lol), mapbox gl js now supports geolocation which not only provides user's heading but also a bunch of other helpful data:
const geolocate = map.addControl(
new mapboxgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true
})
)
then listen for geolocate event:
geolocate.on('geolocate', (e) => {
console.log(e);
});
this will give you following object:
{
coords: {
accuracy: number;
altitude: number;
altitudeAccuracy: number;
heading: number;
latitude: number;
longitude: number;
speed: number;
};
timestamp: number;
heading will give you direction of the user. As the geolocate control keeps triggering automatically so can get the user's direction as well as speed and altitude etc in real time and use that to display data driven symbols on map.
I have a set of lat and long points which form a route from source to destination. I have used polyline method of Leaflet to draw the path between the source to destination, but it gives a scrambled path.
var firstpolyline = new L.polyline(latlong, {
color: 'red',
weight: 3,
opacity: 0.5,
smoothFactor: 1
});
firstpolyline.addTo(mym[![enter image description here][1]][1]ap);
The latlong in the above code is an array of latitude and longitude points. But it gives a scrambled output like this:
imgur.com/aZrGa.jpg
But the latlong points form a single correct path from source to destination. I have been using polyLine. What mistake am I doing? Should I use some other methods of Leaflet?
Edit after #ivansanchez comment
The latlong arrays are of type L.LatLng(x,y) where L is the Leaflet object. Here is a snippet:
1. var mymap = L.map('mapid').setView([17.387140, 78.491684], 13);
2. L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: "© <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors"
}).addTo(mymap);
3. var latlngs = [
[15.89625,80.53544],
[15.89626,80.53542],
[15.89628,80.53536],
[15.89617,80.53539],
[15.89621,80.53547]
];
4. var path = L.polyline.antPath(latlngs,{"delay":400,"dashArray":[10,20],"weight":5,"color":"black","paused":true,"reverse":false}
).addTo(mymap);
5. mymap.addLayer(path);
mymap.fitBounds(path.getBounds());
EXPLANATION:
To set the map view on given latlongs([17.387140, 78.491684]), 13 means zoom.
Adding tiles on the maps.
Latlongs.
Drawing polylines ant paths by setting css.
Add the layer to the path.
It was my mistake, Polyline works properly. I had an array of latlng that were not in an order. Putting an ordered latlng points helped me plot the route correctly between source and destination.