Develop Reference

Openstreetmap Itinerary

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

Phaser: how to display another map using the json file?

Context
I am working under Phaser (which is a Javascript Framework for game development) and I followed this totorial. All the code works perfectly. But to make the map the tutorial use a .json file which content a data part in order to display the map.
Problem
I would like to change the map and display my own map. Here is the map.json that display the map:
{ "backgroundcolor":"#000000",
"height":10,
"infinite":false,
"layers":[
{
"data":"AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA8AAAAPAAAADwAAAA8AAAAPAAAADwAAAAAAAAAAAAAAAAAAAA8AAAAPAAAADwAAAA8AAAAPAAAADwAAAAAAAAAAAAAADwAAAA8AAAAPAAAADwAAAA8AAAAPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAAAwAAAAMAAAADAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAABQAAAAUAAAAFAAAA",
"encoding":"base64",
"height":10,
"name":"World",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":30,
"x":0,
"y":0
}],
"nextobjectid":31,
"orientation":"orthogonal",
"renderorder":"right-down",
"tiledversion":"2018.03.21",
"tileheight":70,
"tilesets":[
{
"columns":4,
"firstgid":1,
"image":"tiles.png",
"imageheight":280,
"imagewidth":280,
"margin":0,
"name":"tiles",
"spacing":0,
"tilecount":16,
"tileheight":70,
"tilewidth":70
},
{
"columns":1,
"firstgid":17,
"image":"coinGold.png",
"imageheight":70,
"imagewidth":70,
"margin":0,
"name":"coin",
"spacing":0,
"tilecount":1,
"tileheight":70,
"tilewidth":70
}],
"tilewidth":70,
"type":"map",
"version":1.2,
"width":30
}
I know that the part used in order to display the map is layers.data.
What are these letters all about? Is is a kind of special format that I never heard about so far?
How can I should I know which letters correspond to which tiles?
If you need more informations or if you have any question please let me know, thanks !

That map was made using Tiled which allows you to make tiled maps using a set of tiles (aka sprites). Exporting it in json allows you to import it into game engines with ease, in this case, Phaser.
Doing these by hand could be troublesome so a tilemap editor like Tiles helps you accelerate your map development. You can also create and place each tile programmatically but it would depend on which type of game you're aiming at.
here's an introductory tutorial on how to use Tiled to create a map. Be sure to save it as json instead of .tmx so you can import it in phaser.

Custom Facebook comment integration (JS SDK)

I have been tasked with implementing paragraph comments / annotations (like on Medium), however, the client's requirement is that all commenting is performed via Facebook's comment system, so that comments are published to peoples news feeds. Since it has to be "medium style commenting" I do not want to use the default Facebook comment injector - it's pretty ugly and does not meet the requirements.
I have found this great Facebook article on how to pull comments based off an url using the JS SDK, so now all I need is the ability to post new comments via the JS SDK. I have been trying to figure out their documentation, but I must admit that it is a bit overwhelming.
Is there anyone here who has experience with posting comments via the JS SDK, who can point me in the right direction?

I would suggest that you create a facebook object for each article, and keep that object id so you can "attach" comments to it, making pretty easy to also read the comments per each article.
Code wise, this would be the flow:
When you create an article, POST in your PAGE FEED as:
FB.api(
"/{page-id}",,
"POST",
{
"about": "Test about text",
"hours": "{'mon_1_open': '12:00'}",
"cover": "1234567890",
"offset_y": "45"
},
function (response) {
if (response && !response.error) {
/* response.id will have your post-id */
}
}
);
Then simple add comments to that POST ID like
FB.api(
"/{post-id}/comments",
"POST",
{
"message": "This is a test comment"
},
function (response) {
if (response && !response.error) {
/* handle the result */
}
}
);
to show all current comments, just call
FB.api(
"/{post-id}/comments",
function (response) {
if (response && !response.error) {
/* handle the result */
}
}
);
You can even have a new table where you can have internal_user_id / comment_id to bring all the user comments for your web application...

Is it possible to publish a large photo to facebook?

Is it possible using the javascript api to allow a user to post a large photo to their facebook wall? e.g. 500px x 500px, published like a user would normall upload a photo.
All I have been able to achieve so far is small thumbnails.
I currently have the following:
FB.ui(
{
"method": 'feed',
"attachment":
{
"media": [{
"type": "image",
"src": "image.jpg",
"href": "http://www.example.com/"
}]
}
}, function(response) {
if (response && response.post_id) {
//User posted
} else {
//User didn't post
}
}
)

You're posting to the user's feed connection (i.e a wall post) with an image attached - you should use the API to post to their photos directly to upload a photo (see the Graph API Poto documentation)
[edited because this was 'too vague']
You are posting a 'Post' with an image attached, the image in that case is an attachment to the post, it's not rendered in a large size on Facebook.com.
What you probably should be doing is uploading a photo to the user's 'photos' connection like the documentation i linked. There's also a how-to here: https://developers.facebook.com/blog/post/498

Linked Pie Chart using Flot 0.7 returns "undefined" links

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).