Wisconsin Shoreline Inventory and Oblique Photo Viewer
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Wisconsin Shoreline Inventory and Oblique Viewer

Wisconsin Shoreline Inventory and Oblique Photo Viewer

An interactive map visualization of Wisconsin coastal data. More info...

Front-end Stack:


The Oblique Photo Viewer app is assembled using the collection of tools above. The source files (src/) are compiled, using several tools, into the production version of the application (dist/).

Simple Setup

  1. Clone / Download this repository
  2. Copy the contents of dist/ onto your web server


To get updates from GitHub and automatically push the built version to the web server (requires that git CLI is installed)

Install if you already haven't...

  1. Clone / Download this repository
  2. npm install
  3. gulp build


  1. Make a server_config.json (or copy server_config.example.json and rename) and specify your webserver location

After any changes occur to the GitHub, deploy those changes to the server using:

  1. npm run deploy


First: Install

To make changes, you will need to: fully install all dependencies, alter the source files, and re-compile the application.

  1. Clone the GitHub repository
  2. cd to the repository directory
  3. npm install


  1. Make any changes required to src/
  2. gulp dev-build to compile for testing, gulp build to compile for production

Results will appear in the dist/ folder.

The app doesn't come shipped with a web server, so you'll need to host /dist using your own server or view the files using a browser locally.

config.json Modifications

The configuration file is located in src/js/config.json. It contains select options that can be changed quickly.


wisconsinExtent - the extent the map zooms to on load, and when the user selects "Reset View"

maxExtent - the maximum boundaries of the map

basemaps - contains a list of basemaps to display in the map, in the format of:

    "name": "BASEMAP_NAME",
    "url": "URL_OF_BASEMAP",
    "defaultActive": /* Boolean: Whether the basemap should be active on map load */

layers - contains a list of layer groups and layers to display in the map, in the format of:

    "name": "LAYER_GROUP_NAME",
    "layers": {
        "LAYER_ID": {
            "name": "LAYER_NAME",
            "type": /* "geojson" OR "tileLayer", mapped to Leaflet layer types of same name */,
            "styleID": "STYLE_ID", /* referring to the style specified in /src/js/layers/layerStyles.js */
            "dataLocation": "./data/layers/LAYER.json", /* for geoJson types, refers to location of geoJSON file with layer data */
            "defaultActive": false, /* boolean: active or inactive on map load */
            /* feature properties in the geojson mapped to either a string,
              which will modify the display name of the property in that feature's popup,
              or a boolean value, indicating whether it should be shown or hidden */
            "tableProperties": {
              "propertyNameInGeoJson": "Property Name to Show in Popup"
              "aHiddenProperty": false,
              "Properly Formatted Property Name In GeoJSON": true
        "ANOTHER_LAYER_ID": {
          // ...

countyShorelines - contains a list of county shorelines and their extents, for use in "zoom to shoreline" button


  • Arbitrary storing of URLs for use in app popups, images

Basemap Sources

The application utilizes Mapbox basemaps.

Adding a Layer

  1. Add layer spec to config.json (src/js/config.json), within the map.layers property as documented above
  2. If a geojson layer, add that layer's geojson file to src/js/data/layers/
  3. If you want to style the layer (geojson layers only), add a (Leaflet) style function in src/js/layers/layerStyles.js
  4. If the layer should have different styles for different types of features, make sure to add a case to the getLayerSubStyleName function
  5. To make custom modifications to a layer's popup, modify src/js/components/FeaturePopups/components/PopupTabs
  6. Rebuild the application

Adding / Modifying / Removing data from downloads

  • Recreating the downloadable .zips / shapefiles requires running a separate gulp task, make-downloads
  1. Change data in src/data
  2. Run gulp make-downloads
  3. Rebuild the application (gulp build or gulp dev-build)

Pull Requests

When making pull requests, please use the gulp task lint to lint your files before submitting.


Only issue a release after running the gulp build task, so that the /dist folder is built using the production configuration