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

Enable style file upload

Browse source
This commit is contained in:
lukasmartinelli 2016-09-08 20:35:21 +02:00
parent 092ff674ab
commit d0776032b6
4 changed files with 35 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -19,6 +19,7 @@
"node-sass": "^3.9.2", "node-sass": "^3.9.2",
"react": "15.3.0", "react": "15.3.0",
"react-dom": "15.3.0", "react-dom": "15.3.0",
"react-file-reader-input": "^1.1.0",
"react-geomicons": "^2.0.5", "react-geomicons": "^2.0.5",
"react-icons": "^2.2.1", "react-icons": "^2.2.1",
"react-map-gl": "^1.4.2", "react-map-gl": "^1.4.2",

1
src/app.jsx
View file

@ -1,4 +1,3 @@
import 'bootstrap/dist/css/bootstrap.min.css';
import {Workspace} from './workspace.jsx'; import {Workspace} from './workspace.jsx';
import {Map} from './map.jsx'; import {Map} from './map.jsx';
import {Toolbar} from './toolbar.jsx'; import {Toolbar} from './toolbar.jsx';

16
src/map.jsx
View file

@ -2,16 +2,18 @@ import React from 'react';
import ReactMapboxGl from 'react-mapbox-gl'; import ReactMapboxGl from 'react-mapbox-gl';
import {ZoomControl} from 'react-mapbox-gl'; import {ZoomControl} from 'react-mapbox-gl';
export class Map extends React.Component { export class Map extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
} }
render() { render() {
return <ReactMapboxGl return <ReactMapboxGl
style="mapbox://styles/morgenkaffee/ciqo4gtwo0037c0m7tpcosu63" style="mapbox://styles/morgenkaffee/ciqo4gtwo0037c0m7tpcosu63"
accessToken="pk.eyJ1IjoibW9yZ2Vua2FmZmVlIiwiYSI6IjIzcmN0NlkifQ.0LRTNgCc-envt9d5MzR75w" accessToken="pk.eyJ1IjoibW9yZ2Vua2FmZmVlIiwiYSI6IjIzcmN0NlkifQ.0LRTNgCc-envt9d5MzR75w"
><ZoomControl /></ReactMapboxGl> >
<ZoomControl />
</ReactMapboxGl>;
} }
} }

30
src/toolbar.jsx
View file

@ -4,8 +4,26 @@ import { Menu, NavItem, Tooltip, Container, Block, Fixed } from 'rebass'
import theme from './theme.jsx'; import theme from './theme.jsx';
import {MdSettings, MdPalette, MdLayers, MdSave, MdFolderOpen} from 'react-icons/lib/md'; import {MdSettings, MdPalette, MdLayers, MdSave, MdFolderOpen} from 'react-icons/lib/md';
import { Button, Text } from 'rebass'; import { Button, Text } from 'rebass';
import FileReaderInput from 'react-file-reader-input';
export class Toolbar extends React.Component { export class Toolbar extends React.Component {
constructor(props) {
super(props);
this.state = {
styleFile: null
};
}
onUpload(_, files) {
const [e, file] = files[0];
const reader = new FileReader();
reader.readAsText(file, "UTF-8");
reader.onload = e => {
const style = JSON.parse(e.target.result);
console.log(style);
}
reader.onerror = e => console.log(e.target);
}
render() { render() {
return <Container style={{ return <Container style={{
zIndex: 100, zIndex: 100,
@ -17,11 +35,13 @@ export class Toolbar extends React.Component {
backgroundColor: theme.colors.black } backgroundColor: theme.colors.black }
}> }>
<Block> <Block>
<Button big={true}> <FileReaderInput onChange={this.onUpload}>
<Tooltip inverted rounded title="Save"> <Button big={true}>
<MdSave /> <Tooltip inverted rounded title="Save">
</Tooltip> <MdSave />
</Button> </Tooltip>
</Button>
</FileReaderInput>
</Block> </Block>
<Block> <Block>
<Button big={true}><MdFolderOpen /></Button> <Button big={true}><MdFolderOpen /></Button>