mirror of
https://github.com/a-nyx/maputnik-with-pmtiles.git
synced 2024-12-30 23:40:33 +01:00
Merge pull request #312 from orangemug/feature/color-filters
Color blindness emulation
This commit is contained in:
Orange Mug
GitHub
commit
fd48d82e42
2 changed files with 97 additions and 2 deletions
|
|
@ -1,5 +1,6 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import Mousetrap from 'mousetrap'
|
import Mousetrap from 'mousetrap'
|
||||||
|
import url from 'url'
|
||||||
|
|
||||||
import MapboxGlMap from './map/MapboxGlMap'
|
import MapboxGlMap from './map/MapboxGlMap'
|
||||||
import OpenLayers3Map from './map/OpenLayers3Map'
|
import OpenLayers3Map from './map/OpenLayers3Map'
|
||||||
|
|
@ -71,6 +72,8 @@ export default class App extends React.Component {
|
||||||
Debug.set("maputnik", "styleStore", this.styleStore);
|
Debug.set("maputnik", "styleStore", this.styleStore);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const queryObj = url.parse(window.location.href, true).query;
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
errors: [],
|
errors: [],
|
||||||
infos: [],
|
infos: [],
|
||||||
|
|
@ -80,6 +83,7 @@ export default class App extends React.Component {
|
||||||
vectorLayers: {},
|
vectorLayers: {},
|
||||||
inspectModeEnabled: false,
|
inspectModeEnabled: false,
|
||||||
spec: styleSpec.latest,
|
spec: styleSpec.latest,
|
||||||
|
mapFilter: queryObj["color-blindness-emulation"],
|
||||||
}
|
}
|
||||||
|
|
||||||
this.layerWatcher = new LayerWatcher({
|
this.layerWatcher = new LayerWatcher({
|
||||||
|
|
@ -266,15 +270,25 @@ export default class App extends React.Component {
|
||||||
const metadata = this.state.mapStyle.metadata || {}
|
const metadata = this.state.mapStyle.metadata || {}
|
||||||
const renderer = metadata['maputnik:renderer'] || 'mbgljs'
|
const renderer = metadata['maputnik:renderer'] || 'mbgljs'
|
||||||
|
|
||||||
|
let mapElement;
|
||||||
|
|
||||||
// Check if OL3 code has been loaded?
|
// Check if OL3 code has been loaded?
|
||||||
if(renderer === 'ol3') {
|
if(renderer === 'ol3') {
|
||||||
return <OpenLayers3Map {...mapProps} />
|
mapElement = <OpenLayers3Map {...mapProps} />
|
||||||
} else {
|
} else {
|
||||||
return <MapboxGlMap {...mapProps}
|
mapElement = <MapboxGlMap {...mapProps}
|
||||||
inspectModeEnabled={this.state.inspectModeEnabled}
|
inspectModeEnabled={this.state.inspectModeEnabled}
|
||||||
highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]}
|
highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]}
|
||||||
onLayerSelect={this.onLayerSelect.bind(this)} />
|
onLayerSelect={this.onLayerSelect.bind(this)} />
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const elementStyle = {
|
||||||
|
"filter": `url('#${this.state.mapFilter}')`
|
||||||
|
};
|
||||||
|
|
||||||
|
return <div style={elementStyle}>
|
||||||
|
{mapElement}
|
||||||
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
onLayerSelect(layerId) {
|
onLayerSelect(layerId) {
|
||||||
|
|
|
||||||
|
|
@ -69,6 +69,87 @@
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<!-- TODO: Import dynamically -->
|
||||||
|
<!-- From <https://github.com/hail2u/color-blindness-emulation> -->
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
version="1.1">
|
||||||
|
<defs>
|
||||||
|
<filter id="protanopia">
|
||||||
|
<feColorMatrix
|
||||||
|
in="SourceGraphic"
|
||||||
|
type="matrix"
|
||||||
|
values="0.567, 0.433, 0, 0, 0
|
||||||
|
0.558, 0.442, 0, 0, 0
|
||||||
|
0, 0.242, 0.758, 0, 0
|
||||||
|
0, 0, 0, 1, 0"/>
|
||||||
|
</filter>
|
||||||
|
<filter id="protanomaly">
|
||||||
|
<feColorMatrix
|
||||||
|
in="SourceGraphic"
|
||||||
|
type="matrix"
|
||||||
|
values="0.817, 0.183, 0, 0, 0
|
||||||
|
0.333, 0.667, 0, 0, 0
|
||||||
|
0, 0.125, 0.875, 0, 0
|
||||||
|
0, 0, 0, 1, 0"/>
|
||||||
|
</filter>
|
||||||
|
<filter id="deuteranopia">
|
||||||
|
<feColorMatrix
|
||||||
|
in="SourceGraphic"
|
||||||
|
type="matrix"
|
||||||
|
values="0.625, 0.375, 0, 0, 0
|
||||||
|
0.7, 0.3, 0, 0, 0
|
||||||
|
0, 0.3, 0.7, 0, 0
|
||||||
|
0, 0, 0, 1, 0"/>
|
||||||
|
</filter>
|
||||||
|
<filter id="deuteranomaly">
|
||||||
|
<feColorMatrix
|
||||||
|
in="SourceGraphic"
|
||||||
|
type="matrix"
|
||||||
|
values="0.8, 0.2, 0, 0, 0
|
||||||
|
0.258, 0.742, 0, 0, 0
|
||||||
|
0, 0.142, 0.858, 0, 0
|
||||||
|
0, 0, 0, 1, 0"/>
|
||||||
|
</filter>
|
||||||
|
<filter id="tritanopia">
|
||||||
|
<feColorMatrix
|
||||||
|
in="SourceGraphic"
|
||||||
|
type="matrix"
|
||||||
|
values="0.95, 0.05, 0, 0, 0
|
||||||
|
0, 0.433, 0.567, 0, 0
|
||||||
|
0, 0.475, 0.525, 0, 0
|
||||||
|
0, 0, 0, 1, 0"/>
|
||||||
|
</filter>
|
||||||
|
<filter id="tritanomaly">
|
||||||
|
<feColorMatrix
|
||||||
|
in="SourceGraphic"
|
||||||
|
type="matrix"
|
||||||
|
values="0.967, 0.033, 0, 0, 0
|
||||||
|
0, 0.733, 0.267, 0, 0
|
||||||
|
0, 0.183, 0.817, 0, 0
|
||||||
|
0, 0, 0, 1, 0"/>
|
||||||
|
</filter>
|
||||||
|
<filter id="achromatopsia">
|
||||||
|
<feColorMatrix
|
||||||
|
in="SourceGraphic"
|
||||||
|
type="matrix"
|
||||||
|
values="0.299, 0.587, 0.114, 0, 0
|
||||||
|
0.299, 0.587, 0.114, 0, 0
|
||||||
|
0.299, 0.587, 0.114, 0, 0
|
||||||
|
0, 0, 0, 1, 0"/>
|
||||||
|
</filter>
|
||||||
|
<filter id="achromatomaly">
|
||||||
|
<feColorMatrix
|
||||||
|
in="SourceGraphic"
|
||||||
|
type="matrix"
|
||||||
|
values="0.618, 0.320, 0.062, 0, 0
|
||||||
|
0.163, 0.775, 0.062, 0, 0
|
||||||
|
0.163, 0.320, 0.516, 0, 0
|
||||||
|
0, 0, 0, 1, 0"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<div id="loader">Loading...</div>
|
<div id="loader">Loading...</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue