diff --git a/src/components/modals/SourcesModal.jsx b/src/components/modals/SourcesModal.jsx
index 2d5c8ba..ad66243 100644
--- a/src/components/modals/SourcesModal.jsx
+++ b/src/components/modals/SourcesModal.jsx
@@ -112,10 +112,12 @@ class AddSource extends React.Component {
 
   defaultSource(mode) {
     const source = (this.state || {}).source || {}
+    const {protocol} = window.location;
+
     switch(mode) {
       case 'geojson_url': return {
         type: 'geojson',
-        data: 'http://localhost:3000/geojson.json'
+        data: `${protocol}//localhost:3000/geojson.json`
       }
       case 'geojson_json': return {
         type: 'geojson',
@@ -123,31 +125,31 @@ class AddSource extends React.Component {
       }
       case 'tilejson_vector': return {
         type: 'vector',
-        url: source.url || 'http://localhost:3000/tilejson.json'
+        url: source.url || `${protocol}//localhost:3000/tilejson.json`
       }
       case 'tilexyz_vector': return {
         type: 'vector',
-        tiles: source.tiles || ['http://localhost:3000/{x}/{y}/{z}.pbf'],
+        tiles: source.tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
         minZoom: source.minzoom || 0,
         maxZoom: source.maxzoom || 14
       }
       case 'tilejson_raster': return {
         type: 'raster',
-        url: source.url || 'http://localhost:3000/tilejson.json'
+        url: source.url || `${protocol}//localhost:3000/tilejson.json`
       }
       case 'tilexyz_raster': return {
         type: 'raster',
-        tiles: source.tiles || ['http://localhost:3000/{x}/{y}/{z}.pbf'],
+        tiles: source.tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
         minzoom: source.minzoom || 0,
         maxzoom: source.maxzoom || 14
       }
       case 'tilejson_raster-dem': return {
         type: 'raster-dem',
-        url: source.url || 'http://localhost:3000/tilejson.json'
+        url: source.url || `${protocol}//localhost:3000/tilejson.json`
       }
       case 'tilexyz_raster-dem': return {
         type: 'raster-dem',
-        tiles: source.tiles || ['http://localhost:3000/{x}/{y}/{z}.pbf'],
+        tiles: source.tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
         minzoom: source.minzoom || 0,
         maxzoom: source.maxzoom || 14
       }
@@ -155,6 +157,18 @@ class AddSource extends React.Component {
     }
   }
 
+  onAdd = () => {
+    this.props.onAdd(this.state.sourceId, this.state.source);
+  }
+
+  onChangeSource = (source) => {
+    // let error = "CORs policy won't allow fetching resources served over http from https";
+    this.setState({
+      source,
+      error,
+    });
+  }
+
   render() {
     return <div className="maputnik-add-source">
       <InputBlock label={"Source ID"} doc={"Unique ID that identifies the source and is used in the layer to reference the source."}>
@@ -180,13 +194,20 @@ class AddSource extends React.Component {
         />
       </InputBlock>
       <SourceTypeEditor
-        onChange={src => this.setState({ source: src })}
+        onChange={this.onChangeSource}
         mode={this.state.mode}
         source={this.state.source}
       />
+      {this.state.error &&
+        <div className="maputnik-add-source-error" style={{fontSize: "12px", color: "#E57373"}}>
+          Error: {this.state.error}
+        </div>
+      }
       <Button
         className="maputnik-add-source-button"
-				onClick={() => this.props.onAdd(this.state.sourceId, this.state.source)}>
+				onClick={this.onAdd}
+        disabled={!!this.state.error}
+      >
         Add Source
       </Button>
     </div>