Download style when open from gallery

src/components/Button.jsx

@@ -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,
   }
 

src/components/Toolbar.jsx

@@ -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={{

src/components/modals/Modal.jsx

@@ -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() {

src/components/modals/OpenModal.jsx

@@ -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={{
+      <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>

src/components/modals/SettingsModal.jsx

@@ -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"}>

src/components/modals/SourcesModal.jsx

@@ -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>

src/config/styles.json

@@ -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"
   }
 ]