oda-framework/components/viewers/leaflet/index.html

It's an ES Progressive Framework based on the technology of Web Components and designed especially for creating custom UI/UX of any complexity for web and cross-platform PWA mobile applications.

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ODA leaflet</title>
<style>
    html,
    body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        color: gray;
        font-family: Arial;
    }
</style>

<oda-leaflet-test ~props="data" style="width: 100%; height: 100%;"></oda-leaflet-test>

<script type="module">
    import '../../../oda.js';
    import './leaflet.js'

    ODA({ is: 'oda-leaflet-test', template: `
            <oda-leaflet ~props="data"></oda-leaflet>
        `,
        $public: {
            data: {
                latitude: 54.630627,
                longitude: 39.739861,
                zoom: 12,
                markers: [
                    {
                        latitude: 54.630627,
                        longitude: 39.739861,
                        bindPopup: '<b>Hello world !!!</b><br>I am a Ryazan city.'
                    }
                ],
                polygons: [
                    {
                        polygons: [[54.666187, 39.733772], [54.664499, 39.736862], [54.669662, 39.767418], [54.680183, 39.7542], [54.674129, 39.738235]],
                        bindPopup: 'I am a Lukovsky forest.',
                        args: { color: 'green', fillColor: '#0f3', fillOpacity: 0.5 },
                    }
                ],
                circles: [
                    {
                        latitude: 54.610627,
                        longitude: 39.729861,
                        args: { color: 'red', fillColor: '#f03', fillOpacity: 0.5, radius: 500 },
                        bindPopup: 'I am a Central Park of Culture and Leisure.'
                    }
                ],
                polylines: [
                    {
                        polylines: [[54.630627, 39.739861], [54.610627, 39.729861]],
                        bindPopup: 'I am a distance.',
                        args: { color: 'blue' },
                    }
                ],
            }
        }
    })
</script>