mirror of
https://github.com/a-nyx/maputnik-with-pmtiles.git
synced 2024-12-30 23:40:33 +01:00
Merge remote-tracking branch 'upstream/master' into feature/accessibility-list-reorder
Conflicts: src/components/App.jsx
This commit is contained in:
orangemug
commit
b116eef147
6 changed files with 125 additions and 2 deletions
|
|
@ -3,6 +3,7 @@ import Mousetrap from 'mousetrap'
|
|||
import cloneDeep from 'lodash.clonedeep'
|
||||
import clamp from 'lodash.clamp'
|
||||
import {arrayMove} from 'react-sortable-hoc';
|
||||
import url from 'url'
|
||||
|
||||
import MapboxGlMap from './map/MapboxGlMap'
|
||||
import OpenLayers3Map from './map/OpenLayers3Map'
|
||||
|
|
@ -74,6 +75,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: [],
|
||||
|
|
@ -83,6 +86,7 @@ export default class App extends React.Component {
|
|||
vectorLayers: {},
|
||||
inspectModeEnabled: false,
|
||||
spec: styleSpec.latest,
|
||||
mapFilter: queryObj["color-blindness-emulation"],
|
||||
}
|
||||
|
||||
this.layerWatcher = new LayerWatcher({
|
||||
|
|
@ -321,15 +325,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 <OpenLayers3Map {...mapProps} />
|
||||
mapElement = <OpenLayers3Map {...mapProps} />
|
||||
} else {
|
||||
return <MapboxGlMap {...mapProps}
|
||||
mapElement = <MapboxGlMap {...mapProps}
|
||||
inspectModeEnabled={this.state.inspectModeEnabled}
|
||||
highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]}
|
||||
onLayerSelect={this.onLayerSelect.bind(this)} />
|
||||
}
|
||||
|
||||
const elementStyle = {
|
||||
"filter": `url('#${this.state.mapFilter}')`
|
||||
};
|
||||
|
||||
return <div style={elementStyle}>
|
||||
{mapElement}
|
||||
</div>
|
||||
}
|
||||
|
||||
onLayerSelect(layerId) {
|
||||
|
|
|
|||
|
|
@ -135,9 +135,13 @@ export default class Toolbar extends React.Component {
|
|||
/>
|
||||
<div className="maputnik-toolbar__inner">
|
||||
<ToolbarLink
|
||||
tabIndex="2"
|
||||
href={"https://github.com/maputnik/editor"}
|
||||
className="maputnik-toolbar-logo"
|
||||
>
|
||||
<a tabIndex="1" className="maputnik-toolbar-skip" href="#skip-menu">
|
||||
Skip navigation
|
||||
</a>
|
||||
<img src={logoImage} alt="Maputnik" />
|
||||
<h1>Maputnik
|
||||
<span className="maputnik-toolbar-version">v{pkgJson.version}</span>
|
||||
|
|
|
|||
|
|
@ -178,6 +178,7 @@ class LayerListContainer extends React.Component {
|
|||
<div className="maputnik-default-property">
|
||||
<div className="maputnik-multibutton">
|
||||
<button
|
||||
id="skip-menu"
|
||||
onClick={this.toggleLayers.bind(this)}
|
||||
className="maputnik-button">
|
||||
{this.state.areAllGroupsExpanded === true ? "Collapse" : "Expand"}
|
||||
|
|
|
|||
|
|
@ -136,6 +136,7 @@
|
|||
font-size: $font-size-5;
|
||||
color: $color-lowgray;
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
|
||||
@include flex-row;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@
|
|||
background-color: $color-black;
|
||||
padding: $margin-2;
|
||||
height: $toolbar-height;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
h1 {
|
||||
display: inline;
|
||||
|
|
@ -80,3 +82,23 @@
|
|||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.maputnik-toolbar-skip {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
width: 0px;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
display: block;
|
||||
background-color: $color-black;
|
||||
z-index: 999;
|
||||
line-height: 40px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -69,6 +69,87 @@
|
|||
</style>
|
||||
</head>
|
||||
<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="loader">Loading...</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue