fuse-open / fuselibs

Fuselibs is the Uno-libraries that provide the UI framework used in Fuse apps
https://npmjs.com/package/@fuse-open/fuselibs
MIT License
176 stars 72 forks source link

MapView shapshot and show all markers #1395

Closed ichan-mb closed 3 years ago

ichan-mb commented 3 years ago

Added two scriptclass functions, snapshot for taking an image of the current MapView display and showAllMarkers to zoom MapView to the particular position where all of the markers is visible on the MapView

Examples:

<App>
    <ClientPanel>
        <JavaScript>
            var Observable = require('FuseJS/Observable')
            var snapshotImage = new Observable()
            var Map = map;
            module.exports = {
                snapshotImage,
                showAllMarkers: function(args) {
                    Map.showAllMarkers();
                },
                takeSnapshot: function(args) {
                    Map.snapshot().then(function (path) {
                        snapshotImage.value = path;
                    })
                }
            };
        </JavaScript>
        <DockLayout />
        <NativeViewHost Dock="Top" Height="250">
            <MapView ux:Name="map" Zoom="14" Latitude="-6.914742" Longitude="107.609820">
                <MapMarker Latitude="-6.914742" Longitude="107.609820" />
                <MapMarker Latitude="-6.915850" Longitude="107.609929" />
                <MapMarker Latitude="-6.916959" Longitude="107.619009" />
            </MapView>
        </NativeViewHost>
        <Panel>
            <StackPanel ux:Name="stack" ItemSpacing="10" Orientation="Vertical">
                <Button Text="Show Markers" Clicked="{showAllMarkers}" />
                <Button Text="Snapshot" Clicked="{takeSnapshot}" />
            </StackPanel>
        </Panel>
        <Panel Dock="Bottom">
            <StackPanel ux:Name="a" ItemSpacing="10" Orientation="Vertical">
                <Image Size="200" File="{snapshotImage}" StretchMode="Uniform" />
                <Text Value="{snapshotImage}" />
            </StackPanel>
        </Panel>
    </ClientPanel>
</App>

This PR contains:

mortend commented 3 years ago