{"id":1210,"date":"2026-10-20T07:50:39","date_gmt":"2026-10-20T07:50:39","guid":{"rendered":"https:\/\/helpwithmygisassignment.com\/blog\/?p=1210"},"modified":"2026-10-20T07:50:39","modified_gmt":"2026-10-20T07:50:39","slug":"leaflet-github-pages-portfolio","status":"publish","type":"post","link":"https:\/\/helpwithmygisassignment.com\/blog\/leaflet-github-pages-portfolio\/","title":{"rendered":"How to Build an Impressive Web GIS Portfolio using Leaflet and GitHub Pages"},"content":{"rendered":"<div><\/div>\n<div>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/helpwithmygisassignment.com\/blog\/leaflet-github-pages-portfolio\/#How_to_Build_an_Impressive_Web_GIS_Portfolio_using_Leaflet_and_GitHub_Pages\" >How to Build an Impressive Web GIS Portfolio using Leaflet and GitHub Pages<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/helpwithmygisassignment.com\/blog\/leaflet-github-pages-portfolio\/#Why_Build_a_Web_GIS_Portfolio_using_Leaflet_and_GitHub_Pages\" >Why Build a Web GIS Portfolio using Leaflet and GitHub Pages<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/helpwithmygisassignment.com\/blog\/leaflet-github-pages-portfolio\/#1_Tools_needed\" >1. Tools needed<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/helpwithmygisassignment.com\/blog\/leaflet-github-pages-portfolio\/#2_Step_1_%E2%80%94_Create_your_project_and_HTML_boilerplate\" >2. Step 1 \u2014 Create your project and HTML boilerplate<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/helpwithmygisassignment.com\/blog\/leaflet-github-pages-portfolio\/#21_Create_indexhtml\" >2.1 Create index.html<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/helpwithmygisassignment.com\/blog\/leaflet-github-pages-portfolio\/#3_Step_2_%E2%80%94_Initialize_the_map_and_add_basemaps\" >3. Step 2 \u2014 Initialize the map and add basemaps<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/helpwithmygisassignment.com\/blog\/leaflet-github-pages-portfolio\/#31_Initialize_Leaflet\" >3.1 Initialize Leaflet<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/helpwithmygisassignment.com\/blog\/leaflet-github-pages-portfolio\/#4_Step_3_%E2%80%94_Convert_spatial_data_to_GeoJSON\" >4. Step 3 \u2014 Convert spatial data to GeoJSON<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/helpwithmygisassignment.com\/blog\/leaflet-github-pages-portfolio\/#41_Prepare_the_data_in_QGIS\" >4.1 Prepare the data in QGIS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/helpwithmygisassignment.com\/blog\/leaflet-github-pages-portfolio\/#42_Understand_the_GeoJSON_structure\" >4.2 Understand the GeoJSON structure<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/helpwithmygisassignment.com\/blog\/leaflet-github-pages-portfolio\/#43_Load_GeoJSON_into_Leaflet\" >4.3 Load GeoJSON into Leaflet<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/helpwithmygisassignment.com\/blog\/leaflet-github-pages-portfolio\/#5_Step_4_%E2%80%94_Design_a_professional_map_interface\" >5. Step 4 \u2014 Design a professional map interface<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/helpwithmygisassignment.com\/blog\/leaflet-github-pages-portfolio\/#51_Style_the_page_using_CSS\" >5.1 Style the page using CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/helpwithmygisassignment.com\/blog\/leaflet-github-pages-portfolio\/#52_Add_a_custom_legend\" >5.2 Add a custom legend<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/helpwithmygisassignment.com\/blog\/leaflet-github-pages-portfolio\/#53_Improve_layer_controls_and_usability\" >5.3 Improve layer controls and usability<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/helpwithmygisassignment.com\/blog\/leaflet-github-pages-portfolio\/#6_Step_5_%E2%80%94_Deploy_your_Web_GIS_portfolio_using_GitHub_Pages\" >6. Step 5 \u2014 Deploy your Web GIS portfolio using GitHub Pages<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/helpwithmygisassignment.com\/blog\/leaflet-github-pages-portfolio\/#61_Create_a_GitHub_repository\" >6.1 Create a GitHub repository<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/helpwithmygisassignment.com\/blog\/leaflet-github-pages-portfolio\/#62_Upload_your_project_files\" >6.2 Upload your project files<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/helpwithmygisassignment.com\/blog\/leaflet-github-pages-portfolio\/#63_Enable_GitHub_Pages\" >6.3 Enable GitHub Pages<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/helpwithmygisassignment.com\/blog\/leaflet-github-pages-portfolio\/#64_Test_the_published_map\" >6.4 Test the published map<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/helpwithmygisassignment.com\/blog\/leaflet-github-pages-portfolio\/#7_Checklist_%E2%80%94_What_employers_look_for_in_a_student_Web_GIS_portfolio\" >7. Checklist \u2014 What employers look for in a student Web GIS portfolio<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/helpwithmygisassignment.com\/blog\/leaflet-github-pages-portfolio\/#Portfolio_readiness\" >Portfolio readiness<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/helpwithmygisassignment.com\/blog\/leaflet-github-pages-portfolio\/#Portfolio_projects_worth_building_next\" >Portfolio projects worth building next<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/helpwithmygisassignment.com\/blog\/leaflet-github-pages-portfolio\/#Summary\" >Summary<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h1><span class=\"ez-toc-section\" id=\"How_to_Build_an_Impressive_Web_GIS_Portfolio_using_Leaflet_and_GitHub_Pages\"><\/span>How to Build an Impressive Web GIS Portfolio using Leaflet and GitHub Pages<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p>Web GIS Tutorial \u00b7 HTML \u00b7 CSS \u00b7 JavaScript \u00b7 Leaflet.js \u00b7 GitHub Pages<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Why_Build_a_Web_GIS_Portfolio_using_Leaflet_and_GitHub_Pages\"><\/span>Why Build a Web GIS Portfolio using Leaflet and GitHub Pages<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>A strong Web GIS portfolio demonstrates more than your ability to produce a good-looking map. It shows that you can transform <a href=\"https:\/\/helpwithmygisassignment.com\/blog\/idw-vs-kriging-gis\/\">spatial data<\/a> into an interactive application that people can explore through a web browser.<\/p>\n<p>Many GIS students showcase static maps exported from QGIS or ArcGIS Pro. These are useful, but an interactive map demonstrates additional skills: web development, spatial data handling, user interface design, and publishing applications online.<\/p>\n<p>With Leaflet and GitHub Pages, you can build and host a working Web GIS portfolio without paying for a web server. Your project can include interactive markers, pop-ups, layer controls, a custom legend, and a descriptive project page.<\/p>\n<p>This Web GIS Portfolio Leaflet GitHub Pages tutorial will guide you through building a complete example: a public facilities map that displays sample locations, allows users to explore features, and can be shared through a live URL.<\/p>\n<p>By the end, you will have a reusable foundation for showcasing geospatial projects to employers, clients, lecturers, and other GIS professionals.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"1_Tools_needed\"><\/span>1. Tools needed<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>You do not need an expensive development setup to get started.<\/p>\n<div>\n<div>\n<div>\n<div>\n<p><img decoding=\"async\" src=\"https:\/\/images.openai.com\/static-rsc-4\/IQh4NH1vNILw0_WdTX3QJ5-1DpDvqTeSv3aHEDJsVPfsca8yxFKcGIirDIBw7RyeKRJ3zov9uzOJpfoQvsdKD62eHe8j0I2pOcAn4d5k7j0Mu0WX0QJldAOuWTyf4fDZD4hj_tQKyVDQ2o4pUcRG-_FXI6PBPiyMlNB_zfGul60?purpose=inline\" alt=\"HTML, CSS y JS: ideal para comenzar a trabajar en remoto\" \/><\/p>\n<div>\n<div><\/div>\n<\/div>\n<div><\/div>\n<div>\n<div>\n<div>\n<div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div>\n<p>HTML, CSS, and JavaScript<\/p>\n<p>HTML structures the page, CSS controls its appearance, and JavaScript powers map interactions. These three technologies form the foundation of the application.<\/p>\n<\/div>\n<\/div>\n<div><\/div>\n<div>\n<div>\n<div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/images.openai.com\/static-rsc-4\/tu4WKvB5BWg883gX6snb1O65LR6xBm0OLBrtVCoBur-1a-z-aenpHGRxFThnJg7bZg-a2j34sHzwP9VJ9ha3fzCcLzBpM9LdUvAW0cxYN1ltiyZ60yEgYCFe_js5xgTmwvN6r2gyskgse3ugUt_o234N1o23ldzh6imjv2zEcIA?purpose=inline\" alt=\"Web GIS Portfolio using Leaflet and GitHub Pages\" width=\"1200\" height=\"600\" \/><\/p>\n<div>\n<div><\/div>\n<\/div>\n<div><\/div>\n<div>\n<div>\n<div>\n<div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div>\n<p>Leaflet.js<\/p>\n<p>An open-source JavaScript library for interactive maps, markers, pop-ups, raster tile layers, and layer controls.<\/p>\n<p><a href=\"https:\/\/leafletjs.com\/?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noopener\">Leaflet official website<\/a><\/p>\n<\/div>\n<\/div>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1350\" src=\"https:\/\/helpwithmygisassignment.com\/blog\/wp-content\/uploads\/2026\/10\/download.png\" alt=\"Web GIS Portfolio using Leaflet and GitHub Pages\" width=\"225\" height=\"225\" srcset=\"https:\/\/helpwithmygisassignment.com\/blog\/wp-content\/uploads\/2026\/10\/download.png 225w, https:\/\/helpwithmygisassignment.com\/blog\/wp-content\/uploads\/2026\/10\/download-150x150.png 150w\" sizes=\"auto, (max-width: 225px) 100vw, 225px\" \/><\/div>\n<div>\n<div>\n<div>\n<p>&nbsp;<\/p>\n<div>\n<div><\/div>\n<\/div>\n<div><\/div>\n<div>\n<div>\n<div>\n<div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div>\n<p>GitHub account<\/p>\n<p>GitHub stores your code and provides version control. GitHub Pages can publish a static website directly from a repository.<\/p>\n<p><a href=\"https:\/\/pages.github.com\/?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noopener\">GitHub Pages<\/a><\/p>\n<\/div>\n<\/div>\n<div><\/div>\n<div>\n<div>\n<div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/images.openai.com\/static-rsc-4\/rpC-AttxZfwSabij_3RPcOaa_MG6-UZfM-MzZ4HI3ov4r-dDR9GmgKG1yVe1OoymFQtlGhkPnjBVCjkVSob2rc1SNpOoB4t_fbNZk4_B81rw55nd00VqBw4yG0KB3gOxt2S0RVEna4ZRiscxvA4BNGpSnIhMhN5_g9vmpe8SOok?purpose=inline\" alt=\"Web GIS Portfolio using Leaflet and GitHub Pages\" width=\"1365\" height=\"730\" \/><\/p>\n<div>\n<div><\/div>\n<\/div>\n<div><\/div>\n<div>\n<div>\n<div>\n<div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div>\n<p>QGIS (recommended)<\/p>\n<p>Use QGIS to inspect spatial datasets, select relevant attributes, and export vector layers into GeoJSON for use in your web map.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>You can write and test the application in a code editor such as VS Code. A modern web browser is sufficient for testing the initial project locally.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"2_Step_1_%E2%80%94_Create_your_project_and_HTML_boilerplate\"><\/span>2. Step 1 \u2014 Create your project and HTML boilerplate<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Start with a simple project directory containing the files needed to build the map.<\/p>\n<div>\n<div>\n<pre dir=\"ltr\"><code>web-gis-portfolio\/\r\n\u251c\u2500\u2500 index.html\r\n\u251c\u2500\u2500 style.css\r\n\u251c\u2500\u2500 script.js\r\n\u2514\u2500\u2500 data\/\r\n    \u2514\u2500\u2500 facilities.geojson<\/code><\/pre>\n<\/div>\n<\/div>\n<p>The files have distinct responsibilities:<\/p>\n<ul>\n<li>\n<div>\n<div>\n<p><code>index.html<\/code> defines the page structure and loads the required libraries.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p><code>style.css<\/code> controls the layout, typography, legend, and responsive design.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p><code>script.js<\/code> creates the map and implements its interactions.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p><code>facilities.geojson<\/code> stores the spatial features displayed on the map.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"21_Create_indexhtml\"><\/span>2.1 Create <code>index.html<\/code><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Create a new file named <code>index.html<\/code> and insert the following complete HTML boilerplate.<\/p>\n<div>\n<div>\n<pre dir=\"ltr\"><code>\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n&lt;head&gt;\r\n  &lt;meta charset=\"UTF-8\"&gt;\r\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\r\n\r\n  &lt;title&gt;Public Facilities | Web GIS Portfolio&lt;\/title&gt;\r\n\r\n  &lt;!-- Leaflet stylesheet --&gt;\r\n  &lt;link\r\n    rel=\"stylesheet\"\r\n    href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\"\r\n  &gt;\r\n\r\n  &lt;!-- Your custom styles --&gt;\r\n  &lt;link rel=\"stylesheet\" href=\"style.css\"&gt;\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n  &lt;header class=\"site-header\"&gt;\r\n    &lt;div&gt;\r\n      &lt;p class=\"eyebrow\"&gt;GEOSPATIAL PORTFOLIO PROJECT&lt;\/p&gt;\r\n      &lt;h1&gt;Public Facilities Explorer&lt;\/h1&gt;\r\n      &lt;p&gt;Explore facility locations through an interactive web map.&lt;\/p&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/header&gt;\r\n\r\n  &lt;main&gt;\r\n    &lt;section class=\"map-section\" aria-label=\"Interactive map\"&gt;\r\n      &lt;div id=\"map\"&gt;&lt;\/div&gt;\r\n      &lt;div id=\"map-status\" class=\"map-status\" role=\"status\"&gt;\r\n        Loading map data...\r\n      &lt;\/div&gt;\r\n    &lt;\/section&gt;\r\n\r\n    &lt;section class=\"project-info\"&gt;\r\n      &lt;h2&gt;About this project&lt;\/h2&gt;\r\n      &lt;p&gt;\r\n        This Web GIS application demonstrates spatial data\r\n        visualization, interactive pop-ups, and layer controls\r\n        using Leaflet and GeoJSON.\r\n      &lt;\/p&gt;\r\n      &lt;p class=\"tech-stack\"&gt;\r\n        Built with HTML, CSS, JavaScript, Leaflet, and GeoJSON.\r\n      &lt;\/p&gt;\r\n    &lt;\/section&gt;\r\n  &lt;\/main&gt;\r\n\r\n  &lt;!-- Leaflet JavaScript --&gt;\r\n  &lt;script\r\n    src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"\r\n  &gt;&lt;\/script&gt;\r\n\r\n  &lt;!-- Your map logic --&gt;\r\n  &lt;script src=\"script.js\"&gt;&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<p>Why this structure matters: The <code>#map<\/code> element is the container Leaflet will turn into an interactive map. The stylesheet and JavaScript library must load before your custom map code runs.<\/p>\n<p>The example uses a pinned Leaflet version so the dependencies remain predictable during development.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"3_Step_2_%E2%80%94_Initialize_the_map_and_add_basemaps\"><\/span>3. Step 2 \u2014 Initialize the map and add basemaps<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>A basemap provides geographical context for your data. For example, a public facilities map becomes easier to interpret when users can see nearby roads, settlements, and other reference features.<\/p>\n<p>Leaflet supports raster tile layers from compatible map providers. In this tutorial, we will use OpenStreetMap as the default basemap and CARTO&#8217;s light basemap as an alternative.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"31_Initialize_Leaflet\"><\/span>3.1 Initialize Leaflet<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Open <code>script.js<\/code> and add the following code.<\/p>\n<div>\n<div>\n<pre dir=\"ltr\"><code>\r\nconst map = L.map(\"map\").setView([-1.2864, 36.8172], 11);\r\n\r\n\/\/ OpenStreetMap basemap\r\nconst osmLayer = L.tileLayer(\r\n  \"https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png\",\r\n  {\r\n    maxZoom: 19,\r\n    attribution:\r\n      '&amp;copy; &lt;a href=\"https:\/\/www.openstreetmap.org\/copyright\"&gt;' +\r\n      \"OpenStreetMap&lt;\/a&gt; contributors\"\r\n  }\r\n).addTo(map);\r\n\r\n\/\/ CARTO light basemap\r\nconst cartoLayer = L.tileLayer(\r\n  \"https:\/\/basemaps.cartocdn.com\/light_all\/{z}\/{x}\/{y}{r}.png\",\r\n  {\r\n    maxZoom: 20,\r\n    attribution:\r\n      '&amp;copy; OpenStreetMap contributors &amp;copy; &lt;a href=\"https:\/\/carto.com\/attributions\"&gt;CARTO&lt;\/a&gt;'\r\n  }\r\n);\r\n\r\n\/\/ Allow users to switch basemaps\r\nconst baseMaps = {\r\n  \"OpenStreetMap\": osmLayer,\r\n  \"CARTO Light\": cartoLayer\r\n};\r\n\r\nL.control.layers(baseMaps, null, {\r\n  collapsed: false\r\n}).addTo(map);\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<p>The initial coordinates point to Nairobi, Kenya. You can change the coordinates and zoom level to match your study area.<\/p>\n<p>The key components are:<\/p>\n<ul>\n<li>\n<div>\n<div>\n<p><code>L.map(\"map\")<\/code> creates the map inside the HTML element with ID <code>map<\/code>.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p><code>setView()<\/code> sets the initial centre and zoom.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p><code>L.tileLayer()<\/code> loads map tiles from a provider.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p><code>L.control.layers()<\/code> creates an interactive basemap selector.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<\/ul>\n<div>\n<div>\n<p><img decoding=\"async\" src=\"https:\/\/images.openai.com\/static-rsc-4\/wLTRvlBaCpIxrKbc8brcaxaRfYdRyFuoEcyHVCa61JAUmwX6OEbfElIEIdf2RuXa7lOR9q3Va-OU_sYit0AO_DVN2awWzlsLslKiYG2fpazT4mSvtOsJQRUZoI8WXS-bOmOOk-ZD5QOTc0y3kwzJ2nOy29wkruSoyJaV0Dam-aQ?purpose=inline\" alt=\"GitHub - FRANKSADWAR\/WebGIS-for-Avocado-Farmers: Web GIS mapping for farmers in Kenya \u00b7 GitHub\" \/><\/p>\n<div>\n<div><\/div>\n<\/div>\n<div><\/div>\n<div>\n<div>\n<div>\n<div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div><a href=\"https:\/\/github.com\/FRANKSADWAR\/WebGIS-for-Avocado-Farmers?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noopener\">github.com<\/a><\/div>\n<\/div>\n<\/div>\n<p>Tile usage reminder: OpenStreetMap&#8217;s standard tile service has a usage policy. Keep its required attribution visible, avoid bulk downloading or prefetching tiles, and use a provider appropriate for your expected traffic. Review <a href=\"https:\/\/operations.osmfoundation.org\/policies\/tiles\/?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noopener\">OpenStreetMap&#8217;s tile usage policy<\/a> before publishing. Check the terms of any alternative basemap provider as well.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"4_Step_3_%E2%80%94_Convert_spatial_data_to_GeoJSON\"><\/span>4. Step 3 \u2014 Convert spatial data to GeoJSON<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>GeoJSON is a convenient format for web mapping because it represents geographic features and their attributes in a JSON structure that JavaScript can read directly.<\/p>\n<p>You can export points, lines, or polygons from QGIS and display them as interactive Leaflet layers.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"41_Prepare_the_data_in_QGIS\"><\/span>4.1 Prepare the data in QGIS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>For this example, prepare a point layer containing public facilities. Your attribute table could include fields such as:<\/p>\n<div>\n<table>\n<tbody>\n<tr>\n<th>Field<\/th>\n<th>Example<\/th>\n<\/tr>\n<tr>\n<td><code>name<\/code><\/td>\n<td>Community Health Centre<\/td>\n<\/tr>\n<tr>\n<td><code>type<\/code><\/td>\n<td>Health<\/td>\n<\/tr>\n<tr>\n<td><code>ward<\/code><\/td>\n<td>Example Ward<\/td>\n<\/tr>\n<tr>\n<td><code>status<\/code><\/td>\n<td>Operational<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>These are example values, not verified facility records. Use genuine, appropriately licensed data when creating a real portfolio project.<\/p>\n<p>In QGIS:<\/p>\n<ol>\n<li>\n<div>\n<div>\n<p>Load your vector dataset.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p>Check the geometry and attribute fields.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p>Right-click the layer in the Layers panel.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p>Select Export \u2192 Save Features As.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p>Set the format to GeoJSON.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p>Select EPSG:4326 \u2014 WGS 84 as the CRS for this example.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p>Save the file as <code>facilities.geojson<\/code> inside your project&#8217;s <code>data<\/code> directory.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<\/ol>\n<p>GeoJSON coordinates use longitude first and latitude second. When converting a layer from a projected CRS, reproject it during export rather than simply changing the CRS label.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"42_Understand_the_GeoJSON_structure\"><\/span>4.2 Understand the GeoJSON structure<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>A GeoJSON file containing point features has a structure similar to this:<\/p>\n<div>\n<div>\n<pre dir=\"ltr\"><code>\r\n{\r\n  \"type\": \"FeatureCollection\",\r\n  \"features\": [\r\n    {\r\n      \"type\": \"Feature\",\r\n      \"properties\": {\r\n        \"name\": \"Sample Health Centre\",\r\n        \"type\": \"Health\",\r\n        \"ward\": \"Example Ward\",\r\n        \"status\": \"Operational\"\r\n      },\r\n      \"geometry\": {\r\n        \"type\": \"Point\",\r\n        \"coordinates\": [36.8172, -1.2864]\r\n      }\r\n    }\r\n  ]\r\n}\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<p>The coordinates represent longitude and latitude in that order. The record is illustrative and should not be treated as a real facility location.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"43_Load_GeoJSON_into_Leaflet\"><\/span>4.3 Load GeoJSON into Leaflet<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Add the following to <code>script.js<\/code>, after your basemap code.<\/p>\n<div>\n<div>\n<pre dir=\"ltr\"><code>\r\nlet facilitiesLayer;\r\n\r\nfetch(\"data\/facilities.geojson\")\r\n  .then(response =&gt; {\r\n    if (!response.ok) {\r\n      throw new Error(\r\n        `Could not load GeoJSON: ${response.status}`\r\n      );\r\n    }\r\n\r\n    return response.json();\r\n  })\r\n  .then(data =&gt; {\r\n    facilitiesLayer = L.geoJSON(data, {\r\n      pointToLayer: (feature, latlng) =&gt; {\r\n        return L.circleMarker(latlng, {\r\n          radius: 7,\r\n          fillColor: \"#0f766e\",\r\n          color: \"#ffffff\",\r\n          weight: 2,\r\n          opacity: 1,\r\n          fillOpacity: 0.9\r\n        });\r\n      },\r\n\r\n      onEachFeature: (feature, layer) =&gt; {\r\n        const properties = feature.properties || {};\r\n\r\n        const popupContent = document.createElement(\"div\");\r\n        const heading = document.createElement(\"h3\");\r\n        heading.textContent = properties.name || \"Unnamed facility\";\r\n\r\n        const type = document.createElement(\"p\");\r\n        type.textContent = `Type: ${properties.type || \"Not specified\"}`;\r\n\r\n        const ward = document.createElement(\"p\");\r\n        ward.textContent = `Ward: ${properties.ward || \"Not specified\"}`;\r\n\r\n        const status = document.createElement(\"p\");\r\n        status.textContent = `Status: ${properties.status || \"Not specified\"}`;\r\n\r\n        popupContent.append(heading, type, ward, status);\r\n        layer.bindPopup(popupContent);\r\n      }\r\n    }).addTo(map);\r\n\r\n    const bounds = facilitiesLayer.getBounds();\r\n\r\n    if (bounds.isValid()) {\r\n      map.fitBounds(bounds, { padding: [30, 30] });\r\n    }\r\n\r\n    document.getElementById(\"map-status\").textContent =\r\n      `${data.features.length} features loaded`;\r\n  })\r\n  .catch(error =&gt; {\r\n    console.error(\"GeoJSON loading failed:\", error);\r\n\r\n    document.getElementById(\"map-status\").textContent =\r\n      \"Map data could not be loaded. Check the file path and browser console.\";\r\n  });\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<p>This implementation creates styled point markers, builds a pop-up from each feature&#8217;s attributes, zooms to the data extent, and reports loading errors.<\/p>\n<p>Using DOM elements and <code>textContent<\/code> for attribute values is preferable to inserting untrusted data directly into HTML strings. This helps prevent data-driven HTML injection.<\/p>\n<p>Important for local testing: <code>fetch()<\/code> may fail if you open <code>index.html<\/code> directly using a <code>file:\/\/<\/code> URL. Run the project through a local web server instead. For example, if Python is installed, open a terminal in your project folder and run:<\/p>\n<div>\n<div>\n<pre dir=\"ltr\"><code>python -m http.server 8000<\/code><\/pre>\n<\/div>\n<\/div>\n<p>Then open <code>http:\/\/localhost:8000<\/code> in your browser. If the Python command is unavailable, use a local development server provided by your code editor.<\/p>\n<p>For line and polygon datasets, <code>L.geoJSON()<\/code> can render the geometry directly. You can also style each feature based on its properties using a <code>style<\/code> function.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"5_Step_4_%E2%80%94_Design_a_professional_map_interface\"><\/span>5. Step 4 \u2014 Design a professional map interface<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>A portfolio project should feel like a small, finished application rather than a default map embedded on a blank webpage.<\/p>\n<p>Use CSS to create a consistent title banner, clear map boundaries, a compact legend, readable typography, and a layout that adapts to mobile screens.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"51_Style_the_page_using_CSS\"><\/span>5.1 Style the page using CSS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Open <code>style.css<\/code> and add the following complete stylesheet.<\/p>\n<div>\n<div>\n<pre dir=\"ltr\"><code>\r\n:root {\r\n  --navy: #102a43;\r\n  --teal: #0f766e;\r\n  --background: #f3f6f8;\r\n  --text: #243b53;\r\n  --muted: #627d98;\r\n  --white: #ffffff;\r\n}\r\n\r\n* {\r\n  box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n  margin: 0;\r\n  font-family: Arial, Helvetica, sans-serif;\r\n  background: var(--background);\r\n  color: var(--text);\r\n  line-height: 1.6;\r\n}\r\n\r\n.site-header {\r\n  background: var(--navy);\r\n  color: var(--white);\r\n  padding: 30px 6%;\r\n}\r\n\r\n.site-header h1 {\r\n  margin: 4px 0 8px;\r\n  font-size: clamp(1.7rem, 4vw, 2.7rem);\r\n  line-height: 1.2;\r\n}\r\n\r\n.site-header p {\r\n  margin: 0;\r\n  color: #d9e8f2;\r\n}\r\n\r\n.eyebrow {\r\n  font-size: 0.75rem;\r\n  letter-spacing: 0.13em;\r\n  font-weight: bold;\r\n}\r\n\r\nmain {\r\n  width: min(1200px, 92%);\r\n  margin: 28px auto;\r\n}\r\n\r\n.map-section {\r\n  position: relative;\r\n  background: var(--white);\r\n  padding: 12px;\r\n  border-radius: 14px;\r\n  box-shadow: 0 5px 22px rgba(16, 42, 67, 0.08);\r\n}\r\n\r\n#map {\r\n  height: 560px;\r\n  width: 100%;\r\n  border-radius: 9px;\r\n}\r\n\r\n.map-status {\r\n  padding: 8px 4px 0;\r\n  color: var(--muted);\r\n  font-size: 0.85rem;\r\n}\r\n\r\n.project-info {\r\n  background: var(--white);\r\n  margin-top: 22px;\r\n  padding: 24px;\r\n  border-radius: 14px;\r\n}\r\n\r\n.project-info h2 {\r\n  margin-top: 0;\r\n  color: var(--navy);\r\n}\r\n\r\n.tech-stack {\r\n  color: var(--muted);\r\n  font-size: 0.9rem;\r\n}\r\n\r\n.leaflet-popup-content h3 {\r\n  margin: 0 0 10px;\r\n  color: var(--navy);\r\n}\r\n\r\n.leaflet-popup-content p {\r\n  margin: 5px 0;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .site-header {\r\n    padding: 24px 5%;\r\n  }\r\n\r\n  main {\r\n    width: 94%;\r\n    margin: 16px auto;\r\n  }\r\n\r\n  #map {\r\n    height: 420px;\r\n  }\r\n\r\n  .project-info {\r\n    padding: 18px;\r\n  }\r\n}\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<p>This stylesheet establishes a dark title banner, a clean map card, a readable project description, and responsive spacing. The <code>clamp()<\/code> function scales the title according to screen width, while the media query adjusts the map height on smaller screens.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"52_Add_a_custom_legend\"><\/span>5.2 Add a custom legend<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>A legend explains the meaning of symbols on the map. This becomes especially important when your project contains multiple facility types or categories.<\/p>\n<p>Add this HTML inside the <code>.map-section<\/code> element, immediately after the <code>#map<\/code> element:<\/p>\n<div>\n<div>\n<pre dir=\"ltr\"><code>\r\n&lt;div class=\"map-legend\"&gt;\r\n  &lt;h3&gt;Facility Types&lt;\/h3&gt;\r\n\r\n  &lt;div class=\"legend-item\"&gt;\r\n    &lt;span class=\"legend-dot health\"&gt;&lt;\/span&gt;\r\n    Health facility\r\n  &lt;\/div&gt;\r\n\r\n  &lt;div class=\"legend-item\"&gt;\r\n    &lt;span class=\"legend-dot education\"&gt;&lt;\/span&gt;\r\n    Education facility\r\n  &lt;\/div&gt;\r\n\r\n  &lt;div class=\"legend-item\"&gt;\r\n    &lt;span class=\"legend-dot other\"&gt;&lt;\/span&gt;\r\n    Other facility\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<p>Add these rules to <code>style.css<\/code>:<\/p>\n<div>\n<div>\n<pre dir=\"ltr\"><code>\r\n.map-legend {\r\n  position: absolute;\r\n  z-index: 1000;\r\n  bottom: 42px;\r\n  left: 22px;\r\n  width: 190px;\r\n  padding: 14px;\r\n  border-radius: 9px;\r\n  background: rgba(255, 255, 255, 0.96);\r\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);\r\n  font-size: 0.85rem;\r\n}\r\n\r\n.map-legend h3 {\r\n  margin: 0 0 10px;\r\n  font-size: 0.95rem;\r\n}\r\n\r\n.legend-item {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 9px;\r\n  margin: 7px 0;\r\n}\r\n\r\n.legend-dot {\r\n  width: 12px;\r\n  height: 12px;\r\n  display: inline-block;\r\n  flex-shrink: 0;\r\n  border-radius: 50%;\r\n  border: 1px solid #ffffff;\r\n}\r\n\r\n.health {\r\n  background: #0f766e;\r\n}\r\n\r\n.education {\r\n  background: #2563eb;\r\n}\r\n\r\n.other {\r\n  background: #d97706;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .map-legend {\r\n    width: 160px;\r\n    font-size: 0.78rem;\r\n  }\r\n}\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<p>The legend currently describes three categories, while the earlier marker code gives every facility the same colour. To make the legend accurate, update <code>pointToLayer<\/code> to use the facility&#8217;s <code>type<\/code> attribute.<\/p>\n<p>Replace the existing <code>pointToLayer<\/code> function with this version:<\/p>\n<div>\n<div>\n<pre dir=\"ltr\"><code>\r\npointToLayer: (feature, latlng) =&gt; {\r\n  const type = (feature.properties?.type || \"\")\r\n    .toLowerCase();\r\n\r\n  let color = \"#d97706\";\r\n\r\n  if (type === \"health\") {\r\n    color = \"#0f766e\";\r\n  } else if (type === \"education\") {\r\n    color = \"#2563eb\";\r\n  }\r\n\r\n  return L.circleMarker(latlng, {\r\n    radius: 7,\r\n    fillColor: color,\r\n    color: \"#ffffff\",\r\n    weight: 2,\r\n    fillOpacity: 0.9\r\n  });\r\n},\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<p>Now the marker colours correspond to the legend categories. Ensure that the actual values in your GeoJSON match the categories used in your code.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"53_Improve_layer_controls_and_usability\"><\/span>5.3 Improve layer controls and usability<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The basemap selector is already functional. You can also add thematic overlays as additional entries in the second argument to <code>L.control.layers()<\/code>.<\/p>\n<p>For example, if your JavaScript defines an additional layer named <code>facilitiesLayer<\/code>, you can register it like this after the GeoJSON layer has loaded:<\/p>\n<div>\n<div>\n<pre dir=\"ltr\"><code>L.control.layers(\r\n  {\r\n    \"OpenStreetMap\": osmLayer,\r\n    \"CARTO Light\": cartoLayer\r\n  },\r\n  {\r\n    \"Public facilities\": facilitiesLayer\r\n  },\r\n  {\r\n    collapsed: true\r\n  }\r\n).addTo(map);<\/code><\/pre>\n<\/div>\n<\/div>\n<p>Avoid adding this second control if you already have a control with the same overlays registered. Instead, modify your existing control or create one after the GeoJSON layer has loaded.<\/p>\n<p>A polished interface should also:<\/p>\n<ul>\n<li>\n<div>\n<div>\n<p>Use readable pop-ups and consistent marker sizes.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p>Keep controls from covering important map features.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p>Display an informative loading or error message.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p>Work on both desktop and mobile screens.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p>Include a short explanation of the dataset, methods, and limitations.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"6_Step_5_%E2%80%94_Deploy_your_Web_GIS_portfolio_using_GitHub_Pages\"><\/span>6. Step 5 \u2014 Deploy your Web GIS portfolio using GitHub Pages<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>GitHub Pages can host your HTML, CSS, JavaScript, and GeoJSON files as a static website. For a small student project, this is one of the easiest ways to publish a working interactive map for free.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"61_Create_a_GitHub_repository\"><\/span>6.1 Create a GitHub repository<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div>\n<div>\n<p><img decoding=\"async\" src=\"https:\/\/images.openai.com\/static-rsc-4\/RURsgQrmgrydP1sVPZh6iIZALiy2pGhnZOPGMKXYxPm-A18hpxkdaRCOavLO7tgGVC0JwF_3sEe2Ua0E1iNtiXAP_5xi8Ykn-WUnQJDdy9H5DL5Xe26QY_KfWP6TnJZ2BrcHX0KfBN77dwMq75fLG83gQlAbOLqZVTH73-1YKSc?purpose=inline\" alt=\"GitHub Projects | git_tutorial\" \/><\/p>\n<div>\n<div><\/div>\n<\/div>\n<div><\/div>\n<div>\n<div>\n<div>\n<div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div><a href=\"https:\/\/fraigo.github.io\/git_tutorial\/content\/github-projects.html?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noopener\">fraigo.github.io<\/a><\/div>\n<\/div>\n<\/div>\n<ol>\n<li>\n<div>\n<div>\n<p>Open <a href=\"https:\/\/github.com\/?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noopener\">GitHub<\/a> and sign in or create an account.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p>Click the + icon and select New repository.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p>Enter a repository name such as <code>web-gis-portfolio<\/code>.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p>Select Public if you want employers to view the source code easily.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p>Create the repository.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<\/ol>\n<p>If you want to host multiple portfolio projects, you can create a main portfolio website and keep individual mapping projects in separate repositories.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"62_Upload_your_project_files\"><\/span>6.2 Upload your project files<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>For a beginner, uploading through the GitHub website is sufficient.<\/p>\n<ol>\n<li>\n<div>\n<div>\n<p>Open your new repository.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p>Select Add file \u2192 Upload files.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p>Upload <code>index.html<\/code>, <code>style.css<\/code>, and <code>script.js<\/code>.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p>Upload the <code>data<\/code> folder and its <code>facilities.geojson<\/code> file, preserving the directory structure.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p>Add a <code>README.md<\/code> describing the project.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p>Commit the files to the repository.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<\/ol>\n<p>Your repository should look like this:<\/p>\n<div>\n<div>\n<pre dir=\"ltr\"><code>web-gis-portfolio\/\r\n\u251c\u2500\u2500 index.html\r\n\u251c\u2500\u2500 style.css\r\n\u251c\u2500\u2500 script.js\r\n\u251c\u2500\u2500 README.md\r\n\u2514\u2500\u2500 data\/\r\n    \u2514\u2500\u2500 facilities.geojson<\/code><\/pre>\n<\/div>\n<\/div>\n<p>Critical: GitHub Pages serves files at a URL path, so your relative file references must match the repository structure exactly. A file saved as <code>Facilities.geojson<\/code> will not necessarily load when your code requests <code>facilities.geojson<\/code>, especially on a case-sensitive hosting environment.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"63_Enable_GitHub_Pages\"><\/span>6.3 Enable GitHub Pages<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div>\n<div>\n<div>\n<div><\/div>\n<\/div>\n<div><\/div>\n<div>\n<div>\n<div>\n<div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div><a href=\"https:\/\/csc-vu.github.io\/classes\/csc4300\/labs\/lab02-checkerboard\/lab2-instr.html?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noopener\">csc-vu.github.io<\/a><\/div>\n<\/div>\n<\/div>\n<p>Follow these steps:<\/p>\n<ol>\n<li>\n<div>\n<div>\n<p>Open the repository&#8217;s Settings.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p>Select Pages from the navigation menu.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p>Under Build and deployment, choose Deploy from a branch.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p>Select the <code>main<\/code> branch and the <code>\/ (root)<\/code> folder.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p>Click Save.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<\/ol>\n<p>GitHub will build and publish the site. It may take a few minutes for the first deployment to become available, so the setup is quick but not guaranteed to finish in under two minutes.<\/p>\n<p>Your site will normally be available at a URL similar to:<\/p>\n<div>\n<div>\n<pre dir=\"ltr\"><code>https:\/\/YOUR-USERNAME.github.io\/web-gis-portfolio\/<\/code><\/pre>\n<\/div>\n<\/div>\n<p>Replace <code>YOUR-USERNAME<\/code> with your GitHub username.<\/p>\n<p>For exact instructions, consult the official <a href=\"https:\/\/docs.github.com\/en\/pages\/getting-started-with-github-pages?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noopener\">GitHub Pages setup guide<\/a>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"64_Test_the_published_map\"><\/span>6.4 Test the published map<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Open the live URL in a private or incognito browser window and check:<\/p>\n<ul>\n<li>\n<div>\n<div>\n<p>The map loads and displays the expected study area.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p>Both basemaps work.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p>The GeoJSON data loads without a 404 error.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p>Markers and pop-ups work correctly.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p>The legend matches the marker colours.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p>The layout remains usable on a mobile screen.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p>Attribution is visible and readable.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<\/ul>\n<p>If the map loads but the data does not, open the browser&#8217;s Developer Tools and inspect the Console and Network tabs. Look for missing files, incorrect paths, JavaScript errors, or blocked requests.<\/p>\n<p>GitHub Pages is a static hosting service. It does not run Python scripts or provide a database backend directly. If a future project requires authentication, server-side processing, or a live database connection, you will need an appropriate additional service.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"7_Checklist_%E2%80%94_What_employers_look_for_in_a_student_Web_GIS_portfolio\"><\/span>7. Checklist \u2014 What employers look for in a student Web GIS portfolio<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Publishing a live map is a great first step. A competitive portfolio also explains what problem you solved, how you handled the data, and why your results matter.<\/p>\n<div>\n<div>\n<h3><span class=\"ez-toc-section\" id=\"Portfolio_readiness\"><\/span>Portfolio readiness<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>0\/9<\/p>\n<\/div>\n<div>\n<div><\/div>\n<\/div>\n<div>\n<p><input disabled=\"disabled\" type=\"checkbox\" \/><\/p>\n<div>\n<p>Live project URL<\/p>\n<p>The website opens reliably and works outside your development computer.<\/p>\n<\/div>\n<\/div>\n<div>\n<p><input disabled=\"disabled\" type=\"checkbox\" \/><\/p>\n<div>\n<p>Clear problem statement<\/p>\n<p>The project identifies a real spatial question or decision-making need.<\/p>\n<\/div>\n<\/div>\n<div>\n<p><input disabled=\"disabled\" type=\"checkbox\" \/><\/p>\n<div>\n<p>Data provenance<\/p>\n<p>Datasets, sources, licenses, dates, and limitations are documented.<\/p>\n<\/div>\n<\/div>\n<div>\n<p><input disabled=\"disabled\" type=\"checkbox\" \/><\/p>\n<div>\n<p>GIS methodology<\/p>\n<p>The workflow explains data cleaning, spatial analysis, CRS choices, and assumptions.<\/p>\n<\/div>\n<\/div>\n<div>\n<p><input disabled=\"disabled\" type=\"checkbox\" \/><\/p>\n<div>\n<p>Interactive functionality<\/p>\n<p>Pop-ups, legends, layer controls, and navigation work as intended.<\/p>\n<\/div>\n<\/div>\n<div>\n<p><input disabled=\"disabled\" type=\"checkbox\" \/><\/p>\n<div>\n<p>Professional interface<\/p>\n<p>The design is readable, responsive, accessible, and consistent.<\/p>\n<\/div>\n<\/div>\n<div>\n<p><input disabled=\"disabled\" type=\"checkbox\" \/><\/p>\n<div>\n<p>Readable source code<\/p>\n<p>Files are organized, variables are descriptive, and the repository includes a README.<\/p>\n<\/div>\n<\/div>\n<div>\n<p><input disabled=\"disabled\" type=\"checkbox\" \/><\/p>\n<div>\n<p>Evidence of analytical thinking<\/p>\n<p>Maps are accompanied by findings, interpretation, and appropriate caveats.<\/p>\n<\/div>\n<\/div>\n<div>\n<p><input disabled=\"disabled\" type=\"checkbox\" \/><\/p>\n<div>\n<p>Project ownership<\/p>\n<p>The portfolio distinguishes your own work from external datasets, libraries, and contributions.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"Portfolio_projects_worth_building_next\"><\/span>Portfolio projects worth building next<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Once the facilities map works, consider expanding your portfolio with projects that demonstrate different GIS skills:<\/p>\n<div>\n<div>\n<div>\n<div>\n<p><img decoding=\"async\" src=\"https:\/\/images.openai.com\/static-rsc-4\/xoR0dhrTHZ1vItZGw8N2CeNFnrAx3J88Du0CFtqNNeMZ48AT__YrB9E_VhTFA3DCHxiWkJZb44lpR_5APJhYzJrHd4QnS_ultbZixjg8wQFl2o0V40GODcoXLsR3cPRmix-kdtQM9Fj61stB--YHPSjSuZXkkpLpH6OOfYBDgWo?purpose=inline\" alt=\"Geospatial Science Student Projects at RMIT | Nadia Designs | Nadia Designs\" \/><\/p>\n<div>\n<div><\/div>\n<\/div>\n<div><\/div>\n<div>\n<div>\n<div>\n<div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div>\n<p>1. Public service accessibility map<\/p>\n<p>Map health facilities or schools and analyze which communities have limited access. This demonstrates spatial analysis and communication.<\/p>\n<\/div>\n<\/div>\n<div><\/div>\n<div>\n<div>\n<div>\n<p><img decoding=\"async\" src=\"https:\/\/images.openai.com\/static-rsc-4\/5_gbv_6fHdyhuhbwL0rhNdlZO95iZATSzjxU_ynATmSVCXLkB3LrFJm0SP8B3QcL_dfOSg2999VGYEVwPoDUxDIQQ3iwQ5Sav3S-fbK2nqz3uxUaiTjUnEc8Sr_HPoF8KnAFjdN5ATUD8sRWfPFhgFrHdrPLS3sICwduaSNWgvY?purpose=inline\" alt=\"Coincident maps of changing land cover, land use, and forest condition in the United States, 1985-present | Scientific Data\" \/><\/p>\n<div>\n<div><\/div>\n<\/div>\n<div><\/div>\n<div>\n<div>\n<div>\n<div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div>\n<p>2. Land-use change explorer<\/p>\n<p>Display land-cover categories or change between two dates, with a legend and an explanation of the methodology.<\/p>\n<\/div>\n<\/div>\n<div><\/div>\n<div>\n<div>\n<div>\n<p><img decoding=\"async\" src=\"https:\/\/images.openai.com\/static-rsc-4\/d1HlxBRME0KOVqSQJalZVC4GhtFV4kNwQgRw8UbHzkOno2nwavBRPLJuCCck1zqmkEnWdlxShmMCGZH6gKhnfOn4AhHH-jth9RQHKFq_BlBGHsW1Jo24yHFI-MyDfTtl17MOxsNo00y4WRfmm7mwuPNaDN0j4S_rLuHEKUT3c84?purpose=inline\" alt=\"Youth Innovation Lab\" \/><\/p>\n<div>\n<div><\/div>\n<\/div>\n<div><\/div>\n<div>\n<div>\n<div>\n<div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div>\n<p>3. Environmental risk dashboard<\/p>\n<p>Combine spatial layers to communicate flood exposure, drainage conditions, or another locally relevant environmental issue.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>Choose projects that you can explain confidently in an interview. One well-documented application with a clear analytical purpose is often more valuable than several unfinished maps.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Summary\"><\/span>Summary<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Building a Web GIS portfolio with Leaflet and GitHub Pages gives you a practical way to demonstrate both GIS knowledge and web development skills without paying for hosting.<\/p>\n<p>The complete workflow is:<\/p>\n<ol>\n<li>\n<div>\n<div>\n<p>Create the HTML, CSS, and JavaScript files.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p>Initialize a Leaflet map and configure basemaps.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p>Export spatial data from QGIS into GeoJSON.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p>Add interactive markers, pop-ups, legends, and layer controls.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p>Publish the project using GitHub Pages.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<div>\n<div>\n<p>Document the project, test the live site, and explain the spatial insights it provides.<\/p>\n<\/div>\n<\/div>\n<\/li>\n<\/ol>\n<p>Career advice: Treat every portfolio project as a demonstration of your problem-solving ability, not merely your ability to display a map. Explain the question you investigated, where your data came from, which GIS methods you used, what you discovered, and what limitations remain.<\/p>\n<p>Your first goal should be to publish one complete, working map. You can then build on the same foundation to learn spatial analysis, advanced JavaScript, web mapping APIs, and eventually full-stack Web GIS development.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>How to Build an Impressive Web GIS Portfolio using Leaflet and GitHub Pages Web GIS Tutorial \u00b7 HTML \u00b7 CSS \u00b7 JavaScript \u00b7 Leaflet.js \u00b7 GitHub Pages Why Build a Web GIS Portfolio using Leaflet and GitHub Pages A strong Web GIS portfolio demonstrates more than your ability to produce a good-looking map. It shows &#8230; <a title=\"How to Build an Impressive Web GIS Portfolio using Leaflet and GitHub Pages\" class=\"read-more\" href=\"https:\/\/helpwithmygisassignment.com\/blog\/leaflet-github-pages-portfolio\/\" aria-label=\"Read more about How to Build an Impressive Web GIS Portfolio using Leaflet and GitHub Pages\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,4],"tags":[],"class_list":["post-1210","post","type-post","status-publish","format-standard","hentry","category-civil-engineering","category-gis-articles"],"_links":{"self":[{"href":"https:\/\/helpwithmygisassignment.com\/blog\/wp-json\/wp\/v2\/posts\/1210","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/helpwithmygisassignment.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/helpwithmygisassignment.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/helpwithmygisassignment.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/helpwithmygisassignment.com\/blog\/wp-json\/wp\/v2\/comments?post=1210"}],"version-history":[{"count":2,"href":"https:\/\/helpwithmygisassignment.com\/blog\/wp-json\/wp\/v2\/posts\/1210\/revisions"}],"predecessor-version":[{"id":1351,"href":"https:\/\/helpwithmygisassignment.com\/blog\/wp-json\/wp\/v2\/posts\/1210\/revisions\/1351"}],"wp:attachment":[{"href":"https:\/\/helpwithmygisassignment.com\/blog\/wp-json\/wp\/v2\/media?parent=1210"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/helpwithmygisassignment.com\/blog\/wp-json\/wp\/v2\/categories?post=1210"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/helpwithmygisassignment.com\/blog\/wp-json\/wp\/v2\/tags?post=1210"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}