Create service to render a picture of an area, line, & photo circles

[justinormont]

Parse URL parameters server side and produce a PNG of what the client would see.

Use case:

• User shares llink, it gets parsed by FB and the map image is displayed

URL Example: http://letsgo.io/?from=San+Francisco&q=New+York+City&wp=37.783333,-122.416667,43.066667,-89.4,40.67,-73.94&pids=8158094262,6920002684,2835649418,3920850843&dpid=3908821399

Where:

• q: destination location name (picked up as the main search term)
• from: source location name
• wp: way points, including the starting and end points
• pids: selected photos (currently unused) [optional]
• dpid: current photo being displayed in the large viewer [optional]

Could just use a service to do it. (paid) URL2PNG may work: http://url2png.com/?url=http%3A%2F%2Fletsgo.io%3Ffrom%3DSan%2BFrancisco%26q%3DNew%2BYork%2BCity%26wp%3D37.783333%2C-122.416667%2C43.066667%2C-89.4%2C40.67%2C-73.94%26pids%3D8158094262%2C6920002684%2C2835649418%2C3920850843%26dpid%3D3908821399 Their screen size is set to 1024x2000, so the normal map is off screen & we'd have to disable the fade-in.

When we see a screen shot request could add extra screen chrome:

• Branding, like the intro screen currently has.
• Logo
• Larger path line width, good for thumbnail
• Larger circle photos, also good for thumbnail

This is in prep for #9 (Social share icons for Facebook/Twitter/Google+)

[justinormont]

(free) immediatenet seems to work. http://immediatenet.com/cgi-bin/render_thumbnail?user=http%3A%2F%2Fletsgo.io%2F%3Ffrom%3DSan%2BFrancisco%26q%3DNew%2BYork%2BCity%26wp%3D37.783333%2C-122.416667%2C43.066667%2C-89.4%2C40.67%2C-73.94%26pids%3D8158094262%2C6920002684%2C2835649418%2C3920850843%26dpid%3D3908821399&Size=800x600&CaptureDelay=0&Scale=50&Format=PNG

It would be nice if larger thumbnails could be produced.

[justinormont]

(cost?) snapito.com seems to work: http://snapito.com/?url=http%3A%2F%2Fletsgo.io%2F%3Ffrom%3DSan%2BFrancisco%26q%3DNew%2BYork%2BCity%26wp%3D37.783333%2C-122.416667%2C43.066667%2C-89.4%2C40.67%2C-73.94%26pids%3D8158094262%2C6920002684%2C2835649418%2C3920850843%26dpid%3D3908821399&source=snapito&freshness=86400&timestamp=&fast=&delay=-1

[justinormont]

I'm currently looking in to webshot: https://github.com/brenden/node-webshot

[justinormont]

@mohamedmansour, @jeremybenaim : Can you debug why this works locally, but not on the server?

Works locally: http://localhost:3000/screenshot/?from=San+Francisco&q=New+York+City&wp=37.783333,-122.416667,43.066667,-89.4,40.67,-73.94&pids=8158094262,6920002684,2835649418,3920850843&dpid=3908821399

Doesn't work server side: http:/letsgo.io/screenshot/?from=San+Francisco&q=New+York+City&wp=37.783333,-122.416667,43.066667,-89.4,40.67,-73.94&pids=8158094262,6920002684,2835649418,3920850843&dpid=3908821399

The server just responds: "The page cannot be displayed because an internal server error has occurred."

Locally, it produces this image:

[mohamedmansour]

I think I know why it doesn't work , because you hardcoded localhost

[justinormont]

I think localhost is correct. We're trying to access the same host name the server is running on, which should be accessible through localhost.

Is there virtual servers that would care that the host http header isn't set?

[justinormont]

No luck, changing the hardcoded localhost didn't sove the issue. The screen shot code is routes/screenshot.js https://github.com/mohamedmansour/letsgo.io/blob/master/routes/screenshot.js