diff --git a/src/components/modals/OpenModal.jsx b/src/components/modals/OpenModal.jsx
index 84b4e92..0f33347 100644
--- a/src/components/modals/OpenModal.jsx
+++ b/src/components/modals/OpenModal.jsx
@@ -46,7 +46,20 @@ class OpenModal extends React.Component {
onStyleOpen: React.PropTypes.func.isRequired,
}
+ constructor(props) {
+ super(props);
+ this.state = {};
+ }
+
+ clearError() {
+ this.setState({
+ error: null
+ })
+ }
+
onStyleSelect(styleUrl) {
+ this.clearError();
+
request({
url: styleUrl,
withCredentials: false,
@@ -64,15 +77,32 @@ class OpenModal extends React.Component {
onUpload(_, files) {
const [e, file] = files[0];
const reader = new FileReader();
+
+ this.clearError();
+
reader.readAsText(file, "UTF-8");
reader.onload = e => {
- let mapStyle = JSON.parse(e.target.result)
+ let mapStyle;
+ try {
+ mapStyle = JSON.parse(e.target.result)
+ }
+ catch(err) {
+ this.setState({
+ error: err.toString()
+ });
+ return;
+ }
mapStyle = style.ensureStyleValidity(mapStyle)
this.props.onStyleOpen(mapStyle);
}
reader.onerror = e => console.log(e.target);
}
+ onOpenToggle() {
+ this.clearError();
+ this.props.onOpenToggle();
+ }
+
render() {
const styleOptions = publicStyles.map(style => {
return
Upload a JSON style from your computer.
@@ -96,7 +137,7 @@ class OpenModal extends React.Component {
Open one of the publicly available styles to start from.
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index 4ea6832..387b3e9 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -12,3 +12,10 @@
@include vendor-prefix(flex-direction, row);
}
+
+@mixin flex-column {
+ display: flex;
+ display: -ms-flexbox;
+
+ @include vendor-prefix(flex-direction, column);
+}
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index b70b475..69ee2e4 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -10,6 +10,17 @@
.maputnik-modal-section {
padding-top: $margin-3;
padding-bottom: $margin-3;
+
+ /* Bug fix: