feat(icons): Switch to CSS only icons

src/actions/network.js

@@ -1,6 +1,7 @@
 // @flow
 import fetch, {fetchMultiple} from '@conveyal/woonerf/fetch'
 
+import {retrieveConfig, storeConfig} from '../config'
 import {ACCESSIBILITY_IS_LOADING, ACCESSIBILITY_IS_EMPTY} from '../constants'
 import coordinateToPoint from '../utils/coordinate-to-point'
 import {parsePathsData, warnForInvalidPaths} from '../utils/parse-paths-data'
@@ -45,18 +46,29 @@ export const setNetworksToEmpty = () =>
  * loading. Second, load the grids. Third, gecode the starting parameters
  */
 export function initialize (startCoordinate?: LonLat) {
+  try {
+    const json = retrieveConfig()
+    if (!json || !json.networks) {
+      console.error('Invalid JSON config! A networks array is required.')
+    } else {
+      return loadDataset(json.networks, json.grids, json.pointsOfInterestUrl, startCoordinate || json.startCoordinate)
+    }
+  } catch (e) {
+    console.log('Error parsing taui-config', e)
+  }
+
   return fetch({
     url: 'config.json',
-    next (response) {
-      const config = response.value
-      return loadDatasetFromJSON({...config, startCoordinate})
+    next: (response) => {
+      const c = response.value
+      storeConfig(c)
+      return loadDatasetFromJSON(c.networks, c.grids, c.pointsOfInterestUrl, startCoordinate || c.startCoordinate)
     }
   })
 }
 
 export function loadDatasetFromJSON (jsonConfig: any) {
-  if (!jsonConfig.networks) window.alert('Invalid JSON config! A networks array is required.')
-  if (window.localStorage) window.localStorage.setItem('taui-config', JSON.stringify(jsonConfig, null, '  '))
+  storeConfig(jsonConfig)
   return loadDataset(jsonConfig.networks, jsonConfig.grids, jsonConfig.pointsOfInterestUrl, jsonConfig.startCoordinate)
 }
 

src/components/application.js

@@ -99,13 +99,6 @@ export default class Application extends Component {
       })
     }
 
-    try {
-      const json = JSON.parse(window.localStorage.getItem('taui-config'))
-      return this.props.loadDatasetFromJSON({...json, startCoordinate})
-    } catch (e) {
-      console.log('Error parsing taui-config', e)
-    }
-
     this.props.initialize(startCoordinate)
   }
 
@@ -243,13 +236,6 @@ export default class Application extends Component {
                 {network.name}
               </RouteCard>
             ))}
-            {ui.allowChangeConfig &&
-              <div className='Card'>
-                <a className='CardTitle' tabIndex={0} onClick={this._changeConfig}>config <span className='pull-right'>change</span></a>
-                <div className='CardContent'>
-                  <pre>{window.localStorage.getItem('taui-config')}</pre>
-                </div>
-              </div>}
             {ui.showLog &&
               actionLog &&
               actionLog.length > 0 &&
@@ -265,6 +251,13 @@ export default class Application extends Component {
                   site made by <a href='https://www.conveyal.com' target='_blank'>conveyal</a>
                 </div>
               </div>}
+            {ui.allowChangeConfig &&
+              <div className='Card'>
+                <a className='CardTitle' tabIndex={0} onClick={this._changeConfig}>config <span className='pull-right'>change</span></a>
+                <div className='CardContent'>
+                  <pre>{window.localStorage.getItem('taui-config')}</pre>
+                </div>
+              </div>}
           </div>
         </div>
       </div>

src/components/map.js

@@ -14,7 +14,6 @@ import {
   ZoomControl
 } from 'react-leaflet'
 
-import leafletIcon from '../utils/leaflet-icons'
 import TransitiveLayer from './transitive-map-layer'
 
 import type {
@@ -36,14 +35,16 @@ if (Leaflet.Browser.retina) {
   TILE_LAYER_PROPS.zoomOffset = -1
 }
 
-const startIcon = leafletIcon({
-  icon: 'play',
-  markerColor: 'darkblue'
+const startIcon = Leaflet.divIcon({
+  iconSize: [20, 26],
+  className: 'LeafletIcon Start',
+  html: '<div className="innerMarker"></div>'
 })
 
-const endIcon = leafletIcon({
-  icon: 'stop',
-  markerColor: 'orange'
+const endIcon = Leaflet.divIcon({
+  iconSize: [20, 26],
+  className: 'LeafletIcon End',
+  html: '<div className="innerMarker"></div>'
 })
 
 type Props = {

src/config.js

@@ -0,0 +1,6 @@
+// @flow
+
+const KEY = 'taui-config'
+
+export const retrieveConfig = () => JSON.parse(window.localStorage.getItem(KEY))
+export const storeConfig = (json) => window.localStorage.setItem(KEY, JSON.stringify(json, null, '  '))

src/index.css

@@ -135,6 +135,7 @@ body {
 
 .Card pre {
   overflow-x: scroll;
+  font-size: 0.8rem;
 }
 
 .Card-alternate .CardTitle {
@@ -295,3 +296,59 @@ body {
   left: 414px;
   overflow: hidden;
 }
+
+/* Leaflet Markers */
+.LeafletIcon {
+  position: relative;
+  display: block;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.5));
+}
+
+.LeafletIcon:before {
+  content: "";
+  width: 0;
+  height: 0;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  position: absolute;
+  bottom: -10px;
+  left: 50%;
+  margin-left: -10px;
+}
+
+.LeafletIcon.Start {
+  background-color: #0b2b40;
+}
+
+.LeafletIcon.Start:before {
+  border-top: 20px solid #0b2b40;
+}
+
+.LeafletIcon.Start:after {
+  content: '';
+  position: absolute;
+  top: 7px;
+  left: 7px;
+  border-left: solid 8px #fff;
+  border-bottom: solid 6px transparent;
+  border-top: solid 6px transparent;
+}
+
+.LeafletIcon.End {
+  background-color: orange;
+}
+
+.LeafletIcon.End:before {
+  border-top: 20px solid orange;
+}
+
+.LeafletIcon.End:after {
+  content: '';
+  position: absolute;
+  top: 7px;
+  left: 5px;
+  border: solid 5px #fff;
+}