rwelty1889 commented 1 year ago

it would be lovely to be able to embed OHM widgets w/time slider in web pages.

for example, embed a time slider view of lower manhattan with preset bounds in the wikipedia page which discusses the shoreline changes there.

1ec5 commented 1 year ago

433 tracks the static version of this request, which doesn’t seem like a big effort at a glance, but an embedded interactive map would be very useful too. At the very least, it would make Overpass turbo more usable. Currently, Overpass turbo displays everything from every year on the map, and its interactive map export option is broken.

1ec5 commented 1 year ago

At WikiConference North America + Mapping USA, multiple Wikimedians expressed a desire to embed an interactive map from OpenHistoricalMap into a Wikipedia article about a historical topic, just as the Kartographer extension currently embeds OpenStreetMap-based maps into geography articles. At some point, we should open a similar issue in Phabricator to make sure this is on the MediaWiki/Wikimedia team’s radar, in case there’s anything they’d need to build out on their end.

danrademacher commented 1 year ago

Short-term, we could do this with an iframe-able GH Pages application (though does that deploy though ohm-deploy) with params, and then a button on the UI that gives you that iframe link, like embed.openhistoricalmap.org

Longer-term, we might redo this as https://developer.mozilla.org/en-US/docs/Web/Web_Components

danrademacher commented 1 year ago

We already have this https://openhistoricalmap.github.io/leaflet-ohm-timeslider-v2/ as a standalone demo that might server as the basis for an iframe-based embed -- need to check with @gregallensworth to remind me if the url params for timeline settings and mapbounds work there or if they currently need to be mediated through the Rails application

gregallensworth commented 1 year ago

When the OHM map us used, the URL params are automagically updated to match the state. Loading these same params will set the timeslider and map location, e.g. https://www.openhistoricalmap.org/#map=17/47.60212/-122.33169&layers=O&date=1885-01-14&daterange=1860-01-01,1900-12-31 So in theory, this could be used in a simple iframe.

OHM website already provides a simple tool for this. Right side of the screen, Share, then select HTML. This includes an iframe code bit.

However, there's one last step.

The OHM website code sets X-Frame-Options: sameorigin, explicitly disallowing use of maps in iframe. This is defined in config/initializers/new_framework_defaults_7_0.rb and may be intended to prevent some click-jacking behaviors where someone embeds at a fake site e.g. open-historical-map.org If DevSeed would review and agree that removing this header would not be problematic, then these iframe embeds could work.

danrademacher commented 1 year ago

I don't think we need to change the headers on the home page, at least base don my local test of this HTML:

<html>
    <body>
        <h1>iFrame Tests</h1>
        <h2>OHM Embed iFrame</h2>
        <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://openhistoricalmap.org/export/embed.html?bbox=-122.34541296958925%2C47.597655606174925%2C-122.32064008712769%2C47.60656812544093&amp;layer=historical" style="border: 1px solid black"></iframe><br/><small><a href="https://openhistoricalmap.org/#map=17/47.60211/-122.33303&amp;layers=O&amp;date=1885-01-14&amp;daterange=1860-01-01,1900-12-31">View Larger Map</a></small>

        <h2>OHM Home iFrame</h2>
        <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openhistoricalmap.org/#map=17/47.60211/-122.33303&layers=O&date=1885-01-14&daterange=1860-01-01,1900-12-31" style="border: 1px solid black"></iframe><br/><small><a href="https://openhistoricalmap.org/#map=17/47.60211/-122.33303&amp;layers=O&amp;date=1885-01-14&amp;daterange=1860-01-01,1900-12-31">View Larger Map</a></small>

    </body>
</html>

That renders like this:

The upper map is the dedicated embed via, for which iFrames are allowed, but which doesn't include our timeslider or anything at all of our code, such as a GL map in any state. Hence the blank.gray map.

The bottom square, with the iFrame block error, is an attempt to iframe in the home page itself. That indeed fails.

