So I have a test task for a job and it says that I should build a track on the map using polyline, which I get from osrm server using lat and lng waypoints. I can build a track using waypoints, it looks like this:
L.Routing.control({
waypoints: [
L.latLng(route.coord_from_lat, route.coord_from_lng),
L.latLng(route.coord_to_lat, route.coord_to_lng),
],
}).addTo(map);
But the task says I should build a track using polyline, so how could I do it? For example, if I make a request to the server with these waypoints, I get the next polyline: "ae_xDoqbmJGcCo#iD_CcK_DaKGQeBqBwDoEyAm#_D{#{#{Cc#oAa#y#Qe#DqAY_BiAgCo#u#i#E_#[SDgDdCuAhBYRe#J]F]Dq#P{#Xa#Hk#NsCb#{ALqBA]AUKSQUk#Qs#g#c#OAYDSHu##_EGeCA{Cw#c#HQTId#DdDAj#Q#g#j#uCd#cJd#iED{DzA{BZiKo#gF[mCR_IxFsG\\gCRmArAwCdC_GE_HGuEPuDnAuCrE"
How could I use it to build a track in leaflet map?
Related
I am working for a local indoor map for my college. It is my final work.
I have created a tile server that is successfully rendering the map in http://localhost:8080/hot/0/0/0.png following this tutorial:
https://switch2osm.org/serving-tiles/manually-building-a-tile-server-18-04-lts/
So I also need to mount on that server mmy own instance of OsmInEdit editor, since an Admin will be allowed to edit the info of the map:
https://github.com/PanierAvide/OsmInEdit
but I dont know how to connect it since it ask for an API a keys that I dont have. How can I get that API for my local map server?
This is OsmInEdit config.json
{
"editor_name": "OsmInEdit",
"hash": "GIT_HASH",
"data_min_zoom": 18,
"map_initial_zoom": 18,
"map_initial_latlng": [48.13678, -1.69533],
"providers": {
"bing": "AhsSQakuHuX3ozMBXC60w-hPk0KD_smZZbHLjb7mBFfeIwDKJnJn2_qK3qQfYfPZ"
},
"osm_api_url": "https://master.apis.dev.openstreetmap.org",
"oauth_consumer_key": "S1UcyQKeyEpa4fzoJhbffi5vCMELM2KrPoZUicag",
"oauth_secret": "xjFttL8ano8nnj6zYK7QxyjQ1NI8HK8TnlTqhUVf",
"always_authenticated": false
}
I want to display the location base on the value that I get from getLocation but all I get is a blue screen if I assign for example
this.lat=25.7777, this.lng=26,777; but it does not if a did like this this.lat=this.LAT; this.lng=this.LNG; and it works fine one last thing l would like to mention that the datatype in the database is double and I have tried testing a text as well
lat:number;
lng:number;
LAT:any;
LNG:any;
constructor(public dataservice:DataService,private geolocation: Geolocation) {
this.dataservice.getLocation(ID)
.subscribe(data =>{this.LAT = data[0].lat,
this.LNG=data[0].lng
this.lat=this.LAT;
this.lng=this.LNG;
});
.html
<agm-map [latitude]="lat"[longitude]="lng" [zoom]="10"
[zoomControl]="true">
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
You need to use Allow-Control-Allow-Origin in configuring your apache or Node.js server. rather then chrome plugin.
make changes in your server such that add that required header in response.
I am passing proper latitude and longitude to the map but it shows old map, having old lat lng. I know I am doing something wrong in this, but I can't figure out it. My project in ionic framework and for map I am using this plugin map plugin
This my html code
<div style="width:100%;height:200px" id="mapDisplay"></div>
This my angularJS code
var getLat = $scope.dealer.lat;
var getLng = $scope.dealer.lng;
var address = $scope.dealer.address;
var mapDiv = document.getElementById("mapDisplay");
const myGeoLocation = new plugin.google.maps.LatLng(getLat,getLng);
var map = plugin.google.maps.Map.getMap(mapDiv, {
'camera': {
'latLng': myGeoLocation,
'zoom': 15
}
});
map.addEventListener(plugin.google.maps.event.MAP_READY, function() {
map.addMarker({
'position': myGeoLocation,
'title': address
}, function(marker) {
marker.showInfoWindow();
});
});
From the docs of the map plugin you are using
This plugin generates only one map instance using the Map.getMap()
method. In general, you may want to create multiple maps, but this
plugin doesn't allow it.
So your plugin.google.maps.Map.getMap is only grabbing the existing instance, not creating a new one and the plugin.google.maps.event.MAP_READY is only fired once, the first time. However looking at the source code it looks like the instance exposes a remove method which you can use to destroy the existing instance and create a new one with the new sets of coordinates when the callback is called, e.g: map.remove(function() { /** reset map coordinates **/ }
** Extra **
If you just need to display a map with a set of coordinates you can do it using the native app by passing lat/lon to the $cordovaInAppBrowser plugin. As an example for iOS and Android you'd have the following:
iOS
$cordovaInAppBrowser.open('maps://?q=<latitude>,<longitude>', '_system');
Android
$cordovaInAppBrowser.open('geo:0,0?q=<latitude>,<longitude>', '_system');
And finally you need to enable the geo uri in your config.xml like so:
<allow-intent href="geo:*" />
The plugin doesn't allow to create multiple maps instance More detail.
But you can achieve this by using this code
var map = plugin.google.maps.Map.getMap(div);
map.clear();
map.off();
map.trigger("test");
map.addEventListener(plugin.google.maps.event.MAP_READY);
I'm trying to use the approach described in this question, but instead of using jQuery to perform the ajax request, I'm using angularJS $http method. I've already verified and the features are being loaded into the source of the layer, but nothing is shown.
Here is the definition of the source:
var vectorSource = new ol.source.Vector({
loader: function(extent, resolution){
$http.get(url).success(function(data){
var formatGeo = new ol.format.GeoJSON();
var features = formatGeo.readFeatures(data,
{featureProjection: 'EPSG:4326'});
vectorSource.addFeatures(features);
console.log(vectorSource.getFeatures().length);
})},
strategy: ol.loadingstrategy.bbox
});
Is there any incompatibility problems with using angularJS and openlayers?
The problem was the mismatch of the projection of the data in my GeoJSON (EPSG:4326) and of the map (OpenLayers3 default, EPSG:3857).
To solve the problem, I changed the projection of the data that I was using to build the GeoJSON to EPSG:3857. Since the data was stored in a postGis database, I used the function ST_Transform to change the projection of the geom column contaning the objects.
I've tried heard to solve the issue from previous questions raised in SE but unable to solve the issue by reading those So, posting as separate question.
I'm creating a marker layer using following code
mLayer = new OpenLayers.Layer.Vector(layerName, {
projection: map.displayProjection,
extractAttributes: true,
styleMap: new OpenLayers.StyleMap({'default' : Lstyle}),
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: getURL,
format: new OpenLayers.Format.GeoJSON()
})
});
My task is to calculate the average of the marker coordinates and set that as a center of the map, for that I want to fetch coordinates from mLayer object. Markers are displaying fine on map but when I'm printing mLayer.features.length in console it showing 0 but the size of the features is 10, this I'm able to see in firebug console by printing vLayer,this is the my JSON file.
Openlayers provides this feature:
http://dev.openlayers.org/docs/files/OpenLayers/Layer/Vector-js.html#OpenLayers.Layer.Vector.getDataExtent
Then use map.getZoomForExtent and map.panTo.
To set map center to markers mid point as Christophe Roussy suggested in comments is correct to some extent, but the problem with his code is, code will execute before layer is finished to download to browser, So for that we have to check whether the layer is finished or not as follows
layer.events.register('loadend', layer, function(evt){map.zoomToExtent(layer.getDataExtent() )} )
Its working fine for me.