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

Download style when open from gallery

Browse source
This commit is contained in:
Lukas Martinelli 2016-12-22 16:35:31 +01:00
parent c674436267
commit 7f40f3b8ee
7 changed files with 46 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Button.jsx
View file

@ -4,7 +4,7 @@ import { margins, fontSizes } from '../config/scales'
class Button extends React.Component {
static propTypes = {
onClick: React.PropTypes.func.isRequired,
onClick: React.PropTypes.func,
style: React.PropTypes.object,
}

7
src/components/Toolbar.jsx
View file

@ -125,19 +125,20 @@ export default class Toolbar extends React.Component {
mapStyle={this.props.mapStyle}
onStyleChanged={this.props.onStyleChanged}
isOpen={this.state.openSettingsModal}
toggle={() => this.toggleSettings.bind(this)}
onToggleOpen={this.toggleSettings.bind(this)}
/>
}
{this.state.openOpenModal &&<OpenModal
isOpen={this.state.openOpenModal}
toggle={() => this.toggleOpen.bind(this)}
onStyleOpen={this.props.onStyleUpload}
onToggleOpen={this.toggleOpen.bind(this)}
/>
}
{this.state.openSourcesModal && <SourcesModal
mapStyle={this.props.mapStyle}
onStyleChanged={this.props.onStyleChanged}
isOpen={this.state.openSourcesModal}
toggle={() => this.toggleSources.bind(this)}
onToggleOpen={this.toggleSources.bind(this)}
/>
}
<ToolbarAction style={{

2
src/components/modals/Modal.jsx
View file

@ -10,7 +10,7 @@ class Modal extends React.Component {
static propTypes = {
isOpen: React.PropTypes.bool.isRequired,
title: React.PropTypes.string.isRequired,
toggleOpen: React.PropTypes.func.isRequired,
onOpenToggle: React.PropTypes.func.isRequired,
}
render() {

40
src/components/modals/OpenModal.jsx
View file

@ -4,6 +4,7 @@ import Heading from '../Heading'
import Button from '../Button'
import Paragraph from '../Paragraph'
import FileReaderInput from 'react-file-reader-input'
import request from 'request'
import FileUploadIcon from 'react-icons/lib/md/file-upload'
import AddIcon from 'react-icons/lib/md/add-circle-outline'
@ -31,11 +32,14 @@ class PublicStyle extends React.Component {
fontSize: fontSizes[4],
color: colors.lowgray,
}}>
<Button style={{
backgroundColor: 'transparent',
padding: margins[2],
display: 'block',
}}>
<Button
onClick={() => this.props.onSelect(this.props.url)}
style={{
backgroundColor: 'transparent',
padding: margins[2],
display: 'block',
}}
>
<div style={{
display: 'flex',
flexDirection: 'row',
@ -61,10 +65,25 @@ class PublicStyle extends React.Component {
class OpenModal extends React.Component {
static propTypes = {
isOpen: React.PropTypes.bool.isRequired,
toggle: React.PropTypes.func.isRequired,
onOpenToggle: React.PropTypes.func.isRequired,
onStyleOpen: React.PropTypes.func.isRequired,
}
onStyleSelect(styleUrl) {
request({
url: styleUrl,
withCredentials: false,
}, (error, response, body) => {
if (!error && response.statusCode == 200) {
const mapStyle = JSON.parse(body)
console.log('Loaded style ', mapStyle.id)
this.props.onStyleOpen(mapStyle)
} else {
console.warn('Could not open the style URL', styleUrl)
}
})
}
onUpload(_, files) {
const [e, file] = files[0];
const reader = new FileReader();
@ -80,16 +99,17 @@ class OpenModal extends React.Component {
render() {
const styleOptions = publicStyles.map(style => {
return <PublicStyle
key={style.key}
key={style.id}
url={style.url}
title={style.title}
thumbnailUrl={style.thumbnail}
onSelect={this.onStyleSelect.bind(this)}
/>
})
return <Modal
isOpen={this.props.isOpen}
toggleOpen={this.props.toggle}
onOpenToggle={this.props.onOpenToggle}
title={'Open Style'}
>
<Heading level={4}>Upload Style</Heading>
@ -98,8 +118,8 @@ class OpenModal extends React.Component {
</Paragraph>
<FileReaderInput onChange={this.onUpload.bind(this)}>
<Button>
<FileUploadIcon />
Upload
<FileUploadIcon />
Upload
</Button>
</FileReaderInput>

4
src/components/modals/SettingsModal.jsx
View file

@ -11,7 +11,7 @@ class SettingsModal extends React.Component {
mapStyle: React.PropTypes.object.isRequired,
onStyleChanged: React.PropTypes.func.isRequired,
isOpen: React.PropTypes.bool.isRequired,
toggle: React.PropTypes.func.isRequired,
onOpenToggle: React.PropTypes.func.isRequired,
}
constructor(props) {
@ -32,7 +32,7 @@ class SettingsModal extends React.Component {
const inputProps = { }
return <Modal
isOpen={this.props.isOpen}
toggleOpen={this.props.toggle}
onOpenToggle={this.props.onOpenToggle}
title={'StyleSettings'}
>
<InputBlock label={"Name"}>

4
src/components/modals/SourcesModal.jsx
View file

@ -158,7 +158,7 @@ class SourcesModal extends React.Component {
static propTypes = {
mapStyle: React.PropTypes.object.isRequired,
isOpen: React.PropTypes.bool.isRequired,
toggle: React.PropTypes.func.isRequired,
onOpenToggle: React.PropTypes.func.isRequired,
}
render() {
@ -179,7 +179,7 @@ class SourcesModal extends React.Component {
const inputProps = { }
return <Modal
isOpen={this.props.isOpen}
toggleOpen={this.props.toggle}
onOpenToggle={this.props.onOpenToggle}
title={'Sources'}
>
<Heading level={4}>Active Sources</Heading>

12
src/config/styles.json
View file

@ -2,37 +2,37 @@
{
"id": "dark-matter",
"title": "Dark Matter",
"url": "https://openmaptiles.github.io/dark-matter-gl-style/style-cdn.json",
"url": "https://rawgit.com/openmaptiles/dark-matter-gl-style/gh-pages/style-cdn.json",
"thumbnail": "https://camo.githubusercontent.com/b73c515d633d2be7368e8e29e3c23e14117fd21b/68747470733a2f2f6170692e6d6170626f782e636f6d2f7374796c65732f76312f6d6f7267656e6b61666665652f6369757878356e37683031396c326870626e396c6970726d6e2f7374617469632f382e3631393138342c34372e3333363230332c392e30372c302e30302c302e30302f363030783430303f6163636573735f746f6b656e3d706b2e65794a31496a6f69625739795a3256756132466d5a6d566c4969776959534936496a497a636d4e304e6c6b6966512e304c52544e6743632d656e76743964354d7a52373577"
},
{
"id": "positron",
"title": "Positron",
"url": "https://openmaptiles.github.io/positron-gl-style/style-cdn.json",
"url": "https://rawgit.com/openmaptiles/positron-gl-style/gh-pages/style-cdn.json",
"thumbnail": "https://camo.githubusercontent.com/0dd866e3fa7b21ada87da69082eac6801e16ec99/68747470733a2f2f6170692e6d6170626f782e636f6d2f7374796c65732f76312f6d6f7267656e6b61666665652f63697578756e37736530313976326a6c387162326a743374662f7374617469632f382e3631393138342c34372e3333363230332c392e30372c302e30302c302e30302f363030783430303f6163636573735f746f6b656e3d706b2e65794a31496a6f69625739795a3256756132466d5a6d566c4969776959534936496a497a636d4e304e6c6b6966512e304c52544e6743632d656e76743964354d7a52373577"
},
{
"id": "osm-bright",
"title": "OSM Bright",
"url": "https://openmaptiles.github.io/osm-bright-gl-style/style-cdn.json",
"url": "https://rawgit.com/openmaptiles/osm-bright-gl-style/gh-pages/style-cdn.json",
"thumbnail": "https://camo.githubusercontent.com/a15e23ab59202c56502e57cde963cb7772ed3bb1/68747470733a2f2f6170692e6d6170626f782e636f6d2f7374796c65732f76312f6f70656e6d617074696c65732f63697736637a7a326e30303234326b6d673668773230626f782f7374617469632f382e3534303538372c34372e3337303535352c31342e30382c302e30302c302e30302f363030783430303f6163636573735f746f6b656e3d706b2e65794a31496a6f696233426c626d3168634852706247567a4969776959534936496d4e70646e593365544a785a7a41774d474d796233427064574a6d616a63784e7a636966512e685031427863786c644968616b4d6350534a4c513151"
},
{
"id": "klokantech-basic",
"title": "Klokantech Basic",
"url": "https://openmaptiles.github.io/klokantech-basic-gl-style/style-cdn.json",
"url": "https://rawgit.com/openmaptiles/klokantech-basic-gl-style/gh-pages/style-cdn.json",
"thumbnail": "https://camo.githubusercontent.com/5cf548fdb9fc606f4a452d14fd2a7a959155fd40/68747470733a2f2f6170692e6d6170626f782e636f6d2f7374796c65732f76312f6d6f7267656e6b61666665652f63697578757465726630316135326971716f366b6f6c776b312f7374617469632f382e3534303538372c34372e3337303535352c31342e30382c302e30302c302e30302f363030783430303f6163636573735f746f6b656e3d706b2e65794a31496a6f69625739795a3256756132466d5a6d566c4969776959534936496a497a636d4e304e6c6b6966512e304c52544e6743632d656e76743964354d7a52373577"
},
{
"id": "fiord-color",
"title": "Fiord Color",
"url": "https://openmaptiles.github.io/fiord-color-gl-style/style-cdn.json",
"url": "https://rawgit.com/openmaptiles/fiord-color-gl-style/gh-pages/style-cdn.json",
"thumbnail": "https://camo.githubusercontent.com/605f2edc30e413b37d16a6ca1d500f265725d76d/68747470733a2f2f6170692e6d6170626f782e636f6d2f7374796c65732f76312f6f70656e6d617074696c65732f6369776775693378353030317732706e7668633063327767302f7374617469632f31302e3938373235382c34362e3435333135302c332e30322c302e30302c302e30302f363030783430303f6163636573735f746f6b656e3d706b2e65794a31496a6f696233426c626d3168634852706247567a4969776959534936496d4e70646e593365544a785a7a41774d474d796233427064574a6d616a63784e7a636966512e685031427863786c644968616b4d6350534a4c513151"
},
{
"id": "toner",
"title": "Toner",
"url": "https://openmaptiles.github.io/toner-gl-style/style-cdn.json",
"url": "https://rawgit.com/openmaptiles/toner-color-gl-style/gh-pages/style-cdn.json",
"thumbnail": "https://cloud.githubusercontent.com/assets/1288339/21422755/86ebe96e-c839-11e6-8337-42742dfe34a2.png"
}
]