So I think what we want to do here is to modify this otherwise super barebones file: https://github.com/OpenHistoricalMap/ohm-website/blob/staging/app/views/export/embed.html.erb

to do the following:

Bring in our GL layer
Add timeslider
Implement URl param interpreter just like in the main view
then we would also have to figure out how that share panel embed code is populated, so we could make sure the timeslider state is included there:

gregallensworth commented 1 year ago

Nice. I was not aware that they had a special template just for iframe usage, which has CORS enabled.

Target files:

app/assets/javascripts/embed.js.erb
app/views/export/embed.html.erb

Hopefully much of the code could be lifted from *app/assets/javascripts/index/.js**

[x] get my local-dev working so I can get coding
[x] add the vector layer
[x] add timeslider
[x] load URL params to set state

Of course, this now means that changes to the timeslider et al now need to be done and tested in a third place:

the main map, in a dozen different views
iD
this new embed view

1ec5 commented 1 year ago

As far as I know, iD doesn’t use the time slider at all. It has its own date filter implementation.

gregallensworth commented 1 year ago

@danrademacher in https://github.com/OpenHistoricalMap/issues/issues/485#issuecomment-1366291877 your HTML code shows a working embed at OHM. But this is at openhistoricalmap.org (older code) and not at staging.openhistoricalmap.org (newer code).

When I try to use the embed.html at Staging in a iframe, it fails due to CORS. This is also true at local-dev http://localhost:3000/ where these same headers are present.

It appears that in later OSM/OHM, there are a lot more HTTP headers added, specifically to prevent iframe usage. As such, I think that my initial assessment was correct that HTTP headers need adjustment.

Interestingly, I do see that at OSM.org these two pages have very different sets of headers. Maybe this page has some configuration to leave out headers, or maybe it's a configuration thing in their website/proxy setup (presumably AWS or similar?). But so long as current OSM is always blocking frames on all pages, working in embed.html will not produce desired results. https://www.openstreetmap.org/export/embed.html#map=18/34.89792/-117.02087 https://www.openstreetmap.org/export/?map=18/34.89792/-117.02087

Screenshot: Staging will not iframe

Iframe src = https://staging.openhistoricalmap.org/export/embed.html?bbox=-122.34541296958925%2C47.597655606174925%2C-122.32064008712769%2C47.60656812544093&layer=historical

Screenshot: Headers on openhistoricalmap.org

https://openhistoricalmap.org/export/embed.html?bbox=-122.34541296958925%2C47.597655606174925%2C-122.32064008712769%2C47.60656812544093&layer=historical

Screenshot: Headers on staging.openhistoricalmap.org

There are a lot more here, including frame blocking, even on the embed page.

https://staging.openhistoricalmap.org/export/embed.html?bbox=-122.34541296958925%2C47.597655606174925%2C-122.32064008712769%2C47.60656812544093&layer=historical

gregallensworth commented 1 year ago

Notwithstanding the frame-blocking HTTP headers, I have progress on modifying embed.html to have the vector layer and timeslider. It also loads URL params. See new gin-embedpage-202212 branch.

http://localhost:3000/export/embed.html?bbox=-122.345413,47.59765,-122.32064,47.60656&date=1900-07-01&daterange=1860-06-01,2000-06-30&showembed=1

It also provides the URL of the embedded state (bbox, date, daterange) in two ways:

if &showembed=1 is given then this control is visible, so one may see the URL and copy it
a cross-frame postMessage is sent, which the iframe caller may choose to respond to e.g. updating some other readout or hyperlink; this is not tested, since iframe is blocked even on localhost

[ ] do something about the anti-frame header on every page
[ ] write up a quick test of the frame-message code

jeffreyameyer commented 1 year ago

How's this coming along?

Should we reposition / retitle this ticket as something like: "Provide support for iframe-embeddable OHM maps"?

Reason I'm asking: I'm wondering if I should file a ticket for: "Provide xyz tile endpoints for period-specific OHM-created raster tiles"...

danrademacher commented 1 year ago

