Embedding qgis2web exports into WordPress?

Question

I exported my QGIS project with the qgis2web plugin as OL3.

Can I embed this folder to a wordpress homepage or can I import it to google maps and add this to WordPress?

Answer 1

If you're using Wordpress with your own hosting, you simply put the folder created by QGIS2Web on your web server, then as suggested, you can embed an iFrame on your wordpress post that embeds the .html page with your map (from QGIS2web)

If you are using a wordpress.com site, you don't have access to the back-end, so you'll have to find a place to host the QGIS2Web project (does Github support this?)

Otherwise, you might look into something like CartoDB, which will host your map data and visualization, and you simply use the iFrame (embed) option to put the map into your post.

Answer 2

Instead of embedding the folder into your wordpress structure you should try to copy the relevant code snippets from the .html and .js files to an empty wordpress page.

The javascript code should thereby be enclosed into script tags:

<script type="text/javascript">

    //Javascript goes here

</script>

So in the end you would probably get something similar to this:

<script src="http://openlayers.org/en/v3.14.2/build/ol.js" type="text/javascript"></script>

<div id="map" class="map"></div>

<script type="text/javascript">
var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.MapQuest({layer: 'sat'})
      })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([37.41, 8.82]),
      zoom: 4
    })
  });
</script>

Answer 3

Use a Wordpress iframe plugin and embed the map using an iframe. That's the easiest way. @TobsenB's approach will produce perhaps better code, but is more difficult to achieve, and can more easily result in an error if you don't quite get it right.

Answer 4

This wordpress plugin makes it easy to insert an iframe into a post https://wordpress.org/plugins/iframe/ (there are several others). The syntax once you have installed the plugin and activated it is:

[iframe src="http://www.yoursite.com/webmaps/yourmap" width="100%" height="500"]

It worked perfectly for me

Answer 5

There is a wordpress plugin called gis-maps, it is specific to qgis2web exports.

https://wordpress.org/plugins/gis-maps/

Answer 6

One option to host the html and java script files is the 'Media' store of your wordpress page. Upload all of the files here and link to it through iFrame as mentioned above.

[iframe width="1000" height="500" src="http://www.mysite.org.uk/wp-content/uploads/2016/07/index.html"]

Answer 7

I'm a complete beginner but have managed it by using carto (previously cartoDB) to host the data, and it was very simple: create an account, upload GIS layers, publish then copy the link. Found this to help:

https://carto.com/blog/wordpress/

Answer 8

QGIS project with the qgis2web plugin as OL3

Also looking at this and I remember we used leaflet as a plugin: https://wordpress.org/plugins/tags/leaflet/