Wisconsin Shoreline Inventory and Oblique Photo Viewer

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

Front-end Stack:

• Framework
  • React
  • Redux
• Map
  • Leaflet
• Design
  • React-Bootstrap
  • Sass
  • Font Awesome
• Workflow
  • Webpack
  • Gulp
  • Babel
• Other Libraries
  • axios

Overview

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

Deploying

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

Also:

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

Modifications

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

If you plan to rebuild .zip files, you'll need to install gdal:

1. Download
2. Make sure that GDAL is added to your path. For mac:

echo 'export PATH=/Library/Frameworks/GDAL.framework/Programs:$PATH' >> ~/.bash_profile
source ~/.bash_profile

Changes

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.

CONFIG.map

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:

"BASEMAP_ID": {
    "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:

"LAYER_GROUP_ID": {
    "name": "LAYER_GROUP_NAME",
    "layers": {
        "LAYER_ID": {
            "name": "LAYER_NAME",
            "type": /* "geojson" OR "tileLayer", mapped to Leaflet layer types of same name */,
            "displayType": /* Optional. If this is a point geometry, you can select 'square' or 'triangle' to resymbolize points to those shapes */,
            "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

CONFIG.resources

• 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
   1. If you have to show images in the popup, you'll probably have to modify src/js/util.js in the getPhotoURLs function. Previously, I amended the photo JSON files themselves, but with the 2019 photos, I just added a separate case for building the appropriate original and popup images URLs.
   2. Also, if adding a photos file, modify src/js/components/FeaturePopups/components/PopupFooter.jsx to include a download button for the full size image
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.

Releases

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