This improvement is blocked by https://github.com/OpenHistoricalMap/issues/issues/495 We could move that up the priority stack for DevSeed to look into.

Anything related to raster tiles should definitely be a separate ticket and implies a raster tile pipeline we do not have. So that's a big lift.

1ec5 commented 1 year ago

For what it’s worth, #433 tracks exporting a raster image that’s rasterized from the vector tiles on the client side. It would be a similar format as a raster tile server endpoint but would serve a different use case (namely, an offline sharing use case).

1ec5 commented 1 year ago

Anything related to raster tiles should definitely be a separate ticket and implies a raster tile pipeline we do not have. So that's a big lift.

Now tracking in #532.

1ec5 commented 1 year ago

I whipped up a quick standalone OHM map to more easily prototype runtime styling ideas for the main website. It can also be used as an embed while we investigate a fix for the issues above.

danrademacher commented 1 year ago

I took that code and made a documented repo out of it here: https://github.com/OpenHistoricalMap/ohm-embed-1yr/

We talked about potentially going forward with a solution like this as our main path, rather than a stopgap.

That would involve some steps like this:

Make a CNAME for that embeddable map at embed.openhistoricalmap.org that's a little nicer than the github.io URL
Make the contents of this box (a) reflect that new URL and (b) fill in our special URL params

Noting the "Show Map Marker" checkbox, I guess we'd either need to enable the map marker on our embed or remove it from the panel.

1ec5 commented 1 year ago

Thanks for writing up documentation and polishing it!

We talked about potentially going forward with a solution like this as our main path, rather than a stopgap.

For what it’s worth, these embeds don’t have to be mutually exclusive. I could imagine different use cases for a single-year embed, an animated time-slider embed, even something more fully-featured to support story maps. These varied use cases can probably share a lot of the same code.

Noting the "Show Map Marker" checkbox, I guess we'd either need to enable the map marker on our embed or remove it from the panel.

OpenHistoricalMap/ohm-embed-1yr#1 adds a map marker.

danrademacher commented 1 year ago

OK, so new simpler restatement of what's needed here:

Change the content of this box to reference a different source URL:
The root url is https://embed.openhistoricalmap.org/ohm-embed-1yr/#map=
Into that, we need to pull parameters from the main website url, like this https://www.openhistoricalmap.org/#map=17/39.23699/-84.30050&layers=O&date=1923-01-01&daterange=1923-01-01,2023-12-31, puling out map=17/39.23699/-84.30050 and date=1923-01-01
To make a src link like this https://openhistoricalmap.github.io/ohm-embed-1yr/#map=10/43.9367/12.5528&date=1500-01-01

danrademacher commented 1 year ago

Note that I just set up the https://embed.openhistoricalmap.org/ subdomain with Route53 and GH Pages

Right now HTTPS is not working, but these docs say it can take up to an hour: https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/troubleshooting-custom-domains-and-github-pages#https-errors

So by 11:30 it should be working and if not, we'll have to see what's wrong

danrademacher commented 1 year ago

OK, https://embed.openhistoricalmap.org/ now works as expected

erictheise commented 1 year ago

Oops, forgot that issues was a repository separate from the code.

This commit makes the requested changes to the iframe src url as I understand them.

danrademacher commented 11 months ago

For the record, this is the repo for the embed itself, https://github.com/OpenHistoricalMap/ohm-embed-1yr

erictheise commented 11 months ago

Working with this area

we can see the difference between the /#map= approach and the /?bbox= approach.

danrademacher commented 7 months ago

So this is 99% done, but the last lingering thing is that the date sections of the embed and View Larger map urls do not update if I interact only with the timeslider. They update when I interact with the map. Changing the timeslider should also fire off an update regardless of map interaction

OpenHistoricalMap / issues

Provide support for iframe-embeddable OHM maps #485

Screenshot: Staging will not iframe

Screenshot: Headers on openhistoricalmap.org

Screenshot: Headers on staging.openhistoricalmap.org