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