MaptimeLA presents:
Let's make our own map website!
Thank you to Arup for hosting!!
GitHub is online version control that uses Git.
What is Version Control?
What is Git?
Why Git?
- a Version Control system
- Software
- Free
- Open Source
- Commonly Used
NOW, what is GitHub?
A website that hosts your projects and uses Git to track the files.
It uses "repositories" to store files related to a project.
Multiple people can collaborate on a project.
You can see all the changes made to the files and revert to a prior version if you made a mistake.
Let's make a GitHub repository
Login to your GitHub account and plus sign (+) in the upper right.
Give your repository a name (no spaces) and a description.
You've created a repository!
QGIS is free, open source, mapping and analysis software.
You can use it to make maps,
perform analysis,
and manage geographic data (create/edit).
Let's map mock election sites in QGIS
Open QGIS Desktop.
Drag and drop the geojson file into the map (or go to Layer, Add Layer, Add Vector Layer)
You should see points. Click the "i" in a blue circle icon and click on a point.
A basemap would be helpful for context. It is a plugin (go to Plugins, Manage & Install Plugins).
Search for and install the OpenLayers plugin.
Go to Web, OpenLayers and add a basemap (I recommend OpenStreetMap or Stamen Toner Lite).
Let's make a webmap using QGIS2Web
We need another plugin. Search for and install QGIS2Web.
Click the icon that looks like a blue tile with a leaf on it.
Toggle the button at the bottom for Leaflet.
On the Appearance tab you can add several widgets. Experiment & click the Update Preview button.
On the Export tab select a folder on your computer named qgis2web and click Export.
Go to that folder and you will see several folders/files. If you have Atom, open the QGIS2Web folder & look at the code.
Let's upload the map to GitHub
Drag and drop your qgis2web folder into your repository.
Let's use GitHub Pages to create a web page
Go to the Settings tab.
Scroll down to GitHub Pages
Select your Master branch and click on Choose a Theme.
Pick any theme and click Select Theme and Commit.
You can see your site by going to: https://youraccount.github.io/yourrepo
Create an index.md file (this will be your home page)
Let's add your map to your GitHub pages site
You can see your map by going to https://youraccount.github.io/yourrepo/qgis2web
Let's embed your map into your main web page.
Open your index.md file in GitHub and click the pencil icon.
Add this code wherever you want your map to appear:
Now people can use your map on your site!
Good job!
