Added default protocol and stub in error.

This commit is contained in:
orangemug 2019-10-27 10:00:22 +00:00
parent c588164190
commit 663f295623

View file

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