TransWikia.com

Embedding qgis2web exports into WordPress?

Geographic Information Systems Asked by kevkev on January 10, 2021

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?

8 Answers

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.

Correct answer by DPSSpatial on January 10, 2021

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>

Answered by TobsenB on January 10, 2021

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.

Answered by Tom Chadwin on January 10, 2021

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

Answered by stevenfeldman on January 10, 2021

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"]

Answered by user3725599 on January 10, 2021

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/

Answered by Loubelou on January 10, 2021

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

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

Answered by garprogram on January 10, 2021

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/

Answered by Souf El Gnifri on January 10, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP