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) { defaultSource(mode) {
const source = (this.state || {}).source || {} const source = (this.state || {}).source || {}
const {protocol} = window.location;
switch(mode) { switch(mode) {
case 'geojson_url': return { case 'geojson_url': return {
type: 'geojson', type: 'geojson',
data: 'http://localhost:3000/geojson.json' data: `${protocol}//localhost:3000/geojson.json`
} }
case 'geojson_json': return { case 'geojson_json': return {
type: 'geojson', type: 'geojson',
@ -123,31 +125,31 @@ class AddSource extends React.Component {
} }
case 'tilejson_vector': return { case 'tilejson_vector': return {
type: 'vector', type: 'vector',
url: source.url || 'http://localhost:3000/tilejson.json' url: source.url || `${protocol}//localhost:3000/tilejson.json`
} }
case 'tilexyz_vector': return { case 'tilexyz_vector': return {
type: 'vector', 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, minZoom: source.minzoom || 0,
maxZoom: source.maxzoom || 14 maxZoom: source.maxzoom || 14
} }
case 'tilejson_raster': return { case 'tilejson_raster': return {
type: 'raster', type: 'raster',
url: source.url || 'http://localhost:3000/tilejson.json' url: source.url || `${protocol}//localhost:3000/tilejson.json`
} }
case 'tilexyz_raster': return { case 'tilexyz_raster': return {
type: 'raster', 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, minzoom: source.minzoom || 0,
maxzoom: source.maxzoom || 14 maxzoom: source.maxzoom || 14
} }
case 'tilejson_raster-dem': return { case 'tilejson_raster-dem': return {
type: 'raster-dem', type: 'raster-dem',
url: source.url || 'http://localhost:3000/tilejson.json' url: source.url || `${protocol}//localhost:3000/tilejson.json`
} }
case 'tilexyz_raster-dem': return { case 'tilexyz_raster-dem': return {
type: 'raster-dem', 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, minzoom: source.minzoom || 0,
maxzoom: source.maxzoom || 14 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() { render() {
return <div className="maputnik-add-source"> 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."}> <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> </InputBlock>
<SourceTypeEditor <SourceTypeEditor
onChange={src => this.setState({ source: src })} onChange={this.onChangeSource}
mode={this.state.mode} mode={this.state.mode}
source={this.state.source} source={this.state.source}
/> />
{this.state.error &&
<div className="maputnik-add-source-error" style={{fontSize: "12px", color: "#E57373"}}>
Error: {this.state.error}
</div>
}
<Button <Button
className="maputnik-add-source-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 Add Source
</Button> </Button>
</div> </div>