I'm working on a project and I need to display points of interest that are saved in a database.
For the itinerary, I used leaflet routing machine and nominatim.
Now I need to display those points of interest that are 5km around the route.
I found in this link https://www.liedman.net/leaflet-routing-machine/api/#iroute the property "coordinates". It returns an array of all the waypoints used to display the itinerary.
How can I use this function to make a call on my database each kilometer to get my informations ?
I hope I was clear and thank you !
I worked on a similar problem and in my case I queried the routing server directly and got the coordinates of each step between the waypoints.
I found it ! I used this :
L.Routing.control({
waypoints: [(my waypoints)],
(my options)
}]}
}).on('routesfound', function(e){
console.log(e);}
The console.log(e) show all the coordinates we want to work on. And there is a yt video explaining that : https://www.youtube.com/watch?v=6mAdRdwZihc
For those who have the same problem
Related
For a store locator, let's say I'm using Bing's example data source url: https://spatial.virtualearth.net/REST/v1/data/515d38d4d4e348d9a61c615f59704174/CoffeeShops/CoffeeShop
In Bing's example, the user has to search in order for the store locations to populate, which is fine if you're Starbuck's and you have thousands of locations, but business requirements are that we need to show all of our 10-15 locations on a map of the full United States.
It looks like there are plenty of modules for searching and finding all locations within a box, or finding nearby locations within a specified radius, clustering a lot of locations within the viewport, but I can't for the life of me figure out how to simply load all Contoso Coffee locations from the data source URL.
The closest answer that I could find is this:
Zoom to show all locations in bing maps
The chosen answer:
var locations = CurrentItems.Select(model => model.Location);
map.SetView(LocationRect.CreateLocationRect(locations));
But I could not get it to work. I've also tried:
var queryOptions = {
queryUrl: dataSourceUrl,
spatialFilter: {
spatialFilterType: 'nearby',
location: location,
radius: 1000
},
};
Microsoft.Maps.SpatialDataService.QueryAPIManager.search(queryOptions, map, function (results) {
...
});
This doesn't work because 1000 is the max radius and some of the my locations would be outside of it.
Other than that, I've been trying to find the exact module that reproduces vaguely what I'm looking for, but they keep coming up as dead ends.
I'm sure it's very simple, but the answer has eluded me. Thanks!
~Andrew
Instead of doing a radius search you can use a bounding box and page through the results if there is more than 250 (max results per query) by using the $top and $skip parameters. In theory you could download a full data source if you used a global bounding box and stepped through all results.
Here is an example: https://bingmapsv8samples.azurewebsites.net/#Load%20all%20results%20(parallel)
Just in case you hadn't noticed, the Contoso coffee data source is an example data source with fake coffee shop listings. It's primarily for testing/example use.
I want to highlight a specific section of a road on my map. The user should be able to click on a map and using the Location of the click, I want to highlight the closest road element.
In the Here Android SDK, the RoadElement can do exactly what I want: I can pass some coordinates and use getGeometry() to obtain the exact shape of the road element.
However, I couldn't find something similar to this in the javascript SDK. I tried using Reverse Geocoding:
var geocodingParams = {
lat: road.lat,
lng: road.lng,
mode: 'retrieveAddresses',
maxresults: '1',
additionaldata: ['IncludeShapeLevel', 'postalCode'],
prox: road.lat + ',' + road.lng
};
this.geoCodingService.reverseGeocode(geocodingParams, onResult, null);
This way, I can find the closest road, but I don't get accurate shape data. In the Results View, there is only the Bounding Box (Location.MapView.BottomRight and Location.MapView.TopLeft).
How can I achieve something similar to the RoadElements, using the Javascript API?
Our routing APIs return the shape points along a route. So given a set of start and stop waypoints the JavaScript SDK routing API will give the route shape.
Example code is included on this page:
https://developer.here.com/documentation/maps/dev_guide/topics/routing.html
Another alternative will be to use the Advanced fleet telematics API and look into the datasets yourself.
I'm trying to create a leaflet routing machine route in my web app using waypoints stored in a database. I'm first creating the control:
var routeControl = L.Routing.control({waypoints: [null]}).addTo(map);
getTestRoute("1");
The function 'getTestRoute' pulls in my waypoints from a db as lat/long pairs and adds them to the control, here's the function:
function getTestRoute(route){
$.ajax({
url: './get_route.php',
type: 'POST',
dataType: 'JSON',
data: {
getRoute: route
},
success: function (res) {
$.each(res,function(key,value){
var newLatLng = new L.LatLng(res[key].latitude, res[key].longitude);
routeControl.spliceWaypoints(0, 0, newLatLng);
})
}
});
}
My issue is that instead of seeing a route on the map I'm seeing my waypoints (five in total) added to the map as markers with no routing between them.
Please please help!!!
Here is a fiddle of my issue: http://jsfiddle.net/c4yfy4ek/46/
As can be seen on the fiddle no routes are created between the points, and the points are added as markers (which I'm assuming is unexpected??).
The problem is the use of spliceWaypoints combined with an undocumented feature in Leaflet Routing Machine.
When the control is created, it will automatically add waypoints such that the route always has a start and an end waypoint, it such waypoints are not already supplied. That means: whatever you do, getWaypoints will always return an array with at least two entries; if not provided, these waypoints will however have their latLng properties set to undefined, indicating the location has not yet been provided.
In the code in question, the control is created and will get two waypoints added implicitly by Leaflet Routing Machine, with undefined locations. Later, you add a couple of new waypoints, but the implicit two waypoints remain, without locations. No route will be calculated, since two waypoints are missing locations.
The solution is to build the array of waypoints first, and then call setWaypoints, instead of spliceWaypoints.
See an updated version of the fiddle: http://jsfiddle.net/c4yfy4ek/53/
I am trying to create a Flot pie chart with a link in each wedge, so I can direct users to the appropriate details page on clicking.
There is already a similar post at With flot, how can I create a linked pie chart that takes you to other web pages?. I tried the answer on that page with with Flot 0.7 to obtain pie wedges with hyperlinked labels. However, series.URL returns "undefined" in the labelFormatter function. How do I resolve this issue?
On a side note: Its my first time posting here. I tried to ask this obviously related question at the link above so I don't create a new question for the same issue. However, it was deleted by the moderator. Wouldn't it have helped other users reading that post who suffered from the same issue to find a resolution? Not complaining, just trying to understand the rationale (have read the FAQs/Guidelines for asking questions..) behind the deletion.
If you follow the code in your linked question, they get quite close to what you want. The problem (which trips up many people) is that the item in the plotclick function is not the same as the series object in your raw data. What you can do though, is refer back to your raw data using item.seriesIndex in plotclick:
//setup options
//setup data
var data = [
{
label: "Serie1",
data: 10,
url: "http://stackoverflow.com"},
...
];
//call plot
//setup plotclick
$("#placeholder").bind("plotclick", function (event, pos, item) {
alert(data[item.seriesIndex].url);
});
I don't have it following the link, but that should be easy for you to do.
Here is some sample code in full: http://jsfiddle.net/ryleyb/pq4Q4/
Side note answer: Generally they would prefer you ask a new question instead of piling into an old question with new sub-questions. Especially in an "answered" question (I put answered in quotes because it doesn't seem that they came to a full answer, so I can see your confusion).
I'm a beginner at mapping and decided to use Polymaps for a project I'm working on. I have a dataset I want to serve to the map by zip code. We're testing with counties right now and all I'm trying to do is get the county shapes to show on the map.
I added the geoJson to the map, pulling in my .json file. After some research I think I need to parse the json but I'm not sure how to go about that and I couldn't glean much from the Polymaps documentation.
Any insight or beginner tutorials would be great. Thank you!
var po = org.polymaps;
var map = po.map()
.container(document.getElementById("map").appendChild(po.svg("svg")))
.center({lat: 38.89859, lon: -77.035971})
.zoom(7)
.zoomRange([4, 7])
.add(po.interact());
map.add(po.image()
.url(po.url("http://{S}tile.cloudmade.com"
+ "/1a1b06b230af4efdbb989ea99e9841af" // http://cloudmade.com/register
+ "/20760/256/{Z}/{X}/{Y}.png")
.hosts(["a.", "b.", "c.", ""])));
map.add(po.geoJson()
.features([{"geometry":{"coordinates":paths, "type": "Polygon"}}])
.url("testCounties.json"));
I think you need to change this:
map.add(po.geoJson() .features([{"geometry":{"coordinates":paths, "type": "Polygon"}}]) .url("testCounties.json"));
to this:
map.add(po.geoJson().url("testCounties.json"));
Note that there is no space after geoJson(). And more importantly, you should use geoJson.features OR geoJson.url, not both. You would use geoJson.features if you had your geojson data stored locally in JavaScript, but because you are pointing to an external json file, you should just use geojson.url.
Perhaps this example is like what you're trying to do: http://polymaps.org/ex/population.html