[Changelog] MapView

dexif

We will post MapView changes here

dexif

0.1.0
[feature] By default, the zoom controls are hidden. Use the command to activate.
[feature] Added the ability to add and remove polygons.

dexif

0.1.1
[feature] markers for start/stop positions of routes. To disable it use: MapView|cmd:{"showstartstop":false}
[feature] new style for markers

dexif

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.

dexif

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

dexif

0.1.4
[feature] new styles for start/stop pins

dexif

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

dexif

0.2.2
- Added autobounds command
  cmd:{"autobounds": true}
- Added centermap command
  cmd:{"centermap": [53.90557,27.45642]}
- Added zoommap command
  cmd:{"zoommap": 10}

dexif

0.3.0
- Added direction, addpoints, setpoints, label, title parameters for named markers

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

dexif

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

dexif

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

dexif

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

dexif

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

dexif

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

dexif

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

dexif

0.7.3
Draw/Edit tools

Polygon
Polygon command example
```
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
Corridor command example
```
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
Circle command example
```
MapView|cmd:{"circles": {"test":{"center":{"lat":53.90557,"lon":27.45642}, "radius":10000, "color": "red", "edit": true, "editable": true, "deletable": true}}}
```

Change tiles source

Outline map tiles command example

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

Satellite view tiles command example

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

Openstreetmaps tiles command example

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