diff --git a/src/components/fields/PropertyGroup.jsx b/src/components/fields/PropertyGroup.jsx index c699f10..fb460de 100644 --- a/src/components/fields/PropertyGroup.jsx +++ b/src/components/fields/PropertyGroup.jsx @@ -56,7 +56,6 @@ export default class PropertyGroup extends React.Component { padding: margins[2], paddingRight: 0, backgroundColor: colors.black, - marginBottom: margins[2], }}> {fields} diff --git a/src/components/layers/LayerSettings.jsx b/src/components/layers/LayerSettings.jsx index 32f74af..43c6904 100644 --- a/src/components/layers/LayerSettings.jsx +++ b/src/components/layers/LayerSettings.jsx @@ -21,7 +21,6 @@ class LayerSettings extends React.Component { padding: margins[2], paddingRight: 0, backgroundColor: colors.black, - marginBottom: margins[2], }}> { if (!error && response.statusCode == 200) { - const mapStyle = JSON.parse(body) + const mapStyle = style.ensureMetadataExists(JSON.parse(body)) console.log('Loaded style ', mapStyle.id) this.props.onStyleOpen(mapStyle) } else { diff --git a/src/config/styles.json b/src/config/styles.json index 58f67a4..89ced2c 100644 --- a/src/config/styles.json +++ b/src/config/styles.json @@ -1,4 +1,10 @@ [ + { + "id": "klokantech-basic", + "title": "Klokantech Basic", + "url": "https://rawgit.com/openmaptiles/klokantech-basic-gl-style/gh-pages/style-cdn.json", + "thumbnail": "https://camo.githubusercontent.com/5cf548fdb9fc606f4a452d14fd2a7a959155fd40/68747470733a2f2f6170692e6d6170626f782e636f6d2f7374796c65732f76312f6d6f7267656e6b61666665652f63697578757465726630316135326971716f366b6f6c776b312f7374617469632f382e3534303538372c34372e3337303535352c31342e30382c302e30302c302e30302f363030783430303f6163636573735f746f6b656e3d706b2e65794a31496a6f69625739795a3256756132466d5a6d566c4969776959534936496a497a636d4e304e6c6b6966512e304c52544e6743632d656e76743964354d7a52373577" + }, { "id": "dark-matter", "title": "Dark Matter", @@ -17,12 +23,6 @@ "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://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", diff --git a/src/libs/stylestore.js b/src/libs/stylestore.js index 6557b0f..0094874 100644 --- a/src/libs/stylestore.js +++ b/src/libs/stylestore.js @@ -1,5 +1,7 @@ import { colorizeLayers } from './style.js' import style from './style.js' +import publicSources from '../config/styles.json' +import request from 'request' const storagePrefix = "maputnik" const stylePrefix = 'style' @@ -8,27 +10,22 @@ const storageKeys = { accessToken: [storagePrefix, 'access_token'].join(':') } -const defaultStyleUrl = "https://raw.githubusercontent.com/osm2vectortiles/mapbox-gl-styles/master/styles/basic-v9-cdn.json" +const defaultStyleUrl = publicSources[0].url + // Fetch a default style via URL and return it or a fallback style via callback export function loadDefaultStyle(cb) { - console.log('Load default style') - var request = new XMLHttpRequest() - request.open('GET', defaultStyleUrl, true) - - request.onload = () => { - if (request.status >= 200 && request.status < 400) { - cb(style.ensureMetadataExists(JSON.parse(request.responseText))) - } else { - cb(style.emptyStyle) - } - } - - request.onerror = function() { - console.log('Could not fetch default style') - cb(style.emptyStyle) - } - - request.send() + console.log('Falling back to default style') + request({ + url: defaultStyleUrl, + withCredentials: false, + }, (error, response, body) => { + if (!error && response.statusCode == 200) { + cb(style.ensureMetadataExists(JSON.parse(body))) + } else { + console.warn('Could not fetch default style', styleUrl) + cb(style.emptyStyle) + } + }) } // Return style ids and dates of all styles stored in local storage @@ -99,16 +96,17 @@ export class StyleStore { // Find the last edited style latestStyle(cb) { - if(this.mapStyles.length === 0) return cb(style.emptyStyle) + if(this.mapStyles.length === 0) return loadDefaultStyle(cb) const styleId = window.localStorage.getItem(storageKeys.latest) const styleItem = window.localStorage.getItem(styleKey(styleId)) if(styleItem) return cb(JSON.parse(styleItem)) - cb(style.emptyStyle) + loadDefaultStyle(cb) } // Save current style replacing previous version save(mapStyle) { + mapStyle = style.ensureMetadataExists(mapStyle) const key = styleKey(mapStyle.id) window.localStorage.setItem(key, JSON.stringify(mapStyle)) window.localStorage.setItem(storageKeys.latest, mapStyle.id)