• dexif

  • Post #4
  • Edited
0.1.2
[feature] fullscreen mode button. Disabled by default. To enable use: MapView|cmd:{"fullscreencontrol":true}

To allow this feature please add attribute "allowfullscreen" to iframe.

0.1.3
[feature] Route direction. Enabled by default. To disable use: MapView|cmd:{"routedirection":false}

0.1.4
[feature] new styles for start/stop pins

    a year later
    0.2.0
- Added named markers with cumulative tail
- Salt for commands by route parameter
    Example: 
        Iframe uri: https://flespi.io/mapview/index.html#/salt/78985d8a 
        Commands will be like: MapView-78985d8a|cmd:{...}
- Sandbox updated

    https://flespi.io/mapview/#/example

    2 months later
    0.2.2
- Added autobounds command
  cmd:{"autobounds": true}
- Added centermap command
  cmd:{"centermap": [53.90557,27.45642]}
- Added zoommap command
  cmd:{"zoommap": 10}
    22 days later

    • dexif

    • Post #9
    • Edited
    0.3.0
- Added direction, addpoints, setpoints, label, title parameters for named markers

    You can try it on https://flespi.io/mapview/#/example

    a month later

    • dexif

    • Post #10
    • Edited
    0.4.0
- Added color for named markers
- Added markercolor (default color for named markers)
- Added trackcolor (default color for tracks)
- Fix for marker direction

    You can try it on https://flespi.io/mapview/#/example

      3 months later

      0.5.0

      - Added the ability to snap a raster plans to map

      You can use it for example to show unit positions on building plans (indoor monitoring with ble beacons).
      Or you can add old maps as a layer
      Usage example available on https://flespi.io/mapview/#/example

      23 days later

      • dexif

      • Post #12
      • Edited

      You can now use the ruler on the map to measure distance.
      To enable ruler functionality you should send ruler: true command to mapview.

      This functionality already available in

      • Panel -> Device -> Telemetry tab
      • Toolbox -> Device -> Map
      • Toolbox -> Calculator -> Intervals

      6 days later

      A simple example to get started using MapView:

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

      Also you can read article about mapview

        a month later

        Added popup for named markers

        MapView|cmd:{"namedmarkers": {"test":{"latlng":[53.9065366,27.4618254], "direction": 354, "color": "#f0f", "label": "label", "popup":"Popup that opens by clicking on a pin"}}}

        a month later
        0.6.4
Now you can apply some styles to the dot markers:
MapView|cmd:{"dotcolor": "#006600", "dotradius": 10, "dotsolid": true}
        a month later

        0.7.3
        Draw/Edit tools

        • Polygon

          MapView|cmd:{"polygons": {"test":{"path":[{"lat":53.90557,"lon":27.45642},{"lat":53.9,"lon":27.4},{"lat":53.9,"lon":27.3},{"lat":53.7,"lon":27.3}], "color": "red", "edit": true, "editable": true, "deletable": true}}}

        • Corridor

          MapView|cmd:{"corridors": {"test":{"path":[{"lat":53.90557,"lon":27.45642},{"lat":53.9,"lon":27.4},{"lat":53.9,"lon":27.3},{"lat":53.7,"lon":27.3}], "width": 100, "color": "red", "edit": true, "editable": true, "deletable": true}}}

        • Circle

          MapView|cmd:{"circles": {"test":{"center":{"lat":53.90557,"lon":27.45642}, "radius":10000, "color": "red", "edit": true, "editable": true, "deletable": true}}}

        Change tiles source

        MapView|cmd:{"url": "http://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png"}

        MapView|cmd:{"url": "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"}

        MapView|cmd:{"url": "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"}

        a year later
        0.9.3 
- hidecontrols command added
Example:
MapView|cmd:{"hidecontrols": true}
        2 years later
        0.9.11
- fix corridor linecap

        =>

        2 months later
        0.10.0
Now you can pass any command in the url using the cmd query parameter (json or base64 encoded json)

        Example

          Write a Reply...