mirror of
https://github.com/maputnik/editor.git
synced 2026-01-21 12:50:02 +00:00
Compare commits
29 Commits
v1.7.0-bet
...
v1.7.0-bet
| Author | SHA1 | Date | |
|---|---|---|---|
|
6da83c4670 | ||
|
d26af16003 | ||
|
|
d75b86c927 | ||
|
|
a0cd087ccc | ||
|
|
313b639a5f | ||
|
|
93c45d5340 | ||
|
|
3be6cb5926 | ||
|
|
9d151fdc1f | ||
|
|
44d1a7a6b0 | ||
|
0e5676eae0 | ||
|
|
b8739915b2 | ||
|
|
a1dedd1aa6 | ||
|
|
33b4a40c35 | ||
|
|
a624909819 | ||
|
|
d5d387f349 | ||
|
|
c58ae0f895 | ||
|
|
c9e360d675 | ||
|
|
75ece350bd | ||
|
|
45680151ef | ||
|
|
87bae82b17 | ||
|
|
fcad636f85 | ||
|
|
bac8495b3c | ||
|
|
df98cb9c7b | ||
|
|
34c3015b42 | ||
|
|
ca7bf9f4a7 | ||
|
|
61ba399e1c | ||
|
|
b5c09a4f17 | ||
|
|
6f83839a4c | ||
|
|
74b47e7e74 |
@@ -18,6 +18,7 @@ A free and open visual editor for the [Mapbox GL styles](https://www.mapbox.com/
|
||||
targeted at developers and map designers.
|
||||
|
||||
- :link: Design your maps online at **<https://maputnik.github.io/editor/>** (all in local storage)
|
||||
- :link: Try out the v1.7.0-beta release at: https://maputnik.github.io/releases/v1.7.0-beta/
|
||||
- :link: Use the [Maputnik CLI](https://github.com/maputnik/editor/wiki/Maputnik-CLI) for local style development
|
||||
|
||||
Mapbox has built one of the best and most amazing OSS ecosystems. A key component to ensure its longevity and independence is an OSS map designer.
|
||||
|
||||
95
package-lock.json
generated
95
package-lock.json
generated
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "maputnik",
|
||||
"version": "1.7.0-beta",
|
||||
"version": "1.7.0-beta2",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
@@ -1514,9 +1514,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"@mdi/react": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@mdi/react/-/react-1.3.0.tgz",
|
||||
"integrity": "sha512-RmdB3gsAW4iXOTTHaEaGQ//2w0sxGWiZEoIDteXcf1qTkDkaA+LBu6ub4nNi4VcmSKjcceGHnYHqHENh8fky7A=="
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@mdi/react/-/react-1.4.0.tgz",
|
||||
"integrity": "sha512-OUH9RhfDJPhybQL3owwrSDIXz2yVKXg5lYeOZjyRCiT9wqywNK0FeYyDByOwNIZnnIQoQYmuSrMv+pOX0Uqkmw=="
|
||||
},
|
||||
"@nodelib/fs.scandir": {
|
||||
"version": "2.1.3",
|
||||
@@ -2490,6 +2490,11 @@
|
||||
"is-string": "^1.0.5"
|
||||
}
|
||||
},
|
||||
"array-move": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/array-move/-/array-move-2.2.1.tgz",
|
||||
"integrity": "sha512-qQpEHBnVT6HAFgEVUwRdHVd8TYJThrZIT5wSXpEUTPwBaYhPLclw12mEpyUvRWVdl1VwPOqnIy6LqTFN3cSeUQ=="
|
||||
},
|
||||
"array-union": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
|
||||
@@ -5783,9 +5788,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"fastq": {
|
||||
"version": "1.6.1",
|
||||
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.6.1.tgz",
|
||||
"integrity": "sha512-mpIH5sKYueh3YyeJwqtVo8sORi0CgtmkVbK6kZStpQlZBYQuTzG2CZ7idSiJuA7bY0SFCWUc5WIs+oYumGCQNw==",
|
||||
"version": "1.7.0",
|
||||
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.7.0.tgz",
|
||||
"integrity": "sha512-YOadQRnHd5q6PogvAR/x62BGituF2ufiEA6s8aavQANw5YKHERI4AREboX6KotzP8oX2klxYF2wcV/7bn1clfQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"reusify": "^1.0.4"
|
||||
@@ -6426,9 +6431,9 @@
|
||||
}
|
||||
},
|
||||
"gl-matrix": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.2.1.tgz",
|
||||
"integrity": "sha512-YYVO8jUSf6+SakL4AJmx9Jc7zAZhkJQ+WhdtX3VQe5PJdCOX6/ybY4x1vk+h94ePnjRn6uml68+QxTAJneUpvA=="
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.3.0.tgz",
|
||||
"integrity": "sha512-COb7LDz+SXaHtl/h4LeaFcNdJdAQSDeVqjiIihSXNrkWObZLhDI4hIkZC11Aeqp7bcE72clzB0BnDXr2SmslRA=="
|
||||
},
|
||||
"glob": {
|
||||
"version": "7.1.6",
|
||||
@@ -6535,18 +6540,18 @@
|
||||
}
|
||||
},
|
||||
"gonzales-pe": {
|
||||
"version": "4.2.4",
|
||||
"resolved": "https://registry.npmjs.org/gonzales-pe/-/gonzales-pe-4.2.4.tgz",
|
||||
"integrity": "sha512-v0Ts/8IsSbh9n1OJRnSfa7Nlxi4AkXIsWB6vPept8FDbL4bXn3FNuxjYtO/nmBGu7GDkL9MFeGebeSu6l55EPQ==",
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/gonzales-pe/-/gonzales-pe-4.3.0.tgz",
|
||||
"integrity": "sha512-otgSPpUmdWJ43VXyiNgEYE4luzHCL2pz4wQ0OnDluC6Eg4Ko3Vexy/SrSynglw/eR+OhkzmqFCZa/OFa/RgAOQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"minimist": "1.1.x"
|
||||
"minimist": "^1.2.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"minimist": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.1.3.tgz",
|
||||
"integrity": "sha1-O+39kaktOQFvz6ocaB6Pqhoe/ag=",
|
||||
"version": "1.2.5",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
|
||||
"integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
@@ -8841,9 +8846,9 @@
|
||||
}
|
||||
},
|
||||
"mapbox-gl": {
|
||||
"version": "1.9.0",
|
||||
"resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-1.9.0.tgz",
|
||||
"integrity": "sha512-PKpoiB2pPUMrqFfBJpt/oA8On3zcp0adEoDS2YIC2RA6o4EZ9Sq2NPZocb64y7ra3mLUvEb7ps1pLVlPMh6y7w==",
|
||||
"version": "1.9.1",
|
||||
"resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-1.9.1.tgz",
|
||||
"integrity": "sha512-jpBcqh+4qpOkj8RdxRdvwKPA8gzNYyMQ8HOcXgZYuEM5nKevRDjD3cEs+rUxi1JuYj4t8bIk68Lfh7aQQC1MjQ==",
|
||||
"requires": {
|
||||
"@mapbox/geojson-rewind": "^0.4.0",
|
||||
"@mapbox/geojson-types": "^1.0.2",
|
||||
@@ -9180,9 +9185,9 @@
|
||||
}
|
||||
},
|
||||
"mkdirp": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.3.tgz",
|
||||
"integrity": "sha512-6uCP4Qc0sWsgMLy1EOqqS/3rjDHOEnsStVr/4vtAIK2Y5i2kA7lFFejYrpIyiN9w0pYf4ckeCYT9f1r1P9KX5g==",
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
|
||||
"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
|
||||
"dev": true
|
||||
},
|
||||
"mocha": {
|
||||
@@ -9990,9 +9995,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"ol": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ol/-/ol-6.2.1.tgz",
|
||||
"integrity": "sha512-CT2szew/COd7Zf9Bls+pdzewBYZNgyfxFivJ3L4Jv9Th7JdWjcQAT+pqMPH25L9SbVT+T17RCMq2H2m9uBCl1A==",
|
||||
"version": "6.3.1",
|
||||
"resolved": "https://registry.npmjs.org/ol/-/ol-6.3.1.tgz",
|
||||
"integrity": "sha512-cSSYizzUJQ7AhFSrLPAKopjDXPCHtJsXSmjf3xutPG+iyBeD9IOepQGSgpOSZavPI1gsYh9wowiH+NZwVJ/NYQ==",
|
||||
"requires": {
|
||||
"elm-pep": "^1.0.4",
|
||||
"pbf": "3.2.1",
|
||||
@@ -10723,12 +10728,12 @@
|
||||
}
|
||||
},
|
||||
"postcss-sass": {
|
||||
"version": "0.4.2",
|
||||
"resolved": "https://registry.npmjs.org/postcss-sass/-/postcss-sass-0.4.2.tgz",
|
||||
"integrity": "sha512-hcRgnd91OQ6Ot9R90PE/khUDCJHG8Uxxd3F7Y0+9VHjBiJgNv7sK5FxyHMCBtoLmmkzVbSj3M3OlqUfLJpq0CQ==",
|
||||
"version": "0.4.4",
|
||||
"resolved": "https://registry.npmjs.org/postcss-sass/-/postcss-sass-0.4.4.tgz",
|
||||
"integrity": "sha512-BYxnVYx4mQooOhr+zer0qWbSPYnarAy8ZT7hAQtbxtgVf8gy+LSLT/hHGe35h14/pZDTw1DsxdbrwxBN++H+fg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"gonzales-pe": "^4.2.4",
|
||||
"gonzales-pe": "^4.3.0",
|
||||
"postcss": "^7.0.21"
|
||||
}
|
||||
},
|
||||
@@ -13246,12 +13251,12 @@
|
||||
"dev": true
|
||||
},
|
||||
"stylelint": {
|
||||
"version": "13.2.1",
|
||||
"resolved": "https://registry.npmjs.org/stylelint/-/stylelint-13.2.1.tgz",
|
||||
"integrity": "sha512-461ZV4KpUe7pEHHgMOsH4kkjF7qsjkCIMJYOf7QQC4cvgPUJ0z4Nj+ah5fvKl1rzqBqc5EZa6P0nna4CGoJX+A==",
|
||||
"version": "13.3.0",
|
||||
"resolved": "https://registry.npmjs.org/stylelint/-/stylelint-13.3.0.tgz",
|
||||
"integrity": "sha512-ehNzQu9JAbxuiNhUhmoyPgMjIdz7Fg1AxC5urPVhKotto/faF5GxwljSoLvQa6pB6yd+BVuofApWjWT/6/rBMQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"autoprefixer": "^9.7.4",
|
||||
"autoprefixer": "^9.7.5",
|
||||
"balanced-match": "^1.0.0",
|
||||
"chalk": "^3.0.0",
|
||||
"cosmiconfig": "^6.0.0",
|
||||
@@ -13271,7 +13276,7 @@
|
||||
"lodash": "^4.17.15",
|
||||
"log-symbols": "^3.0.0",
|
||||
"mathml-tag-names": "^2.1.3",
|
||||
"meow": "^6.0.1",
|
||||
"meow": "^6.1.0",
|
||||
"micromatch": "^4.0.2",
|
||||
"normalize-selector": "^0.2.0",
|
||||
"postcss": "^7.0.27",
|
||||
@@ -13282,7 +13287,7 @@
|
||||
"postcss-media-query-parser": "^0.2.3",
|
||||
"postcss-reporter": "^6.0.1",
|
||||
"postcss-resolve-nested-selector": "^0.1.1",
|
||||
"postcss-safe-parser": "^4.0.1",
|
||||
"postcss-safe-parser": "^4.0.2",
|
||||
"postcss-sass": "^0.4.2",
|
||||
"postcss-scss": "^2.0.0",
|
||||
"postcss-selector-parser": "^6.0.2",
|
||||
@@ -13318,9 +13323,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"camelcase-keys": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.1.tgz",
|
||||
"integrity": "sha512-BPCNVH56RVIxQQIXskp5tLQXUNGQ6sXr7iCv1FHDt81xBOQ/1r6H8SPxf19InVP6DexWar4s87q9thfuk8X9HA==",
|
||||
"version": "6.2.2",
|
||||
"resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
|
||||
"integrity": "sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"camelcase": "^5.3.1",
|
||||
@@ -14526,9 +14531,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"uuid": {
|
||||
"version": "7.0.2",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.2.tgz",
|
||||
"integrity": "sha512-vy9V/+pKG+5ZTYKf+VcphF5Oc6EFiu3W8Nv3P3zIh0EqVI80ZxOzuPfe9EHjkFNvf8+xuTHVeei4Drydlx4zjw==",
|
||||
"version": "7.0.3",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
|
||||
"integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==",
|
||||
"dev": true
|
||||
},
|
||||
"v8-compile-cache": {
|
||||
@@ -14606,9 +14611,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"vfile-message": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.3.tgz",
|
||||
"integrity": "sha512-qQg/2z8qnnBHL0psXyF72kCjb9YioIynvyltuNKFaUhRtqTIcIMP3xnBaPzirVZNuBrUe1qwFciSx2yApa4byw==",
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
|
||||
"integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/unist": "^2.0.0",
|
||||
|
||||
20
package.json
20
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "maputnik",
|
||||
"version": "1.7.0-beta",
|
||||
"version": "1.7.0-beta2",
|
||||
"description": "A MapboxGL visual style editor",
|
||||
"main": "''",
|
||||
"scripts": {
|
||||
@@ -25,7 +25,8 @@
|
||||
"@babel/runtime": "^7.8.4",
|
||||
"@mapbox/mapbox-gl-rtl-text": "^0.2.3",
|
||||
"@mapbox/mapbox-gl-style-spec": "^13.12.0",
|
||||
"@mdi/react": "^1.3.0",
|
||||
"@mdi/react": "^1.4.0",
|
||||
"array-move": "^2.2.1",
|
||||
"classnames": "^2.2.6",
|
||||
"codemirror": "^5.52.0",
|
||||
"color": "^3.1.2",
|
||||
@@ -40,10 +41,10 @@
|
||||
"lodash.get": "^4.4.2",
|
||||
"lodash.isequal": "^4.5.0",
|
||||
"lodash.throttle": "^4.1.1",
|
||||
"mapbox-gl": "^1.9.0",
|
||||
"mapbox-gl": "^1.9.1",
|
||||
"mapbox-gl-inspect": "^1.3.1",
|
||||
"maputnik-design": "github:maputnik/design#f7a2b4d",
|
||||
"ol": "^6.2.1",
|
||||
"ol": "^6.3.1",
|
||||
"ol-mapbox-style": "^6.0.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.12.0",
|
||||
@@ -102,6 +103,11 @@
|
||||
"experimentalObjectRestSpread": true,
|
||||
"jsx": true
|
||||
}
|
||||
},
|
||||
"settings": {
|
||||
"react": {
|
||||
"version": "detect"
|
||||
}
|
||||
}
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -135,19 +141,19 @@
|
||||
"is-docker": "^2.0.0",
|
||||
"istanbul": "^0.4.5",
|
||||
"istanbul-lib-coverage": "^3.0.0",
|
||||
"mkdirp": "^1.0.3",
|
||||
"mkdirp": "^1.0.4",
|
||||
"mocha": "^7.0.1",
|
||||
"node-sass": "^4.13.1",
|
||||
"react-hot-loader": "^4.12.19",
|
||||
"sass-loader": "^8.0.2",
|
||||
"selenium-standalone": "^6.17.0",
|
||||
"style-loader": "^1.1.3",
|
||||
"stylelint": "^13.2.0",
|
||||
"stylelint": "^13.3.0",
|
||||
"stylelint-config-recommended-scss": "^4.2.0",
|
||||
"stylelint-scss": "^3.14.2",
|
||||
"svg-inline-loader": "^0.8.2",
|
||||
"transform-loader": "^0.2.4",
|
||||
"uuid": "^7.0.2",
|
||||
"uuid": "^7.0.3",
|
||||
"webdriverio": "^6.0.5",
|
||||
"webpack": "^4.41.6",
|
||||
"webpack-bundle-analyzer": "^3.6.0",
|
||||
|
||||
@@ -4,7 +4,7 @@ import cloneDeep from 'lodash.clonedeep'
|
||||
import clamp from 'lodash.clamp'
|
||||
import get from 'lodash.get'
|
||||
import {unset} from 'lodash'
|
||||
import {arrayMove} from 'react-sortable-hoc'
|
||||
import arrayMove from 'array-move'
|
||||
import url from 'url'
|
||||
|
||||
import MapboxGlMap from './map/MapboxGlMap'
|
||||
@@ -36,6 +36,7 @@ import tokens from '../config/tokens.json'
|
||||
import isEqual from 'lodash.isequal'
|
||||
import Debug from '../libs/debug'
|
||||
import queryUtil from '../libs/query-util'
|
||||
import {formatLayerId} from './util/format';
|
||||
|
||||
import MapboxGl from 'mapbox-gl'
|
||||
|
||||
@@ -325,7 +326,42 @@ export default class App extends React.Component {
|
||||
};
|
||||
|
||||
const errors = validate(newStyle, latest) || [];
|
||||
const mappedErrors = errors.map(error => {
|
||||
|
||||
// The validate function doesn't give us errors for duplicate error with
|
||||
// empty string for layer.id, manually deal with that here.
|
||||
const layerErrors = [];
|
||||
if (newStyle && newStyle.layers) {
|
||||
const foundLayers = new Map();
|
||||
newStyle.layers.forEach((layer, index) => {
|
||||
if (layer.id === "" && foundLayers.has(layer.id)) {
|
||||
const message = `Duplicate layer: ${formatLayerId(layer.id)}`;
|
||||
const error = new Error(
|
||||
`layers[${index}]: duplicate layer id [empty_string], previously used`
|
||||
);
|
||||
layerErrors.push(error);
|
||||
}
|
||||
foundLayers.set(layer.id, true);
|
||||
});
|
||||
}
|
||||
|
||||
const mappedErrors = layerErrors.concat(errors).map(error => {
|
||||
const dupMatch = error.message.match(/layers\[(\d+)\]: (duplicate layer id "?(.*)"?, previously used)/);
|
||||
if (dupMatch) {
|
||||
const [matchStr, index, message] = dupMatch;
|
||||
return {
|
||||
message: error.message,
|
||||
parsed: {
|
||||
type: "layer",
|
||||
data: {
|
||||
index: parseInt(index, 10),
|
||||
key: "id",
|
||||
message,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// duplicate layer id
|
||||
const layerMatch = error.message.match(/layers\[(\d+)\]\.(?:(\S+)\.)?(\S+): (.*)/);
|
||||
if (layerMatch) {
|
||||
const [matchStr, index, group, property, message] = layerMatch;
|
||||
@@ -335,7 +371,7 @@ export default class App extends React.Component {
|
||||
parsed: {
|
||||
type: "layer",
|
||||
data: {
|
||||
index,
|
||||
index: parseInt(index, 10),
|
||||
key,
|
||||
message
|
||||
}
|
||||
@@ -347,7 +383,7 @@ export default class App extends React.Component {
|
||||
message: error.message,
|
||||
};
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
let dirtyMapStyle = undefined;
|
||||
if (errors.length > 0) {
|
||||
@@ -437,56 +473,50 @@ export default class App extends React.Component {
|
||||
this.onStyleChanged(changedStyle)
|
||||
}
|
||||
|
||||
onLayerDestroy = (layerId) => {
|
||||
onLayerDestroy = (index) => {
|
||||
let layers = this.state.mapStyle.layers;
|
||||
const remainingLayers = layers.slice(0);
|
||||
const idx = style.indexOfLayer(remainingLayers, layerId)
|
||||
remainingLayers.splice(idx, 1);
|
||||
remainingLayers.splice(index, 1);
|
||||
this.onLayersChange(remainingLayers);
|
||||
}
|
||||
|
||||
onLayerCopy = (layerId) => {
|
||||
onLayerCopy = (index) => {
|
||||
let layers = this.state.mapStyle.layers;
|
||||
const changedLayers = layers.slice(0)
|
||||
const idx = style.indexOfLayer(changedLayers, layerId)
|
||||
|
||||
const clonedLayer = cloneDeep(changedLayers[idx])
|
||||
const clonedLayer = cloneDeep(changedLayers[index])
|
||||
clonedLayer.id = clonedLayer.id + "-copy"
|
||||
changedLayers.splice(idx, 0, clonedLayer)
|
||||
changedLayers.splice(index, 0, clonedLayer)
|
||||
this.onLayersChange(changedLayers)
|
||||
}
|
||||
|
||||
onLayerVisibilityToggle = (layerId) => {
|
||||
onLayerVisibilityToggle = (index) => {
|
||||
let layers = this.state.mapStyle.layers;
|
||||
const changedLayers = layers.slice(0)
|
||||
const idx = style.indexOfLayer(changedLayers, layerId)
|
||||
|
||||
const layer = { ...changedLayers[idx] }
|
||||
const layer = { ...changedLayers[index] }
|
||||
const changedLayout = 'layout' in layer ? {...layer.layout} : {}
|
||||
changedLayout.visibility = changedLayout.visibility === 'none' ? 'visible' : 'none'
|
||||
|
||||
layer.layout = changedLayout
|
||||
changedLayers[idx] = layer
|
||||
changedLayers[index] = layer
|
||||
this.onLayersChange(changedLayers)
|
||||
}
|
||||
|
||||
|
||||
onLayerIdChange = (oldId, newId) => {
|
||||
onLayerIdChange = (index, oldId, newId) => {
|
||||
const changedLayers = this.state.mapStyle.layers.slice(0)
|
||||
const idx = style.indexOfLayer(changedLayers, oldId)
|
||||
|
||||
changedLayers[idx] = {
|
||||
...changedLayers[idx],
|
||||
changedLayers[index] = {
|
||||
...changedLayers[index],
|
||||
id: newId
|
||||
}
|
||||
|
||||
this.onLayersChange(changedLayers)
|
||||
}
|
||||
|
||||
onLayerChanged = (layer) => {
|
||||
onLayerChanged = (index, layer) => {
|
||||
const changedLayers = this.state.mapStyle.layers.slice(0)
|
||||
const idx = style.indexOfLayer(changedLayers, layer.id)
|
||||
changedLayers[idx] = layer
|
||||
changedLayers[index] = layer
|
||||
|
||||
this.onLayersChange(changedLayers)
|
||||
}
|
||||
@@ -645,9 +675,8 @@ export default class App extends React.Component {
|
||||
</div>
|
||||
}
|
||||
|
||||
onLayerSelect = (layerId) => {
|
||||
const idx = style.indexOfLayer(this.state.mapStyle.layers, layerId)
|
||||
this.setState({ selectedLayerIndex: idx })
|
||||
onLayerSelect = (index) => {
|
||||
this.setState({ selectedLayerIndex: index })
|
||||
}
|
||||
|
||||
setModal(modalName, value) {
|
||||
@@ -735,6 +764,7 @@ export default class App extends React.Component {
|
||||
|
||||
const bottomPanel = (this.state.errors.length + this.state.infos.length) > 0 ? <MessagePanel
|
||||
currentLayer={selectedLayer}
|
||||
selectedLayerIndex={this.state.selectedLayerIndex}
|
||||
onLayerSelect={this.onLayerSelect}
|
||||
mapStyle={this.state.mapStyle}
|
||||
errors={this.state.errors}
|
||||
|
||||
@@ -26,9 +26,7 @@ class AppLayout extends React.Component {
|
||||
return <div className="maputnik-layout">
|
||||
{this.props.toolbar}
|
||||
<div className="maputnik-layout-list">
|
||||
<ScrollContainer>
|
||||
{this.props.layerList}
|
||||
</ScrollContainer>
|
||||
{this.props.layerList}
|
||||
</div>
|
||||
<div className="maputnik-layout-drawer">
|
||||
<ScrollContainer>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import {formatLayerId} from './util/format';
|
||||
|
||||
class MessagePanel extends React.Component {
|
||||
static propTypes = {
|
||||
@@ -8,6 +9,7 @@ class MessagePanel extends React.Component {
|
||||
mapStyle: PropTypes.object,
|
||||
onLayerSelect: PropTypes.func,
|
||||
currentLayer: PropTypes.object,
|
||||
selectedLayerIndex: PropTypes.number,
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
@@ -15,6 +17,7 @@ class MessagePanel extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const {selectedLayerIndex} = this.props;
|
||||
const errors = this.props.errors.map((error, idx) => {
|
||||
let content;
|
||||
if (error.parsed && error.parsed.type === "layer") {
|
||||
@@ -23,13 +26,13 @@ class MessagePanel extends React.Component {
|
||||
const layerId = mapStyle.layers[parsed.data.index].id;
|
||||
content = (
|
||||
<>
|
||||
Layer <span>'{layerId}'</span>: {parsed.data.message}
|
||||
{currentLayer.id !== layerId &&
|
||||
Layer <span>{formatLayerId(layerId)}</span>: {parsed.data.message}
|
||||
{selectedLayerIndex !== parsed.data.index &&
|
||||
<>
|
||||
—
|
||||
<button
|
||||
className="maputnik-message-panel__switch-button"
|
||||
onClick={() => this.props.onLayerSelect(layerId)}
|
||||
onClick={() => this.props.onLayerSelect(parsed.data.index)}
|
||||
>
|
||||
switch to layer
|
||||
</button>
|
||||
|
||||
@@ -9,8 +9,8 @@ export default class DocLabel extends React.Component {
|
||||
PropTypes.object,
|
||||
PropTypes.string
|
||||
]).isRequired,
|
||||
fieldSpec: PropTypes.object.isRequired,
|
||||
onToggleDoc: PropTypes.func.isRequired,
|
||||
fieldSpec: PropTypes.object,
|
||||
onToggleDoc: PropTypes.func,
|
||||
}
|
||||
|
||||
constructor (props) {
|
||||
|
||||
@@ -223,7 +223,7 @@ export default class CombiningFilterEditor extends React.Component {
|
||||
const error = errors[`filter[${idx+1}]`];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div key={`block-${idx}`}>
|
||||
<FilterEditorBlock key={idx} onDelete={this.deleteFilterItem.bind(this, idx)}>
|
||||
<SingleFilterEditor
|
||||
properties={this.props.properties}
|
||||
@@ -232,9 +232,9 @@ export default class CombiningFilterEditor extends React.Component {
|
||||
/>
|
||||
</FilterEditorBlock>
|
||||
{error &&
|
||||
<div className="maputnik-inline-error">{error.message}</div>
|
||||
<div key="error" className="maputnik-inline-error">{error.message}</div>
|
||||
}
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
|
||||
|
||||
@@ -31,7 +31,7 @@ class NumberInput extends React.Component {
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(props, state) {
|
||||
if (!state.editing) {
|
||||
if (!state.editing && props.value !== state.value) {
|
||||
return {
|
||||
value: props.value,
|
||||
dirtyValue: props.value,
|
||||
@@ -49,12 +49,17 @@ class NumberInput extends React.Component {
|
||||
if(this.isValid(value) && hasChanged) {
|
||||
this.props.onChange(value)
|
||||
this.setState({
|
||||
dirtyValue: newValue,
|
||||
value: newValue,
|
||||
});
|
||||
}
|
||||
else if (!this.isValid(value) && hasChanged) {
|
||||
this.setState({
|
||||
value: undefined,
|
||||
});
|
||||
}
|
||||
|
||||
this.setState({
|
||||
value: newValue,
|
||||
dirtyValue: newValue === "" ? undefined : newValue,
|
||||
})
|
||||
}
|
||||
|
||||
@@ -87,11 +92,13 @@ class NumberInput extends React.Component {
|
||||
}
|
||||
|
||||
// If set value is invalid fall back to the last valid value from props or at last resort the default value
|
||||
if(!this.isValid(this.state.value)) {
|
||||
if (!this.isValid(this.state.value)) {
|
||||
if(this.isValid(this.props.value)) {
|
||||
this.changeValue(this.props.value)
|
||||
this.setState({dirtyValue: this.props.value});
|
||||
} else {
|
||||
this.changeValue(undefined);
|
||||
this.setState({dirtyValue: undefined});
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -144,8 +151,15 @@ class NumberInput extends React.Component {
|
||||
this.props.min !== undefined && this.props.max !== undefined &&
|
||||
this.props.allowRange
|
||||
) {
|
||||
const dirtyValue = this.state.dirtyValue === undefined ? this.props.default : this.state.dirtyValue
|
||||
const value = this.state.value === undefined ? "" : this.state.value;
|
||||
const value = this.state.editing ? this.state.dirtyValue : this.state.value;
|
||||
const defaultValue = this.props.default === undefined ? "" : this.props.default;
|
||||
let inputValue;
|
||||
if (this.state.editingRange) {
|
||||
inputValue = this.state.value;
|
||||
}
|
||||
else {
|
||||
inputValue = value;
|
||||
}
|
||||
|
||||
return <div className="maputnik-number-container">
|
||||
<input
|
||||
@@ -156,21 +170,25 @@ class NumberInput extends React.Component {
|
||||
min={this.props.min}
|
||||
step="any"
|
||||
spellCheck="false"
|
||||
value={dirtyValue}
|
||||
value={value === undefined ? defaultValue : value}
|
||||
aria-hidden="true"
|
||||
onChange={this.onChangeRange}
|
||||
onKeyDown={() => {
|
||||
this._keyboardEvent = true;
|
||||
}}
|
||||
onPointerDown={() => {
|
||||
this.setState({editing: true});
|
||||
this.setState({editing: true, editingRange: true});
|
||||
}}
|
||||
onPointerUp={() => {
|
||||
// Safari doesn't get onBlur event
|
||||
this.setState({editing: false});
|
||||
this.setState({editing: false, editingRange: false});
|
||||
}}
|
||||
onBlur={() => {
|
||||
this.setState({editing: false});
|
||||
this.setState({
|
||||
editing: false,
|
||||
editingRange: false,
|
||||
dirtyValue: this.state.value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<input
|
||||
@@ -179,25 +197,32 @@ class NumberInput extends React.Component {
|
||||
spellCheck="false"
|
||||
className="maputnik-number"
|
||||
placeholder={this.props.default}
|
||||
value={value}
|
||||
onChange={e => {
|
||||
if (!this.state.editing) {
|
||||
this.changeValue(e.target.value);
|
||||
}
|
||||
value={inputValue === undefined ? "" : inputValue}
|
||||
onFocus={e => {
|
||||
this.setState({editing: true});
|
||||
}}
|
||||
onChange={e => {
|
||||
this.changeValue(e.target.value);
|
||||
}}
|
||||
onBlur={e => {
|
||||
this.setState({editing: false});
|
||||
this.resetValue()
|
||||
}}
|
||||
onBlur={this.resetValue}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
else {
|
||||
const value = this.state.value === undefined ? "" : this.state.value;
|
||||
const value = this.state.editing ? this.state.dirtyValue : this.state.value;
|
||||
|
||||
return <input
|
||||
spellCheck="false"
|
||||
className="maputnik-number"
|
||||
placeholder={this.props.default}
|
||||
value={value}
|
||||
value={value === undefined ? "" : value}
|
||||
onChange={e => this.changeValue(e.target.value)}
|
||||
onFocus={() => {
|
||||
this.setState({editing: true});
|
||||
}}
|
||||
onBlur={this.resetValue}
|
||||
required={this.props.required}
|
||||
/>
|
||||
|
||||
@@ -33,6 +33,7 @@ class StringInput extends React.Component {
|
||||
value: props.value
|
||||
};
|
||||
}
|
||||
return {};
|
||||
}
|
||||
|
||||
render() {
|
||||
@@ -79,6 +80,11 @@ class StringInput extends React.Component {
|
||||
this.props.onChange(this.state.value);
|
||||
}
|
||||
},
|
||||
onKeyDown: (e) => {
|
||||
if (e.keyCode === 13) {
|
||||
this.props.onChange(this.state.value);
|
||||
}
|
||||
},
|
||||
required: this.props.required,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -19,6 +19,7 @@ import {MdMoreVert} from 'react-icons/md'
|
||||
|
||||
import { changeType, changeProperty } from '../../libs/layer'
|
||||
import layout from '../../config/layout.json'
|
||||
import {formatLayerId} from '../util/format';
|
||||
|
||||
|
||||
function getLayoutForType (type) {
|
||||
@@ -108,7 +109,10 @@ export default class LayerEditor extends React.Component {
|
||||
}
|
||||
|
||||
changeProperty(group, property, newValue) {
|
||||
this.props.onLayerChanged(changeProperty(this.props.layer, group, property, newValue))
|
||||
this.props.onLayerChanged(
|
||||
this.props.layerIndex,
|
||||
changeProperty(this.props.layer, group, property, newValue)
|
||||
)
|
||||
}
|
||||
|
||||
onGroupToggle(groupTitle, active) {
|
||||
@@ -152,13 +156,16 @@ export default class LayerEditor extends React.Component {
|
||||
value={this.props.layer.id}
|
||||
wdKey="layer-editor.layer-id"
|
||||
error={errorData.id}
|
||||
onChange={newId => this.props.onLayerIdChange(this.props.layer.id, newId)}
|
||||
onChange={newId => this.props.onLayerIdChange(this.props.layerIndex, this.props.layer.id, newId)}
|
||||
/>
|
||||
<LayerTypeBlock
|
||||
disabled={true}
|
||||
error={errorData.type}
|
||||
value={this.props.layer.type}
|
||||
onChange={newType => this.props.onLayerChanged(changeType(this.props.layer, newType))}
|
||||
onChange={newType => this.props.onLayerChanged(
|
||||
this.props.layerIndex,
|
||||
changeType(this.props.layer, newType)
|
||||
)}
|
||||
/>
|
||||
{this.props.layer.type !== 'background' && <LayerSourceBlock
|
||||
error={errorData.sources}
|
||||
@@ -210,7 +217,12 @@ export default class LayerEditor extends React.Component {
|
||||
/>
|
||||
case 'jsoneditor': return <JSONEditor
|
||||
layer={this.props.layer}
|
||||
onChange={this.props.onLayerChanged}
|
||||
onChange={(layer) => {
|
||||
this.props.onLayerChanged(
|
||||
this.props.layerIndex,
|
||||
layer
|
||||
);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
}
|
||||
@@ -247,15 +259,15 @@ export default class LayerEditor extends React.Component {
|
||||
const items = {
|
||||
delete: {
|
||||
text: "Delete",
|
||||
handler: () => this.props.onLayerDestroy(this.props.layer.id)
|
||||
handler: () => this.props.onLayerDestroy(this.props.layerIndex)
|
||||
},
|
||||
duplicate: {
|
||||
text: "Duplicate",
|
||||
handler: () => this.props.onLayerCopy(this.props.layer.id)
|
||||
handler: () => this.props.onLayerCopy(this.props.layerIndex)
|
||||
},
|
||||
hide: {
|
||||
text: (layout.visibility === "none") ? "Show" : "Hide",
|
||||
handler: () => this.props.onLayerVisibilityToggle(this.props.layer.id)
|
||||
handler: () => this.props.onLayerVisibilityToggle(this.props.layerIndex)
|
||||
},
|
||||
moveLayerUp: {
|
||||
text: "Move layer up",
|
||||
@@ -281,7 +293,7 @@ export default class LayerEditor extends React.Component {
|
||||
<header>
|
||||
<div className="layer-header">
|
||||
<h2 className="layer-header__title">
|
||||
Layer: {this.props.layer.id}
|
||||
Layer: {formatLayerId(this.props.layer.id)}
|
||||
</h2>
|
||||
<div className="layer-header__info">
|
||||
<Wrapper
|
||||
|
||||
@@ -10,11 +10,13 @@ class LayerIdBlock extends React.Component {
|
||||
value: PropTypes.string.isRequired,
|
||||
wdKey: PropTypes.string.isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
error: PropTypes.object,
|
||||
}
|
||||
|
||||
render() {
|
||||
return <InputBlock label={"ID"} fieldSpec={latest.layer.id}
|
||||
data-wd-key={this.props.wdKey}
|
||||
error={this.props.error}
|
||||
>
|
||||
<StringInput
|
||||
value={this.props.value}
|
||||
|
||||
@@ -42,11 +42,16 @@ class LayerListContainer extends React.Component {
|
||||
onLayerSelect: () => {},
|
||||
}
|
||||
|
||||
state = {
|
||||
collapsedGroups: {},
|
||||
areAllGroupsExpanded: false,
|
||||
isOpen: {
|
||||
add: false,
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.selectedItemRef = React.createRef();
|
||||
this.scrollContainerRef = React.createRef();
|
||||
this.state = {
|
||||
collapsedGroups: {},
|
||||
areAllGroupsExpanded: false,
|
||||
isOpen: {
|
||||
add: false,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -161,16 +166,40 @@ class LayerListContainer extends React.Component {
|
||||
return propsChanged;
|
||||
}
|
||||
|
||||
componentDidUpdate (prevProps) {
|
||||
if (prevProps.selectedLayerIndex !== this.props.selectedLayerIndex) {
|
||||
const selectedItemNode = this.selectedItemRef.current;
|
||||
if (selectedItemNode && selectedItemNode.node) {
|
||||
const target = selectedItemNode.node;
|
||||
const options = {
|
||||
root: this.scrollContainerRef.current,
|
||||
threshold: 1.0
|
||||
}
|
||||
const observer = new IntersectionObserver(entries => {
|
||||
observer.unobserve(target);
|
||||
if (entries.length > 0 && entries[0].intersectionRatio < 1) {
|
||||
target.scrollIntoView();
|
||||
}
|
||||
}, options);
|
||||
|
||||
observer.observe(target);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const listItems = []
|
||||
let idx = 0
|
||||
this.groupedLayers().forEach(layers => {
|
||||
const layerIdCount = new Map();
|
||||
|
||||
const layersByGroup = this.groupedLayers();
|
||||
layersByGroup.forEach(layers => {
|
||||
const groupPrefix = layerPrefix(layers[0].id)
|
||||
if(layers.length > 1) {
|
||||
const grp = <LayerListGroup
|
||||
data-wd-key={[groupPrefix, idx].join('-')}
|
||||
key={[groupPrefix, idx].join('-')}
|
||||
key={`group-${groupPrefix}-${idx}`}
|
||||
title={groupPrefix}
|
||||
isActive={!this.isCollapsed(groupPrefix, idx) || idx === this.props.selectedLayerIndex}
|
||||
onActiveToggle={this.toggleLayerGroup.bind(this, groupPrefix, idx)}
|
||||
@@ -189,6 +218,15 @@ class LayerListContainer extends React.Component {
|
||||
);
|
||||
});
|
||||
|
||||
const additionalProps = {};
|
||||
if (idx === this.props.selectedLayerIndex) {
|
||||
additionalProps.ref = this.selectedItemRef;
|
||||
}
|
||||
|
||||
layerIdCount.set(layer.id,
|
||||
layerIdCount.has(layer.id) ? layerIdCount.get(layer.id) + 1 : 0
|
||||
);
|
||||
const key = `${layer.id}-${layerIdCount.get(layer.id)}`;
|
||||
const listItem = <LayerListItem
|
||||
className={classnames({
|
||||
'maputnik-layer-list-item-collapsed': layers.length > 1 && this.isCollapsed(groupPrefix, groupIdx) && idx !== this.props.selectedLayerIndex,
|
||||
@@ -196,8 +234,9 @@ class LayerListContainer extends React.Component {
|
||||
'maputnik-layer-list-item--error': !!layerError
|
||||
})}
|
||||
index={idx}
|
||||
key={layer.id}
|
||||
key={key}
|
||||
layerId={layer.id}
|
||||
layerIndex={idx}
|
||||
layerType={layer.type}
|
||||
visibility={(layer.layout || {}).visibility}
|
||||
isSelected={idx === this.props.selectedLayerIndex}
|
||||
@@ -205,13 +244,14 @@ class LayerListContainer extends React.Component {
|
||||
onLayerDestroy={this.props.onLayerDestroy.bind(this)}
|
||||
onLayerCopy={this.props.onLayerCopy.bind(this)}
|
||||
onLayerVisibilityToggle={this.props.onLayerVisibilityToggle.bind(this)}
|
||||
{...additionalProps}
|
||||
/>
|
||||
listItems.push(listItem)
|
||||
idx += 1
|
||||
})
|
||||
})
|
||||
|
||||
return <div className="maputnik-layer-list">
|
||||
return <div className="maputnik-layer-list" ref={this.scrollContainerRef}>
|
||||
<AddModal
|
||||
layers={this.props.layers}
|
||||
sources={this.props.sources}
|
||||
|
||||
@@ -62,6 +62,7 @@ class IconAction extends React.Component {
|
||||
|
||||
class LayerListItem extends React.Component {
|
||||
static propTypes = {
|
||||
layerIndex: PropTypes.number.isRequired,
|
||||
layerId: PropTypes.string.isRequired,
|
||||
layerType: PropTypes.string.isRequired,
|
||||
isSelected: PropTypes.bool,
|
||||
@@ -97,7 +98,7 @@ class LayerListItem extends React.Component {
|
||||
|
||||
return <li
|
||||
key={this.props.layerId}
|
||||
onClick={e => this.props.onLayerSelect(this.props.layerId)}
|
||||
onClick={e => this.props.onLayerSelect(this.props.layerIndex)}
|
||||
data-wd-key={"layer-list-item:"+this.props.layerId}
|
||||
className={classnames({
|
||||
"maputnik-layer-list-item": true,
|
||||
@@ -110,20 +111,20 @@ class LayerListItem extends React.Component {
|
||||
wdKey={"layer-list-item:"+this.props.layerId+":delete"}
|
||||
action={'delete'}
|
||||
classBlockName="delete"
|
||||
onClick={e => this.props.onLayerDestroy(this.props.layerId)}
|
||||
onClick={e => this.props.onLayerDestroy(this.props.layerIndex)}
|
||||
/>
|
||||
<IconAction
|
||||
wdKey={"layer-list-item:"+this.props.layerId+":copy"}
|
||||
action={'duplicate'}
|
||||
classBlockName="duplicate"
|
||||
onClick={e => this.props.onLayerCopy(this.props.layerId)}
|
||||
onClick={e => this.props.onLayerCopy(this.props.layerIndex)}
|
||||
/>
|
||||
<IconAction
|
||||
wdKey={"layer-list-item:"+this.props.layerId+":toggle-visibility"}
|
||||
action={visibilityAction}
|
||||
classBlockName="visibility"
|
||||
classBlockModifier={visibilityAction}
|
||||
onClick={e => this.props.onLayerVisibilityToggle(this.props.layerId)}
|
||||
onClick={e => this.props.onLayerVisibilityToggle(this.props.layerIndex)}
|
||||
/>
|
||||
</li>
|
||||
}
|
||||
|
||||
@@ -58,23 +58,8 @@ class FeatureLayerPopup extends React.Component {
|
||||
|
||||
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: zoom
|
||||
}, feature);
|
||||
return val.toString();
|
||||
}
|
||||
else {
|
||||
return color;
|
||||
}
|
||||
return String(color);
|
||||
}
|
||||
else {
|
||||
// Default color
|
||||
@@ -84,7 +69,7 @@ class FeatureLayerPopup extends React.Component {
|
||||
// This is quite complex, just incase there's an edgecase we're missing
|
||||
// always return black if we get an unexpected error.
|
||||
catch (err) {
|
||||
console.error("Unable to get feature color, error:", err);
|
||||
console.warn("Unable to get feature color, error:", err);
|
||||
return "black";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -170,7 +170,7 @@ export default class MapboxGlMap extends React.Component {
|
||||
if(this.props.inspectModeEnabled) {
|
||||
return renderPopup(<FeaturePropertyPopup features={features} />, tmpNode);
|
||||
} else {
|
||||
return renderPopup(<FeatureLayerPopup features={features} onLayerSelect={this.props.onLayerSelect} zoom={this.state.zoom} />, tmpNode);
|
||||
return renderPopup(<FeatureLayerPopup features={features} onLayerSelect={this.onLayerSelectById} zoom={this.state.zoom} />, tmpNode);
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -208,6 +208,11 @@ export default class MapboxGlMap extends React.Component {
|
||||
map.on("zoomend", mapViewChange);
|
||||
}
|
||||
|
||||
onLayerSelectById = (id) => {
|
||||
const index = this.props.mapStyle.layers.findIndex(layer => layer.id === id);
|
||||
this.props.onLayerSelect(index);
|
||||
}
|
||||
|
||||
render() {
|
||||
if(IS_SUPPORTED) {
|
||||
return <div
|
||||
|
||||
3
src/components/util/format.js
Normal file
3
src/components/util/format.js
Normal file
@@ -0,0 +1,3 @@
|
||||
export function formatLayerId (id) {
|
||||
return id === "" ? "[empty_string]" : `'${id}'`;
|
||||
}
|
||||
@@ -1,5 +1,8 @@
|
||||
// LAYER LIST
|
||||
.maputnik-layer-list {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
&-header {
|
||||
padding: $margin-2 $margin-2 $margin-3;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user