I am generally new to web developement, and web gis for that matter, but I want to embed a leaflet map that I made in QGIS using the QGIS2leaf pluggin, into the html of my webpage, but am having troulbe getting it to work.
I normally upload the whole export folder to an accessible folder on my server and implement the map with an
<iframe src="relative path to the export folder"> </iframe>
and that's it!
This is a general answer since you didn't provide any code to work with. Note that I assume you have managed to work out the QGIS2LEAF plugin. The output of the plugin gives you a folder with an
index.html file, which contain the webpage main code, and few more folders described below.
- CSS: contains CSS styling files, including
own_style.cssthat is meant for the user to style the page. See blue circle in image below.
- Data: contains an GEOJSON code nested within a .js file; that is the geometrics, attributes and styling of your layer.
- misc and pictures: two more folders that may contain data or may be empty; thus implying they are optional.
here is a screenshot of the right structure.
index.html is the original plugin's output, and
index2.html is my own webpage code. I will elaborate on how to embed the map in another page later on.
In order to present a map on your webpage, that was produced using QGIS2LEAF plugin, you should first make sure to put your HTML files, CSS etc in the main folder of the QGIS2LEAF output (see example below). You might copy the plugin's output to your folder/server, but the structure of the folders must be kept.
Than you can edit the map (dimension, position, etc.) using your own .CSS file, or embedding CSS tags in the
<DIV ID="MAP></DIV> line in the
In the example below I show how to use the code in the
index.html file to add it to another web page:
Image below shows my own
My edition are marked in yellow. A red arrow shows how to set map size, in this case using the following:
<div id="map" style"height:400px;width:400px"></div>. As mentioned above, this can be also done using a
map.css external file.
Blue arrows mark the code lines that were copied and paste from thr original plugin's output. Note to put them in the right places, e.g. from
<body>, etc. Also note that this is an HTML5 document, by the
<!DOCTYPE html> first line - keep it that way.
Image below shows the web page. You can see the headline addition and div dimension adjustment.