From aa2f4a091c380f63ad22391f29845f09b5157023 Mon Sep 17 00:00:00 2001 From: orangemug Date: Fri, 1 Jun 2018 09:22:18 +0100 Subject: [PATCH] Initial attempt at color blindness emulation --- src/components/App.jsx | 18 ++++++++-- src/template.html | 81 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 97 insertions(+), 2 deletions(-) diff --git a/src/components/App.jsx b/src/components/App.jsx index 61b2ea7..780470b 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -1,5 +1,6 @@ import React from 'react' import Mousetrap from 'mousetrap' +import url from 'url' import MapboxGlMap from './map/MapboxGlMap' import OpenLayers3Map from './map/OpenLayers3Map' @@ -71,6 +72,8 @@ export default class App extends React.Component { Debug.set("maputnik", "styleStore", this.styleStore); } + const queryObj = url.parse(window.location.href, true).query; + this.state = { errors: [], infos: [], @@ -80,6 +83,7 @@ export default class App extends React.Component { vectorLayers: {}, inspectModeEnabled: false, spec: styleSpec.latest, + mapFilter: queryObj["color-blindness-emulation"], } this.layerWatcher = new LayerWatcher({ @@ -266,15 +270,25 @@ export default class App extends React.Component { const metadata = this.state.mapStyle.metadata || {} const renderer = metadata['maputnik:renderer'] || 'mbgljs' + let mapElement; + // Check if OL3 code has been loaded? if(renderer === 'ol3') { - return + mapElement = } else { - return } + + const elementStyle = { + "filter": `url('#${this.state.mapFilter}')` + }; + + return
+ {mapElement} +
} onLayerSelect(layerId) { diff --git a/src/template.html b/src/template.html index bfa8284..268f229 100644 --- a/src/template.html +++ b/src/template.html @@ -69,6 +69,87 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Loading...