diff --git a/public/themes/classic.css b/public/themes/classic.css index 50d0c5e..81fecbe 100644 --- a/public/themes/classic.css +++ b/public/themes/classic.css @@ -534,9 +534,11 @@ r4-channel-slug { r4-avatar-update { & fieldset { justify-content: center; + align-items: center; } & legend { text-align: center; + width: 100%; } } diff --git a/src/components/r4-map-position.js b/src/components/r4-map-position.js index a2086e8..57ac1ee 100644 --- a/src/components/r4-map-position.js +++ b/src/components/r4-map-position.js @@ -16,17 +16,20 @@ export default class R4MapPosition extends LitElement { } get mapChannels() { - return [ - { - ...this.channel, - }, - { + const channels = [] + if (this.channel.longitude) { + channels.push(this.channel) + } + + if (this.newLongitude && this.newLatitude) { + channels.push({ ...this.channel, title: `New position for ${this.channel.slug}`, longitude: this.newLongitude, latitude: this.newLatitude, - }, - ] + }) + } + return channels } onMapClick(event) { diff --git a/src/components/r4-map.js b/src/components/r4-map.js index 6dc18c9..97a7e28 100644 --- a/src/components/r4-map.js +++ b/src/components/r4-map.js @@ -64,12 +64,16 @@ export default class R4Map extends LitElement { this.longitude = 0 this.latitude = 0 this.markers = [] + this.zoom = 1 } async firstUpdated() { this.createMap() this.isReady = true - this.zoom = !this.zoom && this.longitude ? 6 : 2 + + if (!this.zoom) { + this.zoom = 1 + } // Fetch channels and set markers for each. if (!this.channels) { @@ -115,12 +119,14 @@ export default class R4Map extends LitElement { const rasterLayer = new TileLayer({ source: new OSM(), }) + + console.log(this.channels) this.map = new Map({ target: this.querySelector('main'), layers: [rasterLayer], view: new View({ center: [this.longitude, this.latitude], - zoom: this.zoom || 8, + zoom: this.zoom, }), overlays: [this.overlay], })