schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-30 23:40:33 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge remote-tracking branch 'upstream/master' into feature/accessibility-list-reorder

Browse source 
Conflicts:
	src/components/App.jsx
This commit is contained in:
orangemug 2018-06-03 09:22:02 +01:00
commit b116eef147
6 changed files with 125 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/components/App.jsx
View file

@ -3,6 +3,7 @@ import Mousetrap from 'mousetrap'
import cloneDeep from 'lodash.clonedeep' import cloneDeep from 'lodash.clonedeep'
import clamp from 'lodash.clamp' import clamp from 'lodash.clamp'
import {arrayMove} from 'react-sortable-hoc'; import {arrayMove} from 'react-sortable-hoc';
import url from 'url'
import MapboxGlMap from './map/MapboxGlMap' import MapboxGlMap from './map/MapboxGlMap'
import OpenLayers3Map from './map/OpenLayers3Map' import OpenLayers3Map from './map/OpenLayers3Map'
@ -74,6 +75,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: [],
@ -83,6 +86,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({
@ -321,15 +325,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) {

4
src/components/Toolbar.jsx
View file

@ -135,9 +135,13 @@ export default class Toolbar extends React.Component {
/> />
<div className="maputnik-toolbar__inner"> <div className="maputnik-toolbar__inner">
<ToolbarLink <ToolbarLink
tabIndex="2"
href={"https://github.com/maputnik/editor"} href={"https://github.com/maputnik/editor"}
className="maputnik-toolbar-logo" className="maputnik-toolbar-logo"
> >
<a tabIndex="1" className="maputnik-toolbar-skip" href="#skip-menu">
Skip navigation
</a>
<img src={logoImage} alt="Maputnik" /> <img src={logoImage} alt="Maputnik" />
<h1>Maputnik <h1>Maputnik
<span className="maputnik-toolbar-version">v{pkgJson.version}</span> <span className="maputnik-toolbar-version">v{pkgJson.version}</span>

1
src/components/layers/LayerList.jsx
View file

@ -178,6 +178,7 @@ class LayerListContainer extends React.Component {
<div className="maputnik-default-property"> <div className="maputnik-default-property">
<div className="maputnik-multibutton"> <div className="maputnik-multibutton">
<button <button
id="skip-menu"
onClick={this.toggleLayers.bind(this)} onClick={this.toggleLayers.bind(this)}
className="maputnik-button"> className="maputnik-button">
{this.state.areAllGroupsExpanded === true ? "Collapse" : "Expand"} {this.state.areAllGroupsExpanded === true ? "Collapse" : "Expand"}

1
src/styles/_modal.scss
View file

@ -136,6 +136,7 @@
font-size: $font-size-5; font-size: $font-size-5;
color: $color-lowgray; color: $color-lowgray;
background-color: transparent; background-color: transparent;
width: 100%;
@include flex-row; @include flex-row;
} }

22
src/styles/_toolbar.scss
View file

@ -16,6 +16,8 @@
background-color: $color-black; background-color: $color-black;
padding: $margin-2; padding: $margin-2;
height: $toolbar-height; height: $toolbar-height;
position: relative;
overflow: hidden;
h1 { h1 {
display: inline; display: inline;
@ -80,3 +82,23 @@
flex: 1; flex: 1;
overflow-y: auto; 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%;
}
}

81
src/template.html
View file

@ -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>