Embed Leaflet Map into Web Page Using QGIS2Leaf – How to Guide

htmljavascriptleafletqgisqgis2leaf

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.

Best Answer

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.css that 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.
  • JS: contains javascript codes that are used to add funcionalities and display your map properly.
  • 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.

Structure folders

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 index.html code.

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 index2.html code:

My page

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 <head> to <head>, <body> to <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.

Final example

Related Question