GEOG 585
Open Web Mapping

Lesson 7 assignment: Make your own mashup with a vector layer drawn in the browser

Print

In this week's assignment, you'll make a mashup consisting of a vector layer drawn by the browser on top of your own tiled basemap. To achieve this, you need to adapt the walkthrough techniques and code to your own data. Follow the instructions below to prepare this assignment:

  1. Examine your term project's tiled basemap. This could either be the one you created in the Lesson 5 assignment or a tiled map from OpenStreetMap that you want to use.
     
  2. Choose or create a vector dataset to overlay on top. This should result in a KML, GeoJSON, or other (with instructor approval) vector data file suitable for direct use on the web. Shapefiles are not to be used in this assignment.

    You can create KML using Google Earth or Google Maps. You can create GeoJSON using QGIS or GDAL (via ogr2ogr).

    Although you are overlaying this data on your term project basemap, you don't have to commit to using this vector layer in your term project (although it will give you a head start if you do).
     
  3. Use the patterns in this lesson to create a Leaflet map with your tiled layer as a basemap and your vector layer on top. Clicking any vector feature should A) highlight the feature in a different color and B) display some HTML of the feature attributes somewhere in the page, as was accomplished in the Lesson 7 walkthrough. Clicking off the feature should unhighlight it.
     
  4. Host the HTML page and all the other project files online in your AWS S3 bucket so that I can evaluate the functionality. Since the project will just consist of a couple of files, you can directly upload your project folder to S3 by using the Upload option on the S3 bucket web page. Or you can use CLI as in the L5 walkthrough. Hosting the entire web map application in your S3 space is possible because we are just using static files; there is no GeoServer involved this week.
     
  5. Create a text document with the URL to the page and a brief (less than 300 word) write up summarizing how things went for you with preparing the assignment, and what you learned. If you failed to achieve the needed functionality, please explain your best guess as to where the problem lies.
     
  6. Post this document in the Lesson 7 assignment drop box on Canvas.

Above & beyond: Successful delivery of the listed requirements is sufficient to earn 90% on this assignment. The remaining 10% is reserved for efforts that go "above & beyond" these minimum requirements to improve your web map. This could include (but is not limited to): (a) using a combination of style properties not used in the walkthrough (see example and look for other examples on the web) to produce a particularly nice symbology for your layer or an additional thematic layer you add, (b) producing some more advanced HTML output for selected features (e.g., showing an attribute table, including hyperlinks), and / or (c) adding other HTML elements to your page related to your map. Please add a brief description of what you did for "above & beyond" points to your text document.