diff --git a/frontend/app/components/BaseMap.js b/frontend/app/components/BaseMap.js index 9a125cc..6ef5243 100644 --- a/frontend/app/components/BaseMap.js +++ b/frontend/app/components/BaseMap.js @@ -20,6 +20,7 @@ // import React, { Component } from 'react'; +import { GridTypes } from '../constants/Map'; import * as MapStyle from '../constants/MapStyle'; export default class BaseContainer extends Component { @@ -27,6 +28,7 @@ export default class BaseContainer extends Component { * - getStyle(style) -- convert the style template into a native one * - makeGeoline(geoline, style) -- make a geoline object onscreen * - clearHandle(handle) -- remove a marker by handle + * - setVisible(handle, bool) -- change visiblity of a marker */ constructor(props) { @@ -39,6 +41,19 @@ export default class BaseContainer extends Component { keys: [], handles: [] }; + + /* state and handles of grids */ + this.gridMapping = {}; + for (let gridkey in GridTypes) { + let gridtype = GridTypes[gridkey]; + + this.gridMapping[gridtype] = { + handles: null, + data: null, + visible: false + }; + } + } /* creates an array of handles for a geoline and its dashed sections */ @@ -83,7 +98,9 @@ export default class BaseContainer extends Component { } componentWillReceiveProps(newProps) { - /* check if the state has geolines that the map doesn't know */ + /* check if the state has stuff that the map doesn't know */ + + /* new geolines */ newProps.options.geolines.forEach(function(geoline) { /* indexOf compares by reference (===) */ if(this.geolineMapping.keys.indexOf(geoline) < 0) { @@ -107,5 +124,42 @@ export default class BaseContainer extends Component { i--; } } + + /* grid isolines and visibility */ + for (let gridkey in GridTypes) { + let gridtype = GridTypes[gridkey]; + let grid = newProps.options.grid[gridtype]; + + /* create/remove the handle if data changed */ + if(grid.data != this.gridMapping[gridtype].data) { + /* if we have something currently, we need to remove it */ + if(this.gridMapping[gridtype].data != null) { + this.cascade(this.gridMapping[gridtype].handles, this.clearHandle); + this.gridMapping[gridtype].handles = null; + this.gridMapping[gridtype].visible = false; + } + + /* if the new data is real, create isolines */ + if(grid.data != null) { + /* TODO: regular non-isoline grid */ + this.gridMapping[gridtype].handles = this.makeIsolines(grid.data); + } + + this.gridMapping[gridtype].data = grid.data; + } + + /* hide/show */ + if(grid.visible != this.gridMapping[gridtype].visible) { + /* only change visibility if we have anything to show */ + if(this.gridMapping[gridtype].handles) { + this.cascade(this.gridMapping[gridtype].handles, function(handles) { + this.setVisible(handles, grid.visible); + }.bind(this)); + } + + /* update internal state anyway */ + this.gridMapping[gridtype].visible = grid.visible; + } + } } }; diff --git a/frontend/app/components/LeafletMap.js b/frontend/app/components/LeafletMap.js index 3cee880..0dc02c0 100644 --- a/frontend/app/components/LeafletMap.js +++ b/frontend/app/components/LeafletMap.js @@ -183,6 +183,15 @@ export default class LeafletContainer extends BaseContainer { handle.remove(); } + /* change visibility of a marker */ + setVisible(handle, visible) { + if(visible) { + handle.addTo(this.map); + } else { + handle.removeFrom(this.map); + } + } + /* remove given shape from map */ // TODO: death mark /* TODO: is assigning to null necessary? */ diff --git a/frontend/app/reducers/Map.js b/frontend/app/reducers/Map.js index d5ee970..5735b64 100644 --- a/frontend/app/reducers/Map.js +++ b/frontend/app/reducers/Map.js @@ -124,7 +124,8 @@ export default function MapReducer(state = State, action) { ...state.grid, [action.payload.type]: { ...state.grid[action.payload.type], - data: null + data: null, + visible: false } } };