Hi
I am going to implement a popup message for a device using "MapView:".
How can I implement it?

Thank you

Hello.
If you want to embed map with marker(track) to your page you can use iframe and postMessage api.
Basic examle:

<script>
    function send () {
        var cmd = { "clear": "all", "namedmarkers": { "markername": { "title": "Marker title", "appendpoints": [[53.90557, 27.45642], [53.90951, 27.45633], [53.91391, 27.45968], [53.91695, 27.46904], [53.91573, 27.47599], [53.91422, 27.46784], [53.91179, 27.46285], [53.91235, 27.46751], [53.91170, 27.47155], [53.90973, 27.46262], [54.844636600000015, 21.426025400000015]], "label": "markerlabel" } } }
        document.getElementById('map').contentWindow.postMessage(`MapView|cmd:${JSON.stringify(cmd)}`, '*')
    }
    window.addEventListener('message', function (event) {
        console.log(event)
        if (typeof event.data === 'string' && event.data.indexOf('MapView|') === 0) {
            var cmd = {}
            try {
                cmd = JSON.parse(event.data.replace('MapView|state:', ''))
            } catch (e) {
            }
            if (cmd.ready) {
                send()
            }
        }
    })
</script>
<iframe id="map" src="https://flespi.io/mapview/" frameborder="0" style="height:500px;width:100%" allowfullscreen></iframe>

More command examples you can find on https://flespi.io/mapview/#/example

Hi dexif
Thank you for letting me know.
I got an idea.
😀

    Hi @dexif
    I need to implement many markers not only for one.
    "namedmarkers": { "markername": { "title": "Marker title", "appendpoints": [[53.90557, 27.45642]], "label": "markerlabel" } }
    This key is namemarkers, but it doesn't support an array.
    Could you let me know how I can implement several markers?
    Thanks

      "namedmarkers": { 
  "markername": { 
    "title": "Marker title", 
    "appendpoints": [[53.90557, 27.45642]], 
    "label": "markerlabel" 
  }, 
  "markername2": { 
    "title": "Marker title2", 
    "appendpoints": [[63.90557, 26.45642]], 
    "label": "markerlabel2" 
  }
}

      If you want just update marker position you can send only new position

      "namedmarkers": { 
  "markername": { 
    "appendpoints": [[53.90557, 27.45642]]
  }, 
  "markername2": {
    "appendpoints": [[63.90557, 26.45642]]
  }
}

        Okay, thanks. I got it.
        Just I want to make the label as something description including line break, etc.
        Can I do it? 😀

          meanking I have updated the mapview. Now you can use <br> for line break. ;)

              Oh, really?
              That's really great!
              Thank you 😃

                Write a Reply...