E Projects

E.1 Overview

The course grade will be determined based on three small projects. In each project, the students will develop a website based on the course materials:

  • Project 01 (Chapters 1–8)—A web map displaying a GeoJSON layer with symbology, legend, popups and map description (Section E.4.1)
  • Project 02 (Chapters 9–11)—A web map loading data from a CARTO database the student(s) created, with description (Section E.4.2)
  • Project 03 (Chapter 12)—A web map demonstrating client-side geoprocessing, with description (Section E.4.3)

E.2 CARTO Account

Project 02 (Section E.4.2) requires building a web map that connects to the CARTO database platform. The usual trial period of CARTO is for 30 days, however there is a student access option to use CARTO for free for 2 years, To sign in to CARTO as a student, you need to perform the following steps:

  • Step 1: Create a GitHub account. IMPORTANT: use your University e-mail address (...@post.bgu.ac.il) when registering on GitHub
  • Step 2: Apply for the Student Developer Pack, using your GitHub account
  • Step 3: Once you get a confirmation e-mail saying that the Student Developer Pack is approved, sign-up to CARTO here. Your CARTO account should now be activated

Note: If the above process does not work out, for some reason, you will still be able to submit Project 02 (Section E.4.2). You can send your data to the instructor, and it will be uploaded on a CARTO account so that you can use it in the project. In this case the data should be sent in GeoJSON format only, and it should not exceed 20 MB in size (uncompressed).

E.3 Data

All three projects need to display vector layers that you chose and agreed with the instructor.

Each group will choose at least one layer that has the following:

  • Either a points, lines or polygons layer
  • Has at least one text or numeric attribute (property)
  • Approved by instructor before submitting the first exercise

You can use the same data for all projects 1, 2 and 3. In case you want to use different data, the new data need to be approved in advance, too.

All layers combined should not exceed 7 MB in size (uncompressed)! This applies even if some/all layers are loaded from a remote location and not submitted as a file.

Before submitting the first project, the data needs to be approved by the instructor. This can be done by e-mail or in class. It is your responsibility to make sure the data source was approved. Submitted project using unapproved data will not be accepted!

Some ideas for data sources:

E.4 Project requirements

E.4.1 Project 01

  • Content: A web map displaying a GeoJSON layer with symbology, legend, popups and map description.

  • The web map must be to be created with the Leaflet library. You can load any other JavaScript libraries (such as jQuery) as necessary.

  • Submitted files:
    • HTML, CSS and JavaScript code, in an index.html or in combination with .css and .js files
    • .geojson file with the GeoJSON layer(s) loaded on the map

  • Note that the GeoJSON layer loaded on the web map needs to come from a separate valid GeoJSON file provided along with the index.html file. (It should be possible to open the file in a GIS software)

  • Make sure you use a relative file path for loading the GeoJSON file(s), and any other resources. For example, if the file is in the same directory as the index.html then use just the GeoJSON file name. Using an absolute path is incorrect, because the web page will not work on a different computer.

  • The GeoJSON layer needs to have a variable style based on its properties (i.e., symbology).

  • The layer needs to be associated with popups giving a summary of all or some of the properties for each feature.

  • The map must have a legend, in agreement with the symbology:
    • The variable name will appear in the legend title
    • The colors and the corresponding values will appear below
  • The map must have a description text box specifying the following information items:
    • Where did the data come from
    • What can the user see on the map
    • How can the user interact with the map
  • See Grading (Section E.6) for other aspects to be aware of in the submission:
    • Include JavaScript code comments
    • Make sure JavaScript code does not produce any errors
    • Make sure there are no layout issues

E.4.2 Project 02

  • Content: A web map loading data from a CARTO database the student(s) created, with description.

  • The web map needs to be created with the Leaflet library. You can load any other JavaScript libraries (such as jQuery) as necessary.

  • Submitted files:
    • HTML, CSS and JavaScript code, in an index.html or in combination with .css and .js files

  • The CARTO SQL API is used to query GeoJSON from a CARTO database and display it on the map.

  • The query needs to be dynamic, dependent in some way on user interaction with the web page. For example, the query may return a subset of features according to selection using an input element or according to proximity to a clicked location.

  • The map should have a description panel, with the same requirements as in Project 01 (Section E.4.1). Additionally, the description needs to say what kind of subsets the user can select with the input element(s), and how.

E.4.3 Project 03

  • Content: A web map demonstrating client-side geoprocessing, with description.

  • The web map needs to be created with the Leaflet library. The geoprocessing function needs to be applied using the Turf.js library. You can load any other JavaScript libraries (such as jQuery) as necessary.

  • Submitted files:
    • HTML, CSS and JavaScript code, in an index.html or in combination with .css and .js files
    • .geojson file with the GeoJSON layer loaded on the map

  • Note: you need to use a local GeoJSON file (not GeoJSON loaded from CARTO), <7 MB in size, like in Project 01

  • The web page needs to apply a geoprocessing function from Turf.js on a layer loaded from a GeoJSON file, inside a script.

  • The geoprocessing function needs to perform a spatial calculation, giving either a new geometry or a numeric/logical output. For example: buffer turf.buffer, distance turf.distance, area turf.area, centroids turf.centroid, spatial clustering turf.clustersDbscan, union turf.union, difference turf.difference, etc., are all valid choices. Utility functions that do not do any spatial calculation, such as turf.point or turf.clusterEach, are not sufficient for this project.

  • The map needs to display both the input and output of geoprocessing:
    • The layer(s) before the geoprocessing operation was applied
    • The resulting layers after the operation was applied
    • The two layers can be shown one on top of the other, as two separate groups that can be turned on/off, using a button that applies the function and shows the resulting layer while hiding the original one, etc. Use what you think is most suitable for best demonstrating the operation you chose. However, it is important that the user can clearly understant what was the input and what was the output based on the map description.

For example, if the geoprocessing function you chose calculates the area of intersection then you can show the original layers and the intersection product as two semi-transparent separate layers and using a different color. If the function calculates a simplified layer then you can use radio buttons to display either the original or the simplified layer. And so on.

  • The map has a description panel specifying the following aspects:
    • What are the layers being shown (1-2 sentences)
    • Which geoprocessing operation is being applied on the layer
    • How can you tell which is the “before” and “after” layer on the map

E.5 Submission

The projects will be submitted individually or in pairs.

Submission of each project should consist of a single ZIP file (Not RAR!) which includes a single directory. When uncompressed, the directory should include an index.html HTML file as well as any other files which are needed to render the web page, such as CSS, JavaScript and GeoJSON files. The ZIP file name should include the last names of the students who are submitting the project.

The project will be checked by running the python -m http.server local server on the directory, then navigating to http://localhost:8000 in the Chrome browser. It is advised to do the same when checking your website to make sure everything works.

  • Make sure the code does not use any absolute file paths (such as C:\JavaScript\Project1\points.geojson). Using an absolute path will cause errors when running on a different computer!

  • Make sure there is only one HTML file, that it is named index.html, and placed in the root directory

  • If you are using Hebrew or special characters—please make sure this does not cause encoding errors in the above configuration. If you are not sure, you can send the project in advance to verify no encoding errors appear, before submitting it.

E.6 Grading

Projects will be graded based on the fulfillment of the following requirements:

Requirement Grade
The projects must use the dataset agreed on with the instructor in advance. Projects using different data will not be accepted.
Grade for late submissions will be reduced by up to 5% for each day. Re-submission due to using data which was not approved will also be considered as late submission.
The web page displays the required content and has the required interactive behavior, as described above for each project 50%
The web page loads and runs without any JavaScript errors, in exactly the same file and folder configuration as submitted. This applies to any type of causes for an error, such as missing objects, wrong file paths or file names, etc. 30%
Page design is acceptable when viewed on an ordinary desktop screen, for example: there are no text or boxes going out of the browser viewport, etc. 10%
There are comments in the JavaScript code correctly describing what each code section does 10%