_Dissenter
(@Dissenter)
14
My goal was to move from using Google Fusion Tables (Google’s map-related mapping table) to using OpenStreetMap as a base layer with an independent data layer. Best of all, I’m no longer chained to Google Maps. I thought they had a really good product and people were using for good…“heatmapping”. Oh, well.
I accomplished my goal by using QGIS (Open source GIS software – currently v3.6), a QGIS plugin named “qgis2web”, Excel, and OpenStreetMap (basemap).
On my site, I use an iframe to frame the map but here’s the final map:
https://www.amep.com/map/usgs/
Example CSV: https://www.amep.com/map/usgs07.csv
- Pull OpenStreetMap into QGis. This may be another plugin…
- Add a “Delimited Text Layer” in QGIS
a. This is based on a CSV that contains all the Links, Image Links, Descriptions, Polygon Coordinates…When the polygon is clicked, a small window pops up with all the specific information about the map is displayed.
b. You’ll need to select the Geometric column in the CSV to pull in the Polygon maps sections
c. Here’s an example of the Polygon Column: " POLYGON ((-74 43, -72 43, -72 42, -74 42)) " – the order goes clockwise
d. Other information is also included so that one can click on the polygons and get a popup of more information: Links, Descriptions…
- Once the map looks OK in QGIS, click on “WEB” ->qgis2web plugin.
a. This pulls up a new window with lots of output options…too many to explain here.
b. Tell it where you want to export. It then produces a folder full of all the assets that you will need to publish to the web…it’s pretty slick.
c. You may Export to either OpenLayers or Leaflet; I used OpenLayers.
- That’s basically it. I spent a lot of time tweaking how the map layers and polygons look. You can control most things (like zoom levels and map extent) but some CSS, html, Javascript editing is needed.