Facebook share image

[talllguy]

I was discussing this with @mvexel the other day on twitter. Sharing a static map URL looks like this on Facebook: For a richer experience, it would be great if that included a map preview, which can be accomplished by adding an og:image tag (see http://ogp.me/) in the html. Facebook caches the og:image so a truly dynamic preview isn't realistic. However, we could designate a particular well mapped area as the preview image, e.g. Berlin, or the full extent.

[Rezonansowy]

Agree, that's a problem. We can implement a new function to generate thumbnail on-fly, containing small version of current view of the map and then place it in html's og:image.

[pnorman]

We can implement a new function to generate thumbnail on-fly, containing small version of current view of the map and then place it in html's og:image.

This probably belongs outside the rails port, which doesn't do anything with tile rendering.

The tile.openstreetmap.org servers provide the /cgi-bin/export endpoint, but it's not suitable for this.

MapQuest Open provides the full featured Static Map endpoint which would work for this.

@gravitystorm, do your layers have any suitable similar endpoint?

For layers without a static endpoint, the best option might be to take the tile from four zoom levels up, to get a 256x256 preview.

[Rezonansowy]

@pnorman This could be done with javascript and is already! See the 'map layers' panel and look into the code. Tiles for this panel are generated via [thunderforest.com](). Only thing, we have to do is cropping this tile to fit with the map area, viewed by user and then placing this in html's og:image.

Edit: I found how it works. There's a [http://thunderforest.com/tutorials/tile-format/](special syntax) for targeting desired area of tile. There are several services used by osm.org:

• for Standard map layer – tile.osm.org (example)
• for Cycle Map – thunderforest.com (example)

and so on...

[pnorman]

@pnorman This could be done with javascript and is already! See the 'map layers' panel and look into the code. Tiles for this panel are generated via thunderforest.com. Only thing, we have to do is cropping this tile to fit with the map area, viewed by user and then placing this in html's og:image.

The tiles on the side panel are just normal map tiles, not a static map service, so no different than the map in the page itself.

[Rezonansowy]

@pnorman Facebook (and others) caches images from website, so a static map service isn't needed. The only goal is just feeding Facebook's share scripts a little image of the map, I think. But maybe I misunderstood the idea (please tell me if so!), but I think this solution would be OK.

[Rezonansowy]

@tomhughes It still doesn't work. Facebook still displays generic OSM logo istead of the real map. It looks like this:

and should look like this:

[pnorman]

@tomhughes It still doesn't work. Facebook still displays generic OSM logo istead of the real map.

It hasn't changed - nor is there any indication that code was written to change it.

@pnorman Facebook (and others) caches images from website, so a static map service isn't needed

The image file has to come from somewhere. To have it centered on a point, that somewhere needs to be a static map service of some kind that renders a particular bounding box.

[jidanni]

Facebook still displays generic OSM logo istead of the real map. Debug with https://developers.facebook.com/tools/debug/

[tomhughes]

When did we ever claim otherwise?

[1ec5]

As a stopgap until a rendered tile is possible, how about reusing the SVG images from https://github.com/gravitystorm/openstreetmap-carto/tree/master/symbols? Ideally the images from https://github.com/openstreetmap/openstreetmap-website/tree/master/app/assets/images/browse would be presented instead, but they’re still in PNG format and won’t scale well beyond 16×16 pixels. og:image:width and og:image:height could be used to scale the icon down in case a life-size hamburger is too much.

[stefanb]

Couldn't the opengraph og:image tag URL point to the export API, eg http://render.openstreetmap.org/cgi-bin/export?bbox=14.414062499999998,46.00280468514235,14.558258056640623,46.106922264575914&scale=48033&format=png

I do realize this could be a performance issue, but nothing that some caching couldn't resolve. (Facebook likely caches the images themselves)

The export images cannot be shared with a preview at the moment: ... most likely due to content-disposition HTTP header.

[tomhughes]

Given that the export API frequently doesn't work for large parts of the day that seems like an extremely bad idea.

[stefanb]

Oh, that I wasn't aware of. Thanks for sharing.

[openbrian]

+1

[pnorman]

However, we could designate a particular well mapped area as the preview image, e.g. Berlin, or the full extent

I see three options for this issue.

1. generate some static image for the og:image tag on pages where the map is being browsed;
2. take a tile from the center of the viewport at zoom-3, which isn't quite the same as what the user is seeing; or
3. decide that "it needs a new function to generate thumbnail on-fly, containing small version of current view of the map and then place it in html's og:image", which requires mainly work outside the scope of the rails port, and close this issue

[jidanni]

All this should be a no-brainer. I mean all that is needed is connecting the URL output of this, already on the right side of the screen, to the og: tag.

[tomhughes]

No, that would be a terrible idea.

That URL does a custom render every time it is called so you would wind up doing potentially tens of thousands of custom renders as that image appears in peoples newsfeeds.

[stefanb]

Not entirely true, as Facebook caches the preview image. But yes, it might still increase the load significantly.