mirror of
https://github.com/a-nyx/maputnik-with-pmtiles.git
synced 2024-12-28 00:55:27 +01:00
Merge remote-tracking branch 'upstream/master' into fix/tooltip-pointer-events
This commit is contained in:
orangemug
commit
9ea5d213f7
41 changed files with 13376 additions and 176 deletions
2
.babelrc
2
.babelrc
|
|
@ -1,4 +1,4 @@
|
|||
{
|
||||
"presets": ["es2015", "react"],
|
||||
"presets": ["env", "react"],
|
||||
"plugins": ["transform-object-rest-spread", "transform-class-properties"]
|
||||
}
|
||||
|
|
|
|||
18
.travis.yml
18
.travis.yml
|
|
@ -3,24 +3,24 @@ addons:
|
|||
firefox: latest
|
||||
matrix:
|
||||
include:
|
||||
- os: linux
|
||||
node_js: "4"
|
||||
- os: linux
|
||||
env: CXX=g++-4.8
|
||||
node_js: "5"
|
||||
- os: linux
|
||||
node_js: "6"
|
||||
- os: linux
|
||||
env: CXX=g++-4.8
|
||||
node_js: "7"
|
||||
- os: osx
|
||||
node_js: "4"
|
||||
- os: osx
|
||||
node_js: "5"
|
||||
- os: linux
|
||||
node_js: "8"
|
||||
- os: linux
|
||||
env: CXX=g++-4.8
|
||||
node_js: "9"
|
||||
- os: osx
|
||||
node_js: "6"
|
||||
- os: osx
|
||||
node_js: "7"
|
||||
- os: osx
|
||||
node_js: "8"
|
||||
- os: osx
|
||||
node_js: "9"
|
||||
before_install:
|
||||
- export CHROME_BIN=chromium-browser
|
||||
- export DISPLAY=:99.0
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
environment:
|
||||
matrix:
|
||||
- nodejs_version: "4"
|
||||
- nodejs_version: "6"
|
||||
- nodejs_version: "7"
|
||||
- nodejs_version: "8"
|
||||
- nodejs_version: "9"
|
||||
platform:
|
||||
- x86
|
||||
- x64
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
var webpack = require("webpack");
|
||||
var WebpackDevServer = require("webpack-dev-server");
|
||||
var webpackConfig = require("./webpack.config");
|
||||
var webpackConfig = require("./webpack.production.config");
|
||||
var testConfig = require("../test/config/specs");
|
||||
|
||||
|
||||
|
|
@ -18,7 +18,7 @@ exports.config = {
|
|||
browserName: 'firefox'
|
||||
}],
|
||||
sync: true,
|
||||
logLevel: 'silent',
|
||||
logLevel: 'verbose',
|
||||
coloredLogs: true,
|
||||
bail: 0,
|
||||
screenshotPath: './errorShots/',
|
||||
|
|
@ -29,6 +29,9 @@ exports.config = {
|
|||
services: ['phantomjs'],
|
||||
framework: 'mocha',
|
||||
reporters: ['spec'],
|
||||
phantomjsOpts: {
|
||||
webdriverLogfile: 'phantomjs.log'
|
||||
},
|
||||
mochaOpts: {
|
||||
ui: 'bdd',
|
||||
// Because we don't know how long the initial build will take...
|
||||
|
|
@ -36,9 +39,7 @@ exports.config = {
|
|||
},
|
||||
onPrepare: function (config, capabilities) {
|
||||
var compiler = webpack(webpackConfig);
|
||||
server = new WebpackDevServer(compiler, {
|
||||
stats: "minimal"
|
||||
});
|
||||
server = new WebpackDevServer(compiler, {});
|
||||
server.listen(testConfig.port);
|
||||
},
|
||||
onComplete: function(exitCode) {
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ module.exports = {
|
|||
filename: 'bundle.js'
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['', '.js', '.jsx']
|
||||
extensions: ['.js', '.jsx']
|
||||
},
|
||||
module: {
|
||||
noParse: [
|
||||
|
|
@ -54,7 +54,7 @@ module.exports = {
|
|||
}
|
||||
},
|
||||
plugins: [
|
||||
new webpack.NoErrorsPlugin(),
|
||||
new webpack.NoEmitOnErrorsPlugin(),
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
new HtmlWebpackPlugin({
|
||||
title: 'Maputnik',
|
||||
|
|
|
|||
|
|
@ -7,23 +7,23 @@ module.exports = [
|
|||
{
|
||||
test: /\.jsx?$/,
|
||||
exclude: /(.*node_modules(?![\/\\]@mapbox[\/\\]mapbox-gl-style-spec)|bower_components|public)/,
|
||||
loader: 'babel',
|
||||
loader: 'babel-loader',
|
||||
query: {
|
||||
presets: ['es2015', 'react'],
|
||||
presets: ['env', 'react'],
|
||||
plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties'],
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.(eot|ttf|woff|woff2)$/,
|
||||
loader: 'file?name=fonts/[name].[ext]'
|
||||
loader: 'file-loader?name=fonts/[name].[ext]'
|
||||
},
|
||||
{
|
||||
test: /\.ico$/,
|
||||
loader: 'file?name=[name].[ext]'
|
||||
loader: 'file-loader?name=[name].[ext]'
|
||||
},
|
||||
{
|
||||
test: /\.(svg|gif|jpg|png)$/,
|
||||
loader: 'file?name=img/[name].[ext]'
|
||||
loader: 'file-loader?name=img/[name].[ext]'
|
||||
},
|
||||
{
|
||||
test: /\.json$/,
|
||||
|
|
@ -36,8 +36,8 @@ module.exports = [
|
|||
{
|
||||
test: /[\/\\](node_modules|global|src)[\/\\].*\.css$/,
|
||||
loaders: [
|
||||
'style?sourceMap',
|
||||
'css'
|
||||
'style-loader?sourceMap',
|
||||
'css-loader'
|
||||
]
|
||||
}
|
||||
];
|
||||
|
|
|
|||
|
|
@ -43,9 +43,13 @@ module.exports = {
|
|||
chunkFilename: '[chunkhash].js'
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['', '.js', '.jsx']
|
||||
extensions: ['.js', '.jsx']
|
||||
},
|
||||
module: {
|
||||
noParse: [
|
||||
/mapbox-gl\/dist\/mapbox-gl.js/,
|
||||
/openlayers\/dist\/ol.js/
|
||||
],
|
||||
loaders
|
||||
},
|
||||
node: {
|
||||
|
|
@ -54,8 +58,8 @@ module.exports = {
|
|||
tls: 'empty'
|
||||
},
|
||||
plugins: [
|
||||
new webpack.NoErrorsPlugin(),
|
||||
new webpack.optimize.CommonsChunkPlugin('vendor', '[chunkhash].vendor.js'),
|
||||
new webpack.NoEmitOnErrorsPlugin(),
|
||||
new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: '[chunkhash].vendor.js' }),
|
||||
new WebpackCleanupPlugin(),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
|
|
@ -68,14 +72,12 @@ module.exports = {
|
|||
screw_ie8: true,
|
||||
}
|
||||
}),
|
||||
new webpack.optimize.OccurenceOrderPlugin(),
|
||||
new ExtractTextPlugin('[contenthash].css', {
|
||||
allChunks: true
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
template: './src/template.html',
|
||||
title: 'Maputnik'
|
||||
}),
|
||||
new webpack.optimize.DedupePlugin()
|
||||
})
|
||||
]
|
||||
};
|
||||
|
|
|
|||
13131
package-lock.json
generated
Normal file
13131
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
118
package.json
118
package.json
|
|
@ -20,41 +20,41 @@
|
|||
"license": "MIT",
|
||||
"homepage": "https://github.com/maputnik/editor#readme",
|
||||
"dependencies": {
|
||||
"@mapbox/mapbox-gl-rtl-text": "^0.1.0",
|
||||
"@mapbox/mapbox-gl-style-spec": "^9.0.1",
|
||||
"@mapbox/mapbox-gl-rtl-text": "^0.1.1",
|
||||
"@mapbox/mapbox-gl-style-spec": "^10.0.1",
|
||||
"classnames": "^2.2.5",
|
||||
"codemirror": "^5.18.2",
|
||||
"color": "^1.0.3",
|
||||
"file-saver": "^1.3.2",
|
||||
"codemirror": "^5.31.0",
|
||||
"color": "^2.0.0",
|
||||
"file-saver": "^1.3.3",
|
||||
"github-api": "^3.0.0",
|
||||
"jsonlint": "josdejong/jsonlint#85a19d7",
|
||||
"jsonlint": "github:josdejong/jsonlint#85a19d7",
|
||||
"lodash.capitalize": "^4.2.1",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"lodash.isequal": "^4.4.0",
|
||||
"lodash.isequal": "^4.5.0",
|
||||
"lodash.throttle": "^4.1.1",
|
||||
"mapbox-gl": "^0.40.1",
|
||||
"mapbox-gl-inspect": "^1.2.3",
|
||||
"mapbox-gl": "^0.41.0",
|
||||
"mapbox-gl-inspect": "^1.2.4",
|
||||
"maputnik-design": "github:maputnik/design",
|
||||
"mousetrap": "^1.6.0",
|
||||
"ol-mapbox-style": "1.0.1",
|
||||
"openlayers": "^3.19.1",
|
||||
"mousetrap": "^1.6.1",
|
||||
"ol-mapbox-style": "^1.0.1",
|
||||
"openlayers": "^4.4.2",
|
||||
"prop-types": "^15.6.0",
|
||||
"react": "^15.4.0",
|
||||
"react-addons-pure-render-mixin": "^15.4.0",
|
||||
"react-autocomplete": "^1.4.0",
|
||||
"react": "16.0.0",
|
||||
"react-addons-pure-render-mixin": "^15.6.2",
|
||||
"react-autocomplete": "^1.7.2",
|
||||
"react-codemirror": "^1.0.0",
|
||||
"react-collapse": "^4.0.3",
|
||||
"react-color": "^2.10.0",
|
||||
"react-color": "^2.13.8",
|
||||
"react-copy-to-clipboard": "^5.0.1",
|
||||
"react-dom": "^15.4.0",
|
||||
"react-file-reader-input": "^1.1.0",
|
||||
"react-dom": "16.0.0",
|
||||
"react-file-reader-input": "^1.1.4",
|
||||
"react-height": "^3.0.0",
|
||||
"react-icon-base": "^2.0.4",
|
||||
"react-icons": "^2.2.1",
|
||||
"react-motion": "^0.4.7",
|
||||
"react-icon-base": "^2.1.1",
|
||||
"react-icons": "^2.2.7",
|
||||
"react-motion": "^0.5.2",
|
||||
"react-sortable-hoc": "^0.6.8",
|
||||
"reconnecting-websocket": "^3.0.3",
|
||||
"request": "^2.79.0",
|
||||
"reconnecting-websocket": "^3.2.2",
|
||||
"request": "^2.83.0",
|
||||
"url": "^0.11.0"
|
||||
},
|
||||
"jshintConfig": {
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
"plugins": [
|
||||
"react"
|
||||
],
|
||||
"extend": [
|
||||
"extends": [
|
||||
"plugin:react/recommended"
|
||||
],
|
||||
"env": {
|
||||
|
|
@ -87,45 +87,45 @@
|
|||
}
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-core": "6.21.0",
|
||||
"babel-eslint": "^7.1.1",
|
||||
"babel-loader": "6.2.10",
|
||||
"babel-plugin-transform-class-properties": "^6.11.5",
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-eslint": "^8.0.2",
|
||||
"babel-loader": "7.1.1",
|
||||
"babel-plugin-transform-class-properties": "^6.24.1",
|
||||
"babel-plugin-transform-decorators-legacy": "^1.3.4",
|
||||
"babel-plugin-transform-flow-strip-types": "^6.21.0",
|
||||
"babel-plugin-transform-object-rest-spread": "^6.8.0",
|
||||
"babel-plugin-transform-runtime": "^6.15.0",
|
||||
"babel-preset-es2015": "6.18.0",
|
||||
"babel-preset-react": "6.16.0",
|
||||
"babel-runtime": "^6.11.6",
|
||||
"babel-plugin-transform-flow-strip-types": "^6.22.0",
|
||||
"babel-plugin-transform-object-rest-spread": "^6.26.0",
|
||||
"babel-plugin-transform-runtime": "^6.23.0",
|
||||
"babel-preset-env": "^1.6.1",
|
||||
"babel-preset-react": "^6.24.1",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"base64-loader": "^1.0.0",
|
||||
"css-loader": "0.26.1",
|
||||
"eslint": "^3.5.0",
|
||||
"eslint-plugin-react": "^6.2.0",
|
||||
"extract-text-webpack-plugin": "^1.0.1",
|
||||
"file-loader": "^0.11.1",
|
||||
"html-webpack-plugin": "^2.22.0",
|
||||
"json-loader": "^0.5.4",
|
||||
"karma": "^1.3.0",
|
||||
"karma-chrome-launcher": "^2.0.0",
|
||||
"karma-firefox-launcher": "^1.0.0",
|
||||
"css-loader": "^0.28.7",
|
||||
"eslint": "^4.10.0",
|
||||
"eslint-plugin-react": "^7.4.0",
|
||||
"extract-text-webpack-plugin": "^3.0.2",
|
||||
"file-loader": "^1.1.5",
|
||||
"html-webpack-plugin": "^2.30.1",
|
||||
"json-loader": "^0.5.7",
|
||||
"karma": "^1.7.1",
|
||||
"karma-chrome-launcher": "^2.2.0",
|
||||
"karma-firefox-launcher": "^1.0.1",
|
||||
"karma-mocha": "^1.3.0",
|
||||
"karma-webpack": "^2.0.1",
|
||||
"mocha": "^3.1.2",
|
||||
"mocha-loader": "^1.0.0",
|
||||
"node-sass": "^4.2.0",
|
||||
"react-hot-loader": "^3.0.0-beta.6",
|
||||
"sass-loader": "^4.0.1",
|
||||
"style-loader": "0.13.1",
|
||||
"stylelint": "^7.7.1",
|
||||
"karma-webpack": "^2.0.5",
|
||||
"mocha": "^4.0.1",
|
||||
"mocha-loader": "^1.1.1",
|
||||
"node-sass": "^4.6.0",
|
||||
"react-hot-loader": "^3.1.1",
|
||||
"sass-loader": "^6.0.6",
|
||||
"style-loader": "^0.19.0",
|
||||
"stylelint": "^7.13.0",
|
||||
"stylelint-config-standard": "^15.0.1",
|
||||
"transform-loader": "^0.2.3",
|
||||
"wdio-mocha-framework": "^0.5.9",
|
||||
"transform-loader": "^0.2.4",
|
||||
"wdio-mocha-framework": "^0.5.11",
|
||||
"wdio-phantomjs-service": "^0.2.2",
|
||||
"wdio-spec-reporter": "^0.1.0",
|
||||
"webdriverio": "^4.6.2",
|
||||
"webpack": "1.14.0",
|
||||
"webpack-cleanup-plugin": "^0.4.1",
|
||||
"webpack-dev-server": "1.16.2"
|
||||
"wdio-spec-reporter": "^0.1.2",
|
||||
"webdriverio": "^4.8.0",
|
||||
"webpack": "^3.8.1",
|
||||
"webpack-cleanup-plugin": "^0.5.1",
|
||||
"webpack-dev-server": "^2.9.4"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import AppLayout from './AppLayout'
|
|||
import MessagePanel from './MessagePanel'
|
||||
|
||||
import { downloadGlyphsMetadata, downloadSpriteMetadata } from '../libs/metadata'
|
||||
import styleSpec from '@mapbox/mapbox-gl-style-spec'
|
||||
import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
|
||||
import style from '../libs/style.js'
|
||||
import { initialStyleUrl, loadStyleUrl } from '../libs/urlopen'
|
||||
import { undoMessages, redoMessages } from '../libs/diffmessage'
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ class Button extends React.Component {
|
|||
onClick: PropTypes.func,
|
||||
style: PropTypes.object,
|
||||
className: PropTypes.string,
|
||||
children: PropTypes.node
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
|
|||
|
|
@ -9,11 +9,11 @@ class MessagePanel extends React.Component {
|
|||
|
||||
render() {
|
||||
const errors = this.props.errors.map((m, i) => {
|
||||
return <p className="maputnik-message-panel-error">{m}</p>
|
||||
return <p key={"error-"+i} className="maputnik-message-panel-error">{m}</p>
|
||||
})
|
||||
|
||||
const infos = this.props.infos.map((m, i) => {
|
||||
return <p key={i}>{m}</p>
|
||||
return <p key={"info-"+i}>{m}</p>
|
||||
})
|
||||
|
||||
return <div className="maputnik-message-panel">
|
||||
|
|
|
|||
|
|
@ -1,9 +1,16 @@
|
|||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
const ScrollContainer = (props) => {
|
||||
return <div className="maputnik-scroll-container">
|
||||
{props.children}
|
||||
</div>
|
||||
class ScrollContainer extends React.Component {
|
||||
static propTypes = {
|
||||
children: PropTypes.node
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div className="maputnik-scroll-container">
|
||||
{this.props.children}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
export default ScrollContainer
|
||||
|
|
|
|||
|
|
@ -25,28 +25,49 @@ import OpenModal from './modals/OpenModal'
|
|||
|
||||
import style from '../libs/style'
|
||||
|
||||
function IconText(props) {
|
||||
return <span className="maputnik-icon-text">{props.children}</span>
|
||||
class IconText extends React.Component {
|
||||
static propTypes = {
|
||||
children: PropTypes.node,
|
||||
}
|
||||
|
||||
render() {
|
||||
return <span className="maputnik-icon-text">{this.props.children}</span>
|
||||
}
|
||||
}
|
||||
|
||||
function ToolbarLink(props) {
|
||||
return <a
|
||||
className={classnames('maputnik-toolbar-link', props.className)}
|
||||
href={props.href}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
{props.children}
|
||||
</a>
|
||||
class ToolbarLink extends React.Component {
|
||||
static propTypes = {
|
||||
className: PropTypes.string,
|
||||
children: PropTypes.node,
|
||||
href: PropTypes.string,
|
||||
}
|
||||
|
||||
render() {
|
||||
return <a
|
||||
className={classnames('maputnik-toolbar-link', this.props.className)}
|
||||
href={this.props.href}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
{this.props.children}
|
||||
</a>
|
||||
}
|
||||
}
|
||||
|
||||
function ToolbarAction(props) {
|
||||
return <a
|
||||
className='maputnik-toolbar-action'
|
||||
onClick={props.onClick}
|
||||
>
|
||||
{props.children}
|
||||
</a>
|
||||
class ToolbarAction extends React.Component {
|
||||
static propTypes = {
|
||||
children: PropTypes.node,
|
||||
onClick: PropTypes.func
|
||||
}
|
||||
|
||||
render() {
|
||||
return <a
|
||||
className='maputnik-toolbar-action'
|
||||
onClick={this.props.onClick}
|
||||
>
|
||||
{this.props.children}
|
||||
</a>
|
||||
}
|
||||
}
|
||||
|
||||
export default class Toolbar extends React.Component {
|
||||
|
|
@ -58,7 +79,8 @@ export default class Toolbar extends React.Component {
|
|||
onStyleOpen: PropTypes.func.isRequired,
|
||||
// A dict of source id's and the available source layers
|
||||
sources: PropTypes.object.isRequired,
|
||||
onInspectModeToggle: PropTypes.func.isRequired
|
||||
onInspectModeToggle: PropTypes.func.isRequired,
|
||||
children: PropTypes.node
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ class ColorField extends React.Component {
|
|||
//but I am too stupid to get it to work together with fixed position
|
||||
//and scrollbars so I have to fallback to JavaScript
|
||||
calcPickerOffset() {
|
||||
const elem = this.refs.colorInput
|
||||
const elem = this.colorInput
|
||||
if(elem) {
|
||||
const pos = elem.getBoundingClientRect()
|
||||
return {
|
||||
|
|
@ -99,7 +99,7 @@ class ColorField extends React.Component {
|
|||
<div className="maputnik-color-swatch" style={swatchStyle}></div>
|
||||
<input
|
||||
className="maputnik-color"
|
||||
ref="colorInput"
|
||||
ref={(input) => this.colorInput = input}
|
||||
onClick={this.togglePicker.bind(this)}
|
||||
style={this.props.style}
|
||||
name={this.props.name}
|
||||
|
|
|
|||
|
|
@ -315,49 +315,63 @@ export default class FunctionSpecProperty extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
function MakeFunctionButtons(props) {
|
||||
let makeZoomButton, makeDataButton
|
||||
if (props.fieldSpec['zoom-function']) {
|
||||
makeZoomButton = <Button
|
||||
className="maputnik-make-zoom-function"
|
||||
onClick={props.onZoomClick}
|
||||
>
|
||||
<DocLabel
|
||||
label={<FunctionIcon />}
|
||||
cursorTargetStyle={{ cursor: 'pointer' }}
|
||||
doc={"Turn property into a zoom function to enable a map feature to change with map's zoom level."}
|
||||
/>
|
||||
</Button>
|
||||
class MakeFunctionButtons extends React.Component {
|
||||
static propTypes = {
|
||||
fieldSpec: PropTypes.object,
|
||||
onZoomClick: PropTypes.func,
|
||||
onDataClick: PropTypes.func,
|
||||
}
|
||||
|
||||
if (props.fieldSpec['property-function'] && ['piecewise-constant', 'interpolated'].indexOf(props.fieldSpec['function']) !== -1) {
|
||||
makeDataButton = <Button
|
||||
className="maputnik-make-data-function"
|
||||
onClick={props.onDataClick}
|
||||
render() {
|
||||
let makeZoomButton, makeDataButton
|
||||
if (this.props.fieldSpec['zoom-function']) {
|
||||
makeZoomButton = <Button
|
||||
className="maputnik-make-zoom-function"
|
||||
onClick={this.props.onZoomClick}
|
||||
>
|
||||
<DocLabel
|
||||
label={<MdInsertChart />}
|
||||
label={<FunctionIcon />}
|
||||
cursorTargetStyle={{ cursor: 'pointer' }}
|
||||
doc={"Turn property into a data function to enable a map feature to change according to data properties and the map's zoom level."}
|
||||
doc={"Turn property into a zoom function to enable a map feature to change with map's zoom level."}
|
||||
/>
|
||||
</Button>
|
||||
|
||||
if (this.props.fieldSpec['property-function'] && ['piecewise-constant', 'interpolated'].indexOf(this.props.fieldSpec['function']) !== -1) {
|
||||
makeDataButton = <Button
|
||||
className="maputnik-make-data-function"
|
||||
onClick={this.props.onDataClick}
|
||||
>
|
||||
<DocLabel
|
||||
label={<MdInsertChart />}
|
||||
cursorTargetStyle={{ cursor: 'pointer' }}
|
||||
doc={"Turn property into a data function to enable a map feature to change according to data properties and the map's zoom level."}
|
||||
/>
|
||||
</Button>
|
||||
}
|
||||
return <div>{makeDataButton}{makeZoomButton}</div>
|
||||
}
|
||||
else {
|
||||
return null
|
||||
}
|
||||
return <div>{makeDataButton}{makeZoomButton}</div>
|
||||
}
|
||||
else {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
function DeleteStopButton(props) {
|
||||
return <Button
|
||||
className="maputnik-delete-stop"
|
||||
onClick={props.onClick}
|
||||
>
|
||||
<DocLabel
|
||||
label={<DeleteIcon />}
|
||||
doc={"Remove zoom level stop."}
|
||||
/>
|
||||
</Button>
|
||||
class DeleteStopButton extends React.Component {
|
||||
static propTypes = {
|
||||
onClick: PropTypes.func,
|
||||
}
|
||||
|
||||
render() {
|
||||
return <Button
|
||||
className="maputnik-delete-stop"
|
||||
onClick={this.props.onClick}
|
||||
>
|
||||
<DocLabel
|
||||
label={<DeleteIcon />}
|
||||
doc={"Remove zoom level stop."}
|
||||
/>
|
||||
</Button>
|
||||
}
|
||||
}
|
||||
|
||||
function labelFromFieldName(fieldName) {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React from 'react'
|
|||
import PropTypes from 'prop-types'
|
||||
import { combiningFilterOps } from '../../libs/filterops.js'
|
||||
|
||||
import styleSpec from '@mapbox/mapbox-gl-style-spec'
|
||||
import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
|
||||
import DocLabel from '../fields/DocLabel'
|
||||
import SelectInput from '../inputs/SelectInput'
|
||||
import SingleFilterEditor from './SingleFilterEditor'
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ class AutocompleteInput extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
const AutocompleteMenu = (items, value, style) => <div className={"maputnik-autocomplete-menu"} children={items} />
|
||||
const AutocompleteMenu = (items, value, style) => <div className={"maputnik-autocomplete-menu"}>{items}</div>
|
||||
|
||||
return <Autocomplete
|
||||
wrapperProps={{
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ class DynamicArrayInput extends React.Component {
|
|||
type: PropTypes.string,
|
||||
default: PropTypes.array,
|
||||
onChange: PropTypes.func,
|
||||
style: PropTypes.object,
|
||||
}
|
||||
|
||||
changeValue(idx, newValue) {
|
||||
|
|
@ -84,10 +85,15 @@ class DynamicArrayInput extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
function DeleteValueButton(props) {
|
||||
class DeleteValueButton extends React.Component {
|
||||
static propTypes = {
|
||||
onClick: PropTypes.func,
|
||||
}
|
||||
|
||||
render() {
|
||||
return <Button
|
||||
className="maputnik-delete-stop"
|
||||
onClick={props.onClick}
|
||||
onClick={this.props.onClick}
|
||||
>
|
||||
<DocLabel
|
||||
label={<DeleteIcon />}
|
||||
|
|
@ -95,5 +101,6 @@ function DeleteValueButton(props) {
|
|||
/>
|
||||
</Button>
|
||||
}
|
||||
}
|
||||
|
||||
export default DynamicArrayInput
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import AutocompleteInput from './AutocompleteInput'
|
|||
class FontInput extends React.Component {
|
||||
static propTypes = {
|
||||
value: PropTypes.array.isRequired,
|
||||
default: PropTypes.array,
|
||||
fonts: PropTypes.array,
|
||||
style: PropTypes.object,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ class InputBlock extends React.Component {
|
|||
action: PropTypes.element,
|
||||
children: PropTypes.element.isRequired,
|
||||
style: PropTypes.object,
|
||||
onChange: PropTypes.func,
|
||||
}
|
||||
|
||||
onChange(e) {
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ class StringInput extends React.Component {
|
|||
style: PropTypes.object,
|
||||
default: PropTypes.string,
|
||||
onChange: PropTypes.func,
|
||||
multi: PropTypes.bool,
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import styleSpec from '@mapbox/mapbox-gl-style-spec'
|
||||
import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
|
||||
import InputBlock from '../inputs/InputBlock'
|
||||
import StringInput from '../inputs/StringInput'
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import styleSpec from '@mapbox/mapbox-gl-style-spec'
|
||||
import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
|
||||
import InputBlock from '../inputs/InputBlock'
|
||||
import StringInput from '../inputs/StringInput'
|
||||
import SelectInput from '../inputs/SelectInput'
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import styleSpec from '@mapbox/mapbox-gl-style-spec'
|
||||
import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
|
||||
import InputBlock from '../inputs/InputBlock'
|
||||
import StringInput from '../inputs/StringInput'
|
||||
import SelectInput from '../inputs/SelectInput'
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import styleSpec from '@mapbox/mapbox-gl-style-spec'
|
||||
import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
|
||||
import InputBlock from '../inputs/InputBlock'
|
||||
import SelectInput from '../inputs/SelectInput'
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import styleSpec from '@mapbox/mapbox-gl-style-spec'
|
||||
import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
|
||||
import InputBlock from '../inputs/InputBlock'
|
||||
import NumberInput from '../inputs/NumberInput'
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import styleSpec from '@mapbox/mapbox-gl-style-spec'
|
||||
import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
|
||||
import InputBlock from '../inputs/InputBlock'
|
||||
import NumberInput from '../inputs/NumberInput'
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import InputBlock from '../inputs/InputBlock'
|
||||
import StringInput from '../inputs/StringInput'
|
||||
import LayerIcon from '../icons/LayerIcon'
|
||||
|
|
@ -14,6 +15,10 @@ function groupFeaturesBySourceLayer(features) {
|
|||
}
|
||||
|
||||
class FeatureLayerPopup extends React.Component {
|
||||
static propTypes = {
|
||||
features: PropTypes.array
|
||||
}
|
||||
|
||||
render() {
|
||||
const sources = groupFeaturesBySourceLayer(this.props.features)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import InputBlock from '../inputs/InputBlock'
|
||||
import StringInput from '../inputs/StringInput'
|
||||
|
||||
|
|
@ -31,6 +32,9 @@ function renderFeature(feature) {
|
|||
}
|
||||
|
||||
class FeaturePropertyPopup extends React.Component {
|
||||
static propTypes = {
|
||||
features: PropTypes.array
|
||||
}
|
||||
|
||||
render() {
|
||||
const features = this.props.features
|
||||
|
|
|
|||
|
|
@ -69,6 +69,7 @@ class OpenLayers3Map extends React.Component {
|
|||
onDataChange: PropTypes.func,
|
||||
mapStyle: PropTypes.object.isRequired,
|
||||
accessToken: PropTypes.string,
|
||||
style: PropTypes.object,
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React from 'react'
|
|||
import PropTypes from 'prop-types'
|
||||
import { saveAs } from 'file-saver'
|
||||
|
||||
import styleSpec from '@mapbox/mapbox-gl-style-spec'
|
||||
import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
|
||||
import InputBlock from '../inputs/InputBlock'
|
||||
import StringInput from '../inputs/StringInput'
|
||||
import SelectInput from '../inputs/SelectInput'
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ class Modal extends React.Component {
|
|||
isOpen: PropTypes.bool.isRequired,
|
||||
title: PropTypes.string.isRequired,
|
||||
onOpenToggle: PropTypes.func.isRequired,
|
||||
children: PropTypes.node,
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ class OpenModal extends React.Component {
|
|||
}
|
||||
|
||||
onOpenUrl() {
|
||||
const url = this.refs.styleUrl.value;
|
||||
const url = this.styleUrlElement.value;
|
||||
this.onStyleSelect(url);
|
||||
}
|
||||
|
||||
|
|
@ -151,7 +151,7 @@ class OpenModal extends React.Component {
|
|||
<p>
|
||||
Load from a URL. Note that the URL must have <a href="https://enable-cors.org" target="_blank" rel="noopener noreferrer">CORS enabled</a>.
|
||||
</p>
|
||||
<input type="text" ref="styleUrl" className="maputnik-input" placeholder="Enter URL..."/>
|
||||
<input type="text" ref={(input) => this.styleUrlElement = input} className="maputnik-input" placeholder="Enter URL..."/>
|
||||
<div>
|
||||
<Button className="maputnik-big-button" onClick={this.onOpenUrl.bind(this)}>Open URL</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import styleSpec from '@mapbox/mapbox-gl-style-spec'
|
||||
import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
|
||||
import InputBlock from '../inputs/InputBlock'
|
||||
import StringInput from '../inputs/StringInput'
|
||||
import SelectInput from '../inputs/SelectInput'
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import styleSpec from '@mapbox/mapbox-gl-style-spec'
|
||||
import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
|
||||
import Modal from './Modal'
|
||||
import Button from '../Button'
|
||||
import InputBlock from '../inputs/InputBlock'
|
||||
|
|
@ -139,7 +139,7 @@ class AddSource extends React.Component {
|
|||
onChange={v => this.setState({ sourceId: v})}
|
||||
/>
|
||||
</InputBlock>
|
||||
<InputBlock label={"Source Type"} doc={styleSpec.latest.source_tile.type.doc}>
|
||||
<InputBlock label={"Source Type"} doc={styleSpec.latest.source_vector.type.doc}>
|
||||
<SelectInput
|
||||
options={[
|
||||
['geojson', 'GeoJSON'],
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import styleSpec from '@mapbox/mapbox-gl-style-spec'
|
||||
import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
|
||||
import InputBlock from '../inputs/InputBlock'
|
||||
import StringInput from '../inputs/StringInput'
|
||||
import NumberInput from '../inputs/NumberInput'
|
||||
|
|
@ -12,7 +12,7 @@ class TileJSONSourceEditor extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
return <InputBlock label={"TileJSON URL"} doc={styleSpec.latest.source_tile.url.doc}>
|
||||
return <InputBlock label={"TileJSON URL"} doc={styleSpec.latest.source_vector.url.doc}>
|
||||
<StringInput
|
||||
value={this.props.source.url}
|
||||
onChange={url => this.props.onChange({
|
||||
|
|
@ -43,7 +43,7 @@ class TileURLSourceEditor extends React.Component {
|
|||
const prefix = ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th']
|
||||
const tiles = this.props.source.tiles || []
|
||||
return tiles.map((tileUrl, tileIndex) => {
|
||||
return <InputBlock key={tileIndex} label={prefix[tileIndex] + " Tile URL"} doc={styleSpec.latest.source_tile.tiles.doc}>
|
||||
return <InputBlock key={tileIndex} label={prefix[tileIndex] + " Tile URL"} doc={styleSpec.latest.source_vector.tiles.doc}>
|
||||
<StringInput
|
||||
value={tileUrl}
|
||||
onChange={this.changeTileUrl.bind(this, tileIndex)}
|
||||
|
|
@ -55,7 +55,7 @@ class TileURLSourceEditor extends React.Component {
|
|||
render() {
|
||||
return <div>
|
||||
{this.renderTileUrls()}
|
||||
<InputBlock label={"Min Zoom"} doc={styleSpec.latest.source_tile.minzoom.doc}>
|
||||
<InputBlock label={"Min Zoom"} doc={styleSpec.latest.source_vector.minzoom.doc}>
|
||||
<NumberInput
|
||||
value={this.props.source.minzoom || 0}
|
||||
onChange={minzoom => this.props.onChange({
|
||||
|
|
@ -64,7 +64,7 @@ class TileURLSourceEditor extends React.Component {
|
|||
})}
|
||||
/>
|
||||
</InputBlock>
|
||||
<InputBlock label={"Max Zoom"} doc={styleSpec.latest.source_tile.maxzoom.doc}>
|
||||
<InputBlock label={"Max Zoom"} doc={styleSpec.latest.source_vector.maxzoom.doc}>
|
||||
<NumberInput
|
||||
value={this.props.source.maxzoom || 22}
|
||||
onChange={maxzoom => this.props.onChange({
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import styleSpec from '@mapbox/mapbox-gl-style-spec'
|
||||
import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
|
||||
|
||||
export function diffMessages(beforeStyle, afterStyle) {
|
||||
const changes = styleSpec.diff(beforeStyle, afterStyle)
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import styleSpec from '@mapbox/mapbox-gl-style-spec'
|
||||
import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
|
||||
export const combiningFilterOps = ['all', 'any', 'none']
|
||||
export const setFilterOps = ['in', '!in']
|
||||
export const otherFilterOps = Object
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import styleSpec from '@mapbox/mapbox-gl-style-spec'
|
||||
import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
|
||||
|
||||
export function changeType(layer, newType) {
|
||||
const changedPaintProps = { ...layer.paint }
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import MapboxGl from 'mapbox-gl/dist/mapbox-gl.js'
|
||||
|
||||
// Load mapbox-gl-rtl-text using object urls without needing http://localhost for AJAX.
|
||||
const data = require("base64?mimetype=text/javascript!@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.js");
|
||||
const data = require("base64-loader?mimetype=text/javascript!@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.js");
|
||||
|
||||
const blob = new window.Blob([window.atob(data)]);
|
||||
const objectUrl = window.URL.createObjectURL(blob, {
|
||||
|
|
|
|||
Loading…
Reference in a new issue