Merge remote-tracking branch 'upstream/master' into feature/webpack-bundle-analyzer

Conflicts:
	config/webpack.production.config.js
This commit is contained in:
orangemug 2017-11-17 10:22:28 +00:00
commit 1838b8aefd
33 changed files with 13435 additions and 142 deletions

View file

@ -3,24 +3,24 @@ addons:
firefox: latest firefox: latest
matrix: matrix:
include: include:
- os: linux
node_js: "4"
- os: linux
env: CXX=g++-4.8
node_js: "5"
- os: linux - os: linux
node_js: "6" node_js: "6"
- os: linux - os: linux
env: CXX=g++-4.8 env: CXX=g++-4.8
node_js: "7" node_js: "7"
- os: osx - os: linux
node_js: "4" node_js: "8"
- os: osx - os: linux
node_js: "5" env: CXX=g++-4.8
node_js: "9"
- os: osx - os: osx
node_js: "6" node_js: "6"
- os: osx - os: osx
node_js: "7" node_js: "7"
- os: osx
node_js: "8"
- os: osx
node_js: "9"
before_install: before_install:
- export CHROME_BIN=chromium-browser - export CHROME_BIN=chromium-browser
- export DISPLAY=:99.0 - export DISPLAY=:99.0

View file

@ -1,11 +1,23 @@
# Maputnik [![Build Status](https://travis-ci.org/maputnik/editor.svg?branch=master)](https://travis-ci.org/maputnik/editor) [![Windows Build Status](https://ci.appveyor.com/api/projects/status/anelbgv6jdb3qnh9/branch/master?svg=true)](https://ci.appveyor.com/project/lukasmartinelli/editor) [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://tldrlegal.com/license/mit-license) # Maputnik
[![Build Status](https://travis-ci.org/maputnik/editor.svg?branch=master)][travis]
[![Windows Build Status](https://ci.appveyor.com/api/projects/status/anelbgv6jdb3qnh9/branch/master?svg=true)][appveyor]
[![Dependency Status](https://david-dm.org/maputnik/editor.svg)][dm-prod]
[![Dev Dependency Status](https://david-dm.org/maputnik/editor/dev-status.svg)][dm-dev]
[![License](https://img.shields.io/badge/license-MIT-blue.svg)][license]
[travis]: https://travis-ci.org/maputnik/editor
[appveyor]: https://ci.appveyor.com/project/lukasmartinelli/editor
[dm-prod]: https://david-dm.org/maputnik/editor
[dm-dev]: https://david-dm.org/maputnik/editor#info=devDependencies
[license]: https://tldrlegal.com/license/mit-license
<img width="200" align="right" alt="Maputnik" src="src/img/maputnik.png" /> <img width="200" align="right" alt="Maputnik" src="src/img/maputnik.png" />
A free and open visual editor for the [Mapbox GL styles](https://www.mapbox.com/mapbox-gl-style-spec/) A free and open visual editor for the [Mapbox GL styles](https://www.mapbox.com/mapbox-gl-style-spec/)
targeted at developers and map designers. targeted at developers and map designers.
- :link: Design your maps online at **http://maputnik.com/editor/** (all in local storage) - :link: Design your maps online at **<https://maputnik.github.io/editor/>** (all in local storage)
- :link: Use the [Maputnik CLI](https://github.com/maputnik/editor/wiki/Maputnik-CLI) for local style development - :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 independance is an OSS map designer. Mapbox has built one of the best and most amazing OSS ecosystems. A key component to ensure its longevity and independance is an OSS map designer.
@ -37,7 +49,12 @@ npm install
npm start npm start
``` ```
Build a production package for distribution. The build process will watch for changes to the filesystem, rebuild and autoreload the editor. However note this from the webpack-dev-server docs
> webpack uses the file system to get notified of file changes. In some cases this does not work. For example, when using Network File System (NFS). Vagrant also has a lot of problems with this.
Snippet from <https://webpack.js.org/configuration/dev-server/#devserver-watchoptions->
To enable polling add `export WEBPACK_DEV_SERVER_POLLING=1` to your enviroment.
``` ```
npm run build npm run build

View file

@ -1,8 +1,9 @@
environment: environment:
matrix: matrix:
- nodejs_version: "4"
- nodejs_version: "6" - nodejs_version: "6"
- nodejs_version: "7" - nodejs_version: "7"
- nodejs_version: "8"
- nodejs_version: "9"
platform: platform:
- x86 - x86
- x64 - x64

View file

@ -1,6 +1,6 @@
var webpack = require("webpack"); var webpack = require("webpack");
var WebpackDevServer = require("webpack-dev-server"); var WebpackDevServer = require("webpack-dev-server");
var webpackConfig = require("./webpack.config"); var webpackConfig = require("./webpack.production.config");
var testConfig = require("../test/config/specs"); var testConfig = require("../test/config/specs");
@ -18,7 +18,7 @@ exports.config = {
browserName: 'firefox' browserName: 'firefox'
}], }],
sync: true, sync: true,
logLevel: 'silent', logLevel: 'verbose',
coloredLogs: true, coloredLogs: true,
bail: 0, bail: 0,
screenshotPath: './errorShots/', screenshotPath: './errorShots/',
@ -29,6 +29,9 @@ exports.config = {
services: ['phantomjs'], services: ['phantomjs'],
framework: 'mocha', framework: 'mocha',
reporters: ['spec'], reporters: ['spec'],
phantomjsOpts: {
webdriverLogfile: 'phantomjs.log'
},
mochaOpts: { mochaOpts: {
ui: 'bdd', ui: 'bdd',
// Because we don't know how long the initial build will take... // Because we don't know how long the initial build will take...
@ -36,9 +39,7 @@ exports.config = {
}, },
onPrepare: function (config, capabilities) { onPrepare: function (config, capabilities) {
var compiler = webpack(webpackConfig); var compiler = webpack(webpackConfig);
server = new WebpackDevServer(compiler, { server = new WebpackDevServer(compiler, {});
stats: "minimal"
});
server.listen(testConfig.port); server.listen(testConfig.port);
}, },
onComplete: function(exitCode) { onComplete: function(exitCode) {

View file

@ -45,7 +45,13 @@ module.exports = {
// serve index.html in place of 404 responses to allow HTML5 history // serve index.html in place of 404 responses to allow HTML5 history
historyApiFallback: true, historyApiFallback: true,
port: PORT, port: PORT,
host: HOST host: HOST,
watchOptions: {
// Disabled polling by default as it causes lots of CPU usage and hence drains laptop batteries. To enable polling add WEBPACK_DEV_SERVER_POLLING to your environment
// See <https://webpack.js.org/configuration/watch/#watchoptions-poll> for details
poll: (!!process.env.WEBPACK_DEV_SERVER_POLLING ? true : false),
watch: false
}
}, },
plugins: [ plugins: [
new webpack.NoEmitOnErrorsPlugin(), new webpack.NoEmitOnErrorsPlugin(),

View file

@ -59,7 +59,7 @@ module.exports = {
tls: 'empty' tls: 'empty'
}, },
plugins: [ plugins: [
new webpack.NoErrorsPlugin(), new webpack.NoEmitOnErrorsPlugin(),
new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: '[chunkhash].vendor.js' }), new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: '[chunkhash].vendor.js' }),
new WebpackCleanupPlugin(), new WebpackCleanupPlugin(),
new webpack.DefinePlugin({ new webpack.DefinePlugin({
@ -80,7 +80,6 @@ module.exports = {
template: './src/template.html', template: './src/template.html',
title: 'Maputnik' title: 'Maputnik'
}), }),
new webpack.optimize.DedupePlugin(),
new BundleAnalyzerPlugin({ new BundleAnalyzerPlugin({
analyzerMode: 'static', analyzerMode: 'static',
defaultSizes: 'gzip', defaultSizes: 'gzip',
@ -88,6 +87,6 @@ module.exports = {
generateStatsFile: true, generateStatsFile: true,
reportFilename: 'bundle-stats.html', reportFilename: 'bundle-stats.html',
statsFilename: 'bundle-stats.json', statsFilename: 'bundle-stats.json',
}), })
] ]
}; };

13131
package-lock.json generated Normal file

File diff suppressed because it is too large Load diff

View file

@ -8,7 +8,7 @@
"build": "webpack --config config/webpack.production.config.js --progress --profile --colors", "build": "webpack --config config/webpack.production.config.js --progress --profile --colors",
"test": "wdio config/wdio.conf.js", "test": "wdio config/wdio.conf.js",
"test-watch": "wdio config/wdio.conf.js --watch", "test-watch": "wdio config/wdio.conf.js --watch",
"start": "webpack-dev-server --progress --profile --colors --watch-poll --config config/webpack.config.js", "start": "webpack-dev-server --progress --profile --colors --config config/webpack.config.js",
"lint": "eslint --ext js --ext jsx {src,test}", "lint": "eslint --ext js --ext jsx {src,test}",
"lint-styles": "stylelint 'src/styles/*.scss'" "lint-styles": "stylelint 'src/styles/*.scss'"
}, },
@ -39,14 +39,14 @@
"ol-mapbox-style": "^1.0.1", "ol-mapbox-style": "^1.0.1",
"openlayers": "^4.4.2", "openlayers": "^4.4.2",
"prop-types": "^15.6.0", "prop-types": "^15.6.0",
"react": "^16.0.0", "react": "16.0.0",
"react-addons-pure-render-mixin": "^15.6.2", "react-addons-pure-render-mixin": "^15.6.2",
"react-autocomplete": "^1.7.2", "react-autocomplete": "^1.7.2",
"react-codemirror": "^1.0.0", "react-codemirror": "^1.0.0",
"react-collapse": "^4.0.3", "react-collapse": "^4.0.3",
"react-color": "^2.13.8", "react-color": "^2.13.8",
"react-copy-to-clipboard": "^5.0.1", "react-copy-to-clipboard": "^5.0.1",
"react-dom": "^16.0.0", "react-dom": "16.0.0",
"react-file-reader-input": "^1.1.4", "react-file-reader-input": "^1.1.4",
"react-height": "^3.0.0", "react-height": "^3.0.0",
"react-icon-base": "^2.1.1", "react-icon-base": "^2.1.1",
@ -67,7 +67,7 @@
"plugins": [ "plugins": [
"react" "react"
], ],
"extend": [ "extends": [
"plugin:react/recommended" "plugin:react/recommended"
], ],
"env": { "env": {

View file

@ -7,6 +7,7 @@ class Button extends React.Component {
onClick: PropTypes.func, onClick: PropTypes.func,
style: PropTypes.object, style: PropTypes.object,
className: PropTypes.string, className: PropTypes.string,
children: PropTypes.node
} }
render() { render() {

View file

@ -9,11 +9,11 @@ class MessagePanel extends React.Component {
render() { render() {
const errors = this.props.errors.map((m, i) => { 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) => { 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"> return <div className="maputnik-message-panel">

View file

@ -1,9 +1,16 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types'
const ScrollContainer = (props) => { class ScrollContainer extends React.Component {
return <div className="maputnik-scroll-container"> static propTypes = {
{props.children} children: PropTypes.node
</div> }
render() {
return <div className="maputnik-scroll-container">
{this.props.children}
</div>
}
} }
export default ScrollContainer export default ScrollContainer

View file

@ -25,27 +25,49 @@ import OpenModal from './modals/OpenModal'
import style from '../libs/style' import style from '../libs/style'
function IconText(props) { class IconText extends React.Component {
return <span className="maputnik-icon-text">{props.children}</span> static propTypes = {
children: PropTypes.node,
}
render() {
return <span className="maputnik-icon-text">{this.props.children}</span>
}
} }
function ToolbarLink(props) { class ToolbarLink extends React.Component {
return <a static propTypes = {
className={classnames('maputnik-toolbar-link', props.className)} className: PropTypes.string,
href={props.href} children: PropTypes.node,
target={"blank"} href: PropTypes.string,
> }
{props.children}
</a> 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) { class ToolbarAction extends React.Component {
return <a static propTypes = {
className='maputnik-toolbar-action' children: PropTypes.node,
onClick={props.onClick} onClick: PropTypes.func
> }
{props.children}
</a> render() {
return <a
className='maputnik-toolbar-action'
onClick={this.props.onClick}
>
{this.props.children}
</a>
}
} }
export default class Toolbar extends React.Component { export default class Toolbar extends React.Component {
@ -57,7 +79,8 @@ export default class Toolbar extends React.Component {
onStyleOpen: PropTypes.func.isRequired, onStyleOpen: PropTypes.func.isRequired,
// A dict of source id's and the available source layers // A dict of source id's and the available source layers
sources: PropTypes.object.isRequired, sources: PropTypes.object.isRequired,
onInspectModeToggle: PropTypes.func.isRequired onInspectModeToggle: PropTypes.func.isRequired,
children: PropTypes.node
} }
constructor(props) { constructor(props) {
@ -107,40 +130,44 @@ export default class Toolbar extends React.Component {
isOpen={this.state.isOpen.sources} isOpen={this.state.isOpen.sources}
onOpenToggle={this.toggleModal.bind(this, 'sources')} onOpenToggle={this.toggleModal.bind(this, 'sources')}
/> />
<ToolbarLink <div className="maputnik-toolbar__inner">
href={"https://github.com/maputnik/editor"} <ToolbarLink
className="maputnik-toolbar-logo" href={"https://github.com/maputnik/editor"}
> className="maputnik-toolbar-logo"
<img src={logoImage} alt="Maputnik" /> >
<h1>Maputnik</h1> <img src={logoImage} alt="Maputnik" />
</ToolbarLink> <h1>Maputnik</h1>
<ToolbarAction onClick={this.toggleModal.bind(this, 'open')}> </ToolbarLink>
<OpenIcon /> <div className="maputnik-toolbar__actions">
<IconText>Open</IconText> <ToolbarAction onClick={this.toggleModal.bind(this, 'open')}>
</ToolbarAction> <OpenIcon />
<ToolbarAction onClick={this.toggleModal.bind(this, 'export')}> <IconText>Open</IconText>
<MdFileDownload /> </ToolbarAction>
<IconText>Export</IconText> <ToolbarAction onClick={this.toggleModal.bind(this, 'export')}>
</ToolbarAction> <MdFileDownload />
<ToolbarAction onClick={this.toggleModal.bind(this, 'sources')}> <IconText>Export</IconText>
<SourcesIcon /> </ToolbarAction>
<IconText>Sources</IconText> <ToolbarAction onClick={this.toggleModal.bind(this, 'sources')}>
</ToolbarAction> <SourcesIcon />
<ToolbarAction onClick={this.toggleModal.bind(this, 'settings')}> <IconText>Sources</IconText>
<SettingsIcon /> </ToolbarAction>
<IconText>Style Settings</IconText> <ToolbarAction onClick={this.toggleModal.bind(this, 'settings')}>
</ToolbarAction> <SettingsIcon />
<ToolbarAction onClick={this.props.onInspectModeToggle}> <IconText>Style Settings</IconText>
<InspectionIcon /> </ToolbarAction>
<IconText> <ToolbarAction onClick={this.props.onInspectModeToggle}>
{ this.props.inspectModeEnabled && <span>Map Mode</span> } <InspectionIcon />
{ !this.props.inspectModeEnabled && <span>Inspect Mode</span> } <IconText>
</IconText> { this.props.inspectModeEnabled && <span>Map Mode</span> }
</ToolbarAction> { !this.props.inspectModeEnabled && <span>Inspect Mode</span> }
<ToolbarLink href={"https://github.com/maputnik/editor/wiki"}> </IconText>
<HelpIcon /> </ToolbarAction>
<IconText>Help</IconText> <ToolbarLink href={"https://github.com/maputnik/editor/wiki"}>
</ToolbarLink> <HelpIcon />
<IconText>Help</IconText>
</ToolbarLink>
</div>
</div>
</div> </div>
} }
} }

View file

@ -30,7 +30,7 @@ class ColorField extends React.Component {
//but I am too stupid to get it to work together with fixed position //but I am too stupid to get it to work together with fixed position
//and scrollbars so I have to fallback to JavaScript //and scrollbars so I have to fallback to JavaScript
calcPickerOffset() { calcPickerOffset() {
const elem = this.refs.colorInput const elem = this.colorInput
if(elem) { if(elem) {
const pos = elem.getBoundingClientRect() const pos = elem.getBoundingClientRect()
return { return {
@ -99,7 +99,7 @@ class ColorField extends React.Component {
<div className="maputnik-color-swatch" style={swatchStyle}></div> <div className="maputnik-color-swatch" style={swatchStyle}></div>
<input <input
className="maputnik-color" className="maputnik-color"
ref="colorInput" ref={(input) => this.colorInput = input}
onClick={this.togglePicker.bind(this)} onClick={this.togglePicker.bind(this)}
style={this.props.style} style={this.props.style}
name={this.props.name} name={this.props.name}

View file

@ -90,6 +90,16 @@ export default class FunctionSpecProperty extends React.Component {
this.props.onChange(this.props.fieldName, zoomFunc) this.props.onChange(this.props.fieldName, zoomFunc)
} }
getFieldFunctionType(fieldSpec) {
if (fieldSpec.function === "interpolated") {
return "exponential"
}
if (fieldSpec.type === "number") {
return "interval"
}
return "categorical"
}
getDataFunctionTypes(functionType) { getDataFunctionTypes(functionType) {
if (functionType === "interpolated") { if (functionType === "interpolated") {
return ["categorical", "interval", "exponential"] return ["categorical", "interval", "exponential"]
@ -132,6 +142,9 @@ export default class FunctionSpecProperty extends React.Component {
} }
renderDataProperty() { renderDataProperty() {
if (typeof this.props.value.type === "undefined") {
this.props.value.type = this.getFieldFunctionType(this.props.fieldSpec)
}
const dataFields = this.props.value.stops.map((stop, idx) => { const dataFields = this.props.value.stops.map((stop, idx) => {
const zoomLevel = stop[0].zoom const zoomLevel = stop[0].zoom
const dataLevel = stop[0].value const dataLevel = stop[0].value
@ -302,49 +315,63 @@ export default class FunctionSpecProperty extends React.Component {
} }
} }
function MakeFunctionButtons(props) { class MakeFunctionButtons extends React.Component {
let makeZoomButton, makeDataButton static propTypes = {
if (props.fieldSpec['zoom-function']) { fieldSpec: PropTypes.object,
makeZoomButton = <Button onZoomClick: PropTypes.func,
className="maputnik-make-zoom-function" onDataClick: PropTypes.func,
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>
if (props.fieldSpec['property-function'] && ['piecewise-constant', 'interpolated'].indexOf(props.fieldSpec['function']) !== -1) { render() {
makeDataButton = <Button let makeZoomButton, makeDataButton
className="maputnik-make-data-function" if (this.props.fieldSpec['zoom-function']) {
onClick={props.onDataClick} makeZoomButton = <Button
className="maputnik-make-zoom-function"
onClick={this.props.onZoomClick}
> >
<DocLabel <DocLabel
label={<MdInsertChart />} label={<FunctionIcon />}
cursorTargetStyle={{ cursor: 'pointer' }} 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> </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) { class DeleteStopButton extends React.Component {
return <Button static propTypes = {
className="maputnik-delete-stop" onClick: PropTypes.func,
onClick={props.onClick} }
>
<DocLabel render() {
label={<DeleteIcon />} return <Button
doc={"Remove zoom level stop."} className="maputnik-delete-stop"
/> onClick={this.props.onClick}
</Button> >
<DocLabel
label={<DeleteIcon />}
doc={"Remove zoom level stop."}
/>
</Button>
}
} }
function labelFromFieldName(fieldName) { function labelFromFieldName(fieldName) {

View file

@ -17,7 +17,7 @@ class AutocompleteInput extends React.Component {
} }
render() { 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 return <Autocomplete
wrapperProps={{ wrapperProps={{

View file

@ -13,6 +13,7 @@ class DynamicArrayInput extends React.Component {
type: PropTypes.string, type: PropTypes.string,
default: PropTypes.array, default: PropTypes.array,
onChange: PropTypes.func, onChange: PropTypes.func,
style: PropTypes.object,
} }
changeValue(idx, newValue) { 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 return <Button
className="maputnik-delete-stop" className="maputnik-delete-stop"
onClick={props.onClick} onClick={this.props.onClick}
> >
<DocLabel <DocLabel
label={<DeleteIcon />} label={<DeleteIcon />}
@ -95,5 +101,6 @@ function DeleteValueButton(props) {
/> />
</Button> </Button>
} }
}
export default DynamicArrayInput export default DynamicArrayInput

View file

@ -5,6 +5,7 @@ import AutocompleteInput from './AutocompleteInput'
class FontInput extends React.Component { class FontInput extends React.Component {
static propTypes = { static propTypes = {
value: PropTypes.array.isRequired, value: PropTypes.array.isRequired,
default: PropTypes.array,
fonts: PropTypes.array, fonts: PropTypes.array,
style: PropTypes.object, style: PropTypes.object,
onChange: PropTypes.func.isRequired, onChange: PropTypes.func.isRequired,

View file

@ -14,6 +14,7 @@ class InputBlock extends React.Component {
action: PropTypes.element, action: PropTypes.element,
children: PropTypes.element.isRequired, children: PropTypes.element.isRequired,
style: PropTypes.object, style: PropTypes.object,
onChange: PropTypes.func,
} }
onChange(e) { onChange(e) {

View file

@ -7,6 +7,7 @@ class StringInput extends React.Component {
style: PropTypes.object, style: PropTypes.object,
default: PropTypes.string, default: PropTypes.string,
onChange: PropTypes.func, onChange: PropTypes.func,
multi: PropTypes.bool,
} }
constructor(props) { constructor(props) {

View file

@ -1,4 +1,5 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types'
import InputBlock from '../inputs/InputBlock' import InputBlock from '../inputs/InputBlock'
import StringInput from '../inputs/StringInput' import StringInput from '../inputs/StringInput'
import LayerIcon from '../icons/LayerIcon' import LayerIcon from '../icons/LayerIcon'
@ -14,6 +15,10 @@ function groupFeaturesBySourceLayer(features) {
} }
class FeatureLayerPopup extends React.Component { class FeatureLayerPopup extends React.Component {
static propTypes = {
features: PropTypes.array
}
render() { render() {
const sources = groupFeaturesBySourceLayer(this.props.features) const sources = groupFeaturesBySourceLayer(this.props.features)

View file

@ -1,4 +1,5 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types'
import InputBlock from '../inputs/InputBlock' import InputBlock from '../inputs/InputBlock'
import StringInput from '../inputs/StringInput' import StringInput from '../inputs/StringInput'
@ -31,6 +32,9 @@ function renderFeature(feature) {
} }
class FeaturePropertyPopup extends React.Component { class FeaturePropertyPopup extends React.Component {
static propTypes = {
features: PropTypes.array
}
render() { render() {
const features = this.props.features const features = this.props.features

View file

@ -9,6 +9,7 @@ import style from '../../libs/style.js'
import tokens from '../../config/tokens.json' import tokens from '../../config/tokens.json'
import colors from 'mapbox-gl-inspect/lib/colors' import colors from 'mapbox-gl-inspect/lib/colors'
import Color from 'color' import Color from 'color'
import ZoomControl from '../../libs/zoomcontrol'
import { colorHighlightedLayer } from '../../libs/highlight' import { colorHighlightedLayer } from '../../libs/highlight'
import 'mapbox-gl/dist/mapbox-gl.css' import 'mapbox-gl/dist/mapbox-gl.css'
import '../../mapboxgl.css' import '../../mapboxgl.css'
@ -110,6 +111,9 @@ export default class MapboxGlMap extends React.Component {
hash: true, hash: true,
}) })
const zoom = new ZoomControl;
map.addControl(zoom, 'top-right');
const nav = new MapboxGl.NavigationControl(); const nav = new MapboxGl.NavigationControl();
map.addControl(nav, 'top-right'); map.addControl(nav, 'top-right');

View file

@ -69,6 +69,7 @@ class OpenLayers3Map extends React.Component {
onDataChange: PropTypes.func, onDataChange: PropTypes.func,
mapStyle: PropTypes.object.isRequired, mapStyle: PropTypes.object.isRequired,
accessToken: PropTypes.string, accessToken: PropTypes.string,
style: PropTypes.object,
} }
static defaultProps = { static defaultProps = {

View file

@ -127,7 +127,7 @@ class Gist extends React.Component {
const user = gist.user || 'anonymous'; const user = gist.user || 'anonymous';
const preview = !!gist.files['index.html']; const preview = !!gist.files['index.html'];
if(preview) { if(preview) {
return <span><a target="_blank" href={"https://bl.ocks.org/"+user+"/"+gist.id}>Preview</a>,{' '}</span> return <span><a target="_blank" rel="noopener noreferrer" href={"https://bl.ocks.org/"+user+"/"+gist.id}>Preview</a>,{' '}</span>
} }
return null; return null;
} }
@ -145,7 +145,7 @@ class Gist extends React.Component {
<p> <p>
Latest saved gist:{' '} Latest saved gist:{' '}
{this.renderPreviewLink(this)} {this.renderPreviewLink(this)}
<a target="_blank" href={"https://gist.github.com/" + user + "/" + gist.id}>Source</a> <a target="_blank" rel="noopener noreferrer" href={"https://gist.github.com/" + user + "/" + gist.id}>Source</a>
</p> </p>
<p> <p>
<CopyToClipboard text={maputnikStyleLink}> <CopyToClipboard text={maputnikStyleLink}>
@ -178,7 +178,7 @@ class Gist extends React.Component {
value={(this.props.mapStyle.metadata || {})['maputnik:openmaptiles_access_token']} value={(this.props.mapStyle.metadata || {})['maputnik:openmaptiles_access_token']}
onChange={this.changeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}/> onChange={this.changeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}/>
</InputBlock> </InputBlock>
<a target="_blank" href="https://openmaptiles.com/hosting/">Get your free access token</a> <a target="_blank" rel="noopener noreferrer" href="https://openmaptiles.com/hosting/">Get your free access token</a>
</div> </div>
: null} : null}
{this.renderLatestGist()} {this.renderLatestGist()}

View file

@ -8,6 +8,7 @@ class Modal extends React.Component {
isOpen: PropTypes.bool.isRequired, isOpen: PropTypes.bool.isRequired,
title: PropTypes.string.isRequired, title: PropTypes.string.isRequired,
onOpenToggle: PropTypes.func.isRequired, onOpenToggle: PropTypes.func.isRequired,
children: PropTypes.node,
} }
render() { render() {

View file

@ -77,7 +77,7 @@ class OpenModal extends React.Component {
} }
onOpenUrl() { onOpenUrl() {
const url = this.refs.styleUrl.value; const url = this.styleUrlElement.value;
this.onStyleSelect(url); this.onStyleSelect(url);
} }
@ -151,7 +151,7 @@ class OpenModal extends React.Component {
<p> <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>. 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> </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> <div>
<Button className="maputnik-big-button" onClick={this.onOpenUrl.bind(this)}>Open URL</Button> <Button className="maputnik-big-button" onClick={this.onOpenUrl.bind(this)}>Open URL</Button>
</div> </div>

View file

@ -139,7 +139,7 @@ class AddSource extends React.Component {
onChange={v => this.setState({ sourceId: v})} onChange={v => this.setState({ sourceId: v})}
/> />
</InputBlock> </InputBlock>
<InputBlock label={"Source Type"} doc={styleSpec.latest.source_tile.type.doc}> <InputBlock label={"Source Type"} doc={styleSpec.latest.source_vector.type.doc}>
<SelectInput <SelectInput
options={[ options={[
['geojson', 'GeoJSON'], ['geojson', 'GeoJSON'],

View file

@ -12,7 +12,7 @@ class TileJSONSourceEditor extends React.Component {
} }
render() { 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 <StringInput
value={this.props.source.url} value={this.props.source.url}
onChange={url => this.props.onChange({ onChange={url => this.props.onChange({
@ -43,7 +43,7 @@ class TileURLSourceEditor extends React.Component {
const prefix = ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th'] const prefix = ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th']
const tiles = this.props.source.tiles || [] const tiles = this.props.source.tiles || []
return tiles.map((tileUrl, tileIndex) => { 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 <StringInput
value={tileUrl} value={tileUrl}
onChange={this.changeTileUrl.bind(this, tileIndex)} onChange={this.changeTileUrl.bind(this, tileIndex)}
@ -55,7 +55,7 @@ class TileURLSourceEditor extends React.Component {
render() { render() {
return <div> return <div>
{this.renderTileUrls()} {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 <NumberInput
value={this.props.source.minzoom || 0} value={this.props.source.minzoom || 0}
onChange={minzoom => this.props.onChange({ onChange={minzoom => this.props.onChange({
@ -64,7 +64,7 @@ class TileURLSourceEditor extends React.Component {
})} })}
/> />
</InputBlock> </InputBlock>
<InputBlock label={"Max Zoom"} doc={styleSpec.latest.source_tile.maxzoom.doc}> <InputBlock label={"Max Zoom"} doc={styleSpec.latest.source_vector.maxzoom.doc}>
<NumberInput <NumberInput
value={this.props.source.maxzoom || 22} value={this.props.source.maxzoom || 22}
onChange={maxzoom => this.props.onChange({ onChange={maxzoom => this.props.onChange({

26
src/libs/zoomcontrol.js Normal file
View file

@ -0,0 +1,26 @@
export default class ZoomControl {
onAdd(map) {
this._map = map;
this._container = document.createElement('div');
this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group mapboxgl-ctrl-zoom';
this.addEventListeners();
return this._container;
}
updateZoomLevel() {
this._container.innerHTML = `Zoom level: ${this._map.getZoom().toFixed(2)}`;
}
addEventListeners (){
this._map.on('render', this.updateZoomLevel.bind(this) );
this._map.on('zoomIn', this.updateZoomLevel.bind(this) );
this._map.on('zoomOut', this.updateZoomLevel.bind(this) );
}
onRemove() {
this._container.parentNode.removeChild(this._container);
this._map = undefined;
}
}

View file

@ -25,6 +25,13 @@
color: white; color: white;
} }
.mapboxgl-ctrl-zoom {
color: rgb(138, 138, 138);
font-weight: bold;
padding: 4px 8px;
user-select: none;
}
.mapboxgl-ctrl-group { .mapboxgl-ctrl-group {
background: rgb(28, 31, 36); background: rgb(28, 31, 36);
} }

View file

@ -35,6 +35,7 @@
left: 0; left: 0;
width: 120px; width: 120px;
z-index: 10; z-index: 10;
pointer-events: none;
} }
} }

View file

@ -1,12 +1,15 @@
::-webkit-scrollbar { // HACK: ::webkit-scrollbar selector covers to much of the UI. Bigger changes to come so for now just use :not() to ignore the toolbar
background-color: #26282e; div:not(.maputnik-toolbar__actions) {
width: 5px; &::-webkit-scrollbar {
} background-color: #26282e;
width: 5px;
}
::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
border-radius: 6px; border-radius: 6px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #666; background-color: #666;
padding-left: 2px; padding-left: 2px;
padding-right: 2px; padding-right: 2px;
}
} }

View file

@ -54,3 +54,17 @@
display: inline; display: inline;
margin-left: $margin-1; margin-left: $margin-1;
} }
.maputnik-toolbar-logo {
flex: 0 0 140px;
}
.maputnik-toolbar__inner {
display: flex;
}
.maputnik-toolbar__actions {
white-space: nowrap;
flex: 1;
overflow-y: auto;
}