Publishing the newsmap in WordPress with an iframe

This goes through the steps for publishing the newsmap in WordPress step by step. It also has information about publishing pictures that will be visible in the newsmap.

After you have succesfully checked that your map works by opening the local .html file in the browser, it is time to get the map published on your wordpress site.

The first thing you need to do is open the Media library in WordPress. Drag the .html file containing the map from your file browser and into the media library. You should see a document icon together with your html file name. This is now a a published webpage containing only your map. We are going to place this map inside a blog post or a page in WordPress. In order to do that we need the url to the published html.

Click the icon and a pop up window should appear. On the right side of this pop up you should see a few text boxes with some information about your file. The bottom text box has a link to your html file. Depending on your wordpress installation you might see a complete link or just the last part. A complete link should start with http://… or https://… like this:

http://s123456.azurewebsites.net/wp-content/uploads/2020/09/Newsmap_GEOJSON_only-1.html

If you have a link that structurally looks like this that’s all you need. If however your link only has the last part and looks like this:

/wp-content/uploads/2020/09/Newsmap_GEOJSON_only-1.html

If it start with /wp-content… like this we have to construct a complete url. It is easiest to do that in the code editor. It’s pretty simple, first you need the url of your website like this:

http://s123456.azurewebsites.net

And then you simply attach the partial url to your map html file at the end. Copy the entire url into the adress field of your web browser to check that it works. You should see your map.

Publish it in the iframe

Here is an example iframe code. You must use your own url and check the height property in the iframe to match your own map.

<iframe style="border: 0px;" src="https://gauteheggen.com/wp-content/uploads/2020/09/Newsmap_GEOJSON_eksempel.html" width="100%" height="400px" scrolling="no"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>
</iframe>