Sometimes, the best way to share a map is to build a website with a map embedded in it. There are many methods to accomplish this goal, ranging from a simple dump of a few layers to a highly-interactive map, which is based on web services. There are many web clients that will work with standard OGC services. This recipe will show you how to build a simple web map using Leaflet—a popular JavaScript library that is used to create web maps.
You will need the qgis2leaf plugin and some sample data. The schools_wake.shp (Points) and census_wake_2000.shp files make for a good example.
- Install and enable the qgis2leaf plugin.
Tip
Make sure to check out the qgis2web plugin, which is a newer variant that works similarly but has some different options.
- Load up some layers to make a map composition.
Tip
Make a copy of your layer and eliminate unnecessary columns that you don't need to show on the web map. Reducing the size of the attribute table will make it easier to read popups with information and speed up web page loading.
- Style the map as you want it to appear online.
Tip
Styling can be really tricky. Leaflet and other web map libraries don't support 100% of the same options as QGIS. Try making a few maps, changing settings, and re-exporting these maps a few times to figure out how to get it the way that you want. It may not look good in QGIS but look good in the export.
- (Optional) Configure labels. In this example, label the School names.
Tip
Only black labels are currently supported. Though you can probably customize the CSS and JavaScript (js) after the export if you need labels in a different style.
- Open the qgis2leaf plugin from its icon on the toolbar or from the Web menu:
- Click on the GetLayers button to add the layers from your map to the export list.
- There are lots of options here, and they are optional. Go ahead and check Create Legend. If you made labels, also check Export Labels and labels on hover.
Tip
Create Cluster is a fantastic option if you have a lot of points on the map. This will group points into a circle with a number indicating how many points are near there. As you zoom in, they will split apart into smaller groups, until at some zoom, all the points are in their original spot.
- For the frame size, you can pick a size of the page that you want the map to take up (in pixels). However, fullscreen works well if the map is the only thing that you care about.
- Go ahead and add a tile-based base layer; Stamen Terrain is an interesting choice. Keep in mind that you can only have one of these on at a time, but you can toggle between them.
- Pick an output folder location and fill in the remaining map information describing how you want it to show up in the results.
- Export the project:
- After exporting, the map should open in your web browser. If it doesn't, open your operating system file explorer (or web browser) and navigate to the output folder. You should see a new folder called
export_year_month_day_hour_minute_seconds (for example, export_2015_02_19_11_34_05). Inside this folder is index.html. Open this file with a web browser to see your map: - Note that all the vectors are clickable, and the popup will display the attribute table information. If you turned on labels and hover, then hovering over a point will display the name.
The qgis2leaf plugin converts your map into something that is compatible with the web. Generally, this means converting vector data to the GeoJSON format and generating an HTML page (web page) with some JavaScript to create and populate the map.
Raster layers are trickier, and if you can, try to stick to using Tile or WMS services to serve them. Refer to the next section to see how to use Tiles or WMS.
Tip
If you need host tiles locally, try using the QTiles plugin to generate them.
The next logical step is to make the map dynamic based on a web service. To do this, you can swap static files for web services:
Tip
Now that you've created the Leaflet map, if you wanted to get into JavaScript programming, all of the code that you need is in the directory produced, either directly in index.html or in the js folder. In particular, you can see exactly how layers are styled and added to the map.
You don't have to use Tiles or WMS for raster layers but this is recommended. If you do want to use a local file, be warned there is a bug currently where some exports fail unless your raster is converted to a .jpg format image in EPSG:4326 projection.