30 lines
1.0 KiB
Plaintext
30 lines
1.0 KiB
Plaintext
|
<map>
|
||
|
|
|
||
|
|
<iframe if={urlMap != ''} ref="mymap" width="{ opts.width }" height="{ opts.height }" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src={ urlMap } style="border: 1px solid black"></iframe>
|
||
|
|
|
||
|
|
// Variables
|
||
|
|
this.items = opts.items
|
||
|
|
this.address = opts.address
|
||
|
|
this.region = opts.region
|
||
|
|
this.delay = opts.delay
|
||
|
|
this.urlMap = ''
|
||
|
|
let that = this
|
||
|
|
|
||
|
|
// Get lat and log
|
||
|
|
axios.get(`https://nominatim.openstreetmap.org/search?q=${this.address},${this.region}&format=json`)
|
||
|
|
.then(function (response) {
|
||
|
|
let lat = response.data[0].lat
|
||
|
|
let lon = response.data[0].lon
|
||
|
|
let boundingbox = response.data[0].boundingbox
|
||
|
|
// Show map
|
||
|
|
that.urlMap = `https://www.openstreetmap.org/export/embed.html?bbox=${boundingbox[2]}%2C${boundingbox[0]}%2C${boundingbox[3]}%2C${boundingbox[1]}&layer=mapnik&marker=${lat}%2C${lon}`
|
||
|
|
// Update iframe
|
||
|
|
that.update()
|
||
|
|
})
|
||
|
|
.catch(function (error) {
|
||
|
|
// handle error
|
||
|
|
console.log(error)
|
||
|
|
})
|
||
|
|
|
||
|
|
</map>
|