mirror of
https://github.com/a-nyx/maputnik-with-pmtiles.git
synced 2025-01-16 06:14:19 +01:00
Merge pull request #315 from orangemug/feature/option-to-display-tile-boundaries
Added option to display tile boundaries
This commit is contained in:
commit
7a7f2eb7de
3 changed files with 37 additions and 5 deletions
|
@ -31,6 +31,7 @@ import LayerWatcher from '../libs/layerwatcher'
|
||||||
import tokens from '../config/tokens.json'
|
import tokens from '../config/tokens.json'
|
||||||
import isEqual from 'lodash.isequal'
|
import isEqual from 'lodash.isequal'
|
||||||
import Debug from '../libs/debug'
|
import Debug from '../libs/debug'
|
||||||
|
import queryUtil from '../libs/query-util'
|
||||||
|
|
||||||
import MapboxGl from 'mapbox-gl'
|
import MapboxGl from 'mapbox-gl'
|
||||||
import mapboxUtil from 'mapbox-gl/src/util/mapbox'
|
import mapboxUtil from 'mapbox-gl/src/util/mapbox'
|
||||||
|
@ -172,6 +173,9 @@ export default class App extends React.Component {
|
||||||
shortcuts: false,
|
shortcuts: false,
|
||||||
export: false,
|
export: false,
|
||||||
},
|
},
|
||||||
|
mapOptions: {
|
||||||
|
showTileBoundaries: queryUtil.asBool(queryObj, "show-tile-boundaries")
|
||||||
|
},
|
||||||
mapFilter: queryObj["color-blindness-emulation"],
|
mapFilter: queryObj["color-blindness-emulation"],
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -402,6 +406,7 @@ export default class App extends React.Component {
|
||||||
mapRenderer() {
|
mapRenderer() {
|
||||||
const mapProps = {
|
const mapProps = {
|
||||||
mapStyle: style.replaceAccessToken(this.state.mapStyle, {allowFallback: true}),
|
mapStyle: style.replaceAccessToken(this.state.mapStyle, {allowFallback: true}),
|
||||||
|
options: this.state.mapOptions,
|
||||||
onDataChange: (e) => {
|
onDataChange: (e) => {
|
||||||
this.layerWatcher.analyzeMap(e.map)
|
this.layerWatcher.analyzeMap(e.map)
|
||||||
this.fetchSources();
|
this.fetchSources();
|
||||||
|
@ -502,13 +507,13 @@ export default class App extends React.Component {
|
||||||
/>
|
/>
|
||||||
<SettingsModal
|
<SettingsModal
|
||||||
mapStyle={this.state.mapStyle}
|
mapStyle={this.state.mapStyle}
|
||||||
onStyleChanged={this.onStyleChanged}
|
onStyleChanged={this.onStyleChanged.bind(this)}
|
||||||
isOpen={this.state.isOpen.settings}
|
isOpen={this.state.isOpen.settings}
|
||||||
onOpenToggle={this.toggleModal.bind(this, 'settings')}
|
onOpenToggle={this.toggleModal.bind(this, 'settings')}
|
||||||
/>
|
/>
|
||||||
<ExportModal
|
<ExportModal
|
||||||
mapStyle={this.state.mapStyle}
|
mapStyle={this.state.mapStyle}
|
||||||
onStyleChanged={this.onStyleChanged}
|
onStyleChanged={this.onStyleChanged.bind(this)}
|
||||||
isOpen={this.state.isOpen.export}
|
isOpen={this.state.isOpen.export}
|
||||||
onOpenToggle={this.toggleModal.bind(this, 'export')}
|
onOpenToggle={this.toggleModal.bind(this, 'export')}
|
||||||
/>
|
/>
|
||||||
|
@ -519,7 +524,7 @@ export default class App extends React.Component {
|
||||||
/>
|
/>
|
||||||
<SourcesModal
|
<SourcesModal
|
||||||
mapStyle={this.state.mapStyle}
|
mapStyle={this.state.mapStyle}
|
||||||
onStyleChanged={this.onStyleChanged}
|
onStyleChanged={this.onStyleChanged.bind(this)}
|
||||||
isOpen={this.state.isOpen.sources}
|
isOpen={this.state.isOpen.sources}
|
||||||
onOpenToggle={this.toggleModal.bind(this, 'sources')}
|
onOpenToggle={this.toggleModal.bind(this, 'sources')}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -58,6 +58,7 @@ export default class MapboxGlMap extends React.Component {
|
||||||
mapStyle: PropTypes.object.isRequired,
|
mapStyle: PropTypes.object.isRequired,
|
||||||
inspectModeEnabled: PropTypes.bool.isRequired,
|
inspectModeEnabled: PropTypes.bool.isRequired,
|
||||||
highlightedLayer: PropTypes.object,
|
highlightedLayer: PropTypes.object,
|
||||||
|
options: PropTypes.object,
|
||||||
}
|
}
|
||||||
|
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
|
@ -92,20 +93,29 @@ export default class MapboxGlMap extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidUpdate(prevProps) {
|
componentDidUpdate(prevProps) {
|
||||||
|
const map = this.state.map;
|
||||||
|
|
||||||
if(this.props.inspectModeEnabled !== prevProps.inspectModeEnabled) {
|
if(this.props.inspectModeEnabled !== prevProps.inspectModeEnabled) {
|
||||||
this.state.inspect.toggleInspector()
|
this.state.inspect.toggleInspector()
|
||||||
}
|
}
|
||||||
if(this.props.inspectModeEnabled) {
|
if(this.props.inspectModeEnabled) {
|
||||||
this.state.inspect.render()
|
this.state.inspect.render()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
map.showTileBoundaries = this.props.options.showTileBoundaries;
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
const map = new MapboxGl.Map({
|
const mapOpts = {
|
||||||
|
...this.props.options,
|
||||||
container: this.container,
|
container: this.container,
|
||||||
style: this.props.mapStyle,
|
style: this.props.mapStyle,
|
||||||
hash: true,
|
hash: true,
|
||||||
})
|
}
|
||||||
|
|
||||||
|
const map = new MapboxGl.Map(mapOpts);
|
||||||
|
|
||||||
|
map.showTileBoundaries = mapOpts.showTileBoundaries;
|
||||||
|
|
||||||
const zoom = new ZoomControl;
|
const zoom = new ZoomControl;
|
||||||
map.addControl(zoom, 'top-right');
|
map.addControl(zoom, 'top-right');
|
||||||
|
|
17
src/libs/query-util.js
Normal file
17
src/libs/query-util.js
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
function asBool(queryObj, key) {
|
||||||
|
if(queryObj.hasOwnProperty(key)) {
|
||||||
|
if(queryObj[key].match(/^false|0$/)) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
asBool
|
||||||
|
}
|
Loading…
Reference in a new issue