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

Added color swatch to <FeatureLayerPopup/>

Browse source
This commit is contained in:
orangemug 2018-10-27 14:04:13 +01:00
parent 3d2a1d5d19
commit cf391031f0
2 changed files with 78 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
src/components/map/FeatureLayerPopup.jsx
View file

@ -1,6 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
import LayerIcon from '../icons/LayerIcon'
import {latest, expression, function as styleFunction} from '@mapbox/mapbox-gl-style-spec'
function groupFeaturesBySourceLayer(features) {
const sources = {}
@ -36,21 +37,72 @@ class FeatureLayerPopup extends React.Component {
const items = Object.keys(sources).map(vectorLayerId => {
const layers = sources[vectorLayerId].map((feature, idx) => {
return <label
key={idx}
className="maputnik-popup-layer"
onClick={() => {
this.props.onLayerSelect(feature.layer.id)
}}
const paintProps = feature.layer.paint;
let propName;
if(paintProps.hasOwnProperty("text-color") && paintProps["text-color"]) {
propName = "text-color";
}
else if (paintProps.hasOwnProperty("fill-color") && paintProps["fill-color"]) {
propName = "fill-color";
}
else if (paintProps.hasOwnProperty("line-color") && paintProps["line-color"]) {
propName = "line-color";
}
else if (paintProps.hasOwnProperty("fill-extrusion-color") && paintProps["fill-extrusion-color"]) {
propName = "fill-extrusion-color";
}
let swatchColor;
if(propName) {
const propertySpec = latest["paint_"+feature.layer.type][propName];
let color = feature.layer.paint[propName];
if(typeof(color) === "object") {
if(color.stops) {
color = styleFunction.convertFunction(color, propertySpec);
}
const exprResult = expression.createExpression(color, propertySpec);
const val = exprResult.value.evaluate({
zoom: this.props.zoom
}, feature);
swatchColor = val.toString();
}
else {
swatchColor = color;
}
}
else {
// Default color
swatchColor = "black";
}
return <div
key={idx}
className="maputnik-popup-layer"
>
<LayerIcon type={feature.layer.type} style={{
width: 14,
height: 14,
paddingRight: 3
}}/>
{feature.layer.id}
{feature.counter && <span> × {feature.counter}</span>}
</label>
<div
className="maputnik-popup-layer__swatch"
style={{background: swatchColor}}
></div>
<label
className="maputnik-popup-layer__label"
onClick={() => {
this.props.onLayerSelect(feature.layer.id)
}}
>
<LayerIcon type={feature.layer.type} style={{
width: 14,
height: 14,
paddingRight: 3
}}/>
{feature.layer.id}
{feature.counter && <span> × {feature.counter}</span>}
</label>
</div>
})
return <div key={vectorLayerId}>
<div className="maputnik-popup-layer-id">{vectorLayerId}</div>

14
src/components/map/MapboxGlMap.jsx
View file

@ -156,7 +156,7 @@ export default class MapboxGlMap extends React.Component {
return renderPropertyPopup(features)
} else {
var mountNode = document.createElement('div');
ReactDOM.render(<FeatureLayerPopup features={features} onLayerSelect={this.props.onLayerSelect} />, mountNode)
ReactDOM.render(<FeatureLayerPopup features={features} onLayerSelect={this.props.onLayerSelect} zoom={this.state.zoom} />, mountNode)
return mountNode
}
}
@ -164,7 +164,11 @@ export default class MapboxGlMap extends React.Component {
map.addControl(inspect)
map.on("style.load", () => {
this.setState({ map, inspect });
this.setState({
map,
inspect,
zoom: map.getZoom()
});
})
map.on("data", e => {
@ -173,6 +177,12 @@ export default class MapboxGlMap extends React.Component {
map: this.state.map
})
})
map.on("zoom", e => {
this.setState({
zoom: map.getZoom()
});
})
}
render() {