Skip to content
NieneB edited this page May 22, 2017 · 3 revisions

▶️ Head over to GitHub.com and create a new repository named myfirstwebmap

▶️ Give your repository a nice description. Like:

My First Web Map in Leaflet.js

▶️ Setting: Public

▶️ Initialize this repository with a README.md

▶️ Create Repository

Now we have our own repository!

Uploading files

▶️. Upload all the files you need for your web map. Choose either the Leaflet or the D3 map. We can only show 1 per repository. Repeat these steps if you want to show both!

  • index.html
  • main.css
  • main.js
  • data.geojson

Hosting with GitHub-Pages

GitHub has this awesome trick! If we change our main branch to a GitHub Pages branch and put a index.html file in there, GitHub will host our website!

▶️ Click on the Settings tab and scroll down to the GitHub Pages section.

▶️ Then select the master branch source and click on the Save button.

GitHub Pages Source Setting

Fire up a browser and go to http://username.github.io/repository. Change the user-name in the link to your own GitHub user name and the repository to your repository name!

Read more about it here: https://pages.github.com/

Editing the README.md

The README contains the text that is shown at the bottom of your repository. This usually contains a small explanation of what the repository is about and links to useful other sources. Let's edit our README.md in the browser to customize it!

▶️ Click on the README.md file and edit it by clicking the edit button.

▶️ In the README.md put the following:

~~~
# My First Web Map in Leaflet.js

This repository contains the scripts and data for my first interactive web map.

You can view my map <[HERE](http://username.github.io/repository)>
~~~

▶️ Change the user-name in the link to your own GitHub user name and the repository to your repository name!

▶️ Commit changes.

Now send the link to all your family and friends!

An example of how your repository should look can be found here: https://github.com/NieneB/myfirstwebmap