After clicking on the marker, map moves to some direction. #59

AndreyPatseiko · 2024-09-24T13:21:18Z

I want to use couple maps in the same page.
But have strange behaviour when click to the marker in the second map. Map is moving to the top.

STR:

Run code below
Click to an any marker in the second map.
Map will be moved to the top - BUG.
Also you can rotate and zoom map, and then click to an any marker in the second map. And map will be moved to some direction.

<!doctype html>
<html>
    <head>
        <title>leaflet-rotate.js</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

        <!-- Leaflet JS / CSS -->
        <script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />

        <!-- Leaflet-Rotate -->
        <script src="https://unpkg.com/[email protected]/dist/leaflet-rotate-src.js"></script>

        <!-- include some miscellaneous -->
        <script src="https://unpkg.com/[email protected]/misc/route.js"></script>
        <script src="https://unpkg.com/[email protected]/misc/places.js"></script>
        <script src="https://unpkg.com/[email protected]/misc/loremIpsum.js"></script>
        <script src="https://unpkg.com/[email protected]/lib/debug.js"></script>

        <style>
            #map,
            #map2 {
                width: 100%;
                height: 600px;
                border: 1px solid #ccc;
                max-height: 50vh;
            }
            /* TODO: fix incorrect map corners position when map has some margin */
            html,
            body {
                /* margin: 0; */
                /* padding: 0; */
            }
        </style>
    </head>

    <body>
        <div id="map"></div>

        <div id="map2"></div>

        <script>
            var esri = L.tileLayer(
                'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
                {
                    id: 'mapbox.streets',
                    maxZoom: 24,
                    maxNativeZoom: 18,
                    attribution:
                        'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
                },
            );

            var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 24,
                maxNativeZoom: 19,
                attribution: '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
            });

            var map = L.map('map', {
                center: [55, 10],
                zoom: 2,
                layers: [esri],
                rotate: true,
                rotateControl: {
                    closeOnZeroBearing: false,
                },
                bearing: 30,
                touchRotate: true,
            });

            var layers = L.control
                .layers(
                    {
                        Empty: L.tileLayer(''),
                        Streets: osm,
                        Satellite: esri,
                    },
                    null,
                    {
                        collapsed: false,
                    },
                )
                .addTo(map);

            var markers = [];
            for (var i in places) {
                markers.push(
                    L.marker(places[i], {
                        draggable: true,
                    })
                        .bindPopup('<b>' + i + '</b><br>' + loremIpsum)
                        .bindTooltip(
                            '<b>' + i + '</b>',
                            markers.length
                                ? {}
                                : {
                                      direction: 'right',
                                      permanent: true,
                                  },
                        )
                        .addTo(map),
                );
            }
        </script>

        <script>
            var esri = L.tileLayer(
                'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
                {
                    id: 'mapbox.streets',
                    maxZoom: 24,
                    maxNativeZoom: 18,
                    attribution:
                        'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
                    // noWrap: true
                },
            );

            var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 24,
                maxNativeZoom: 19,
                attribution: '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
                // noWrap: true
            });

            var map = L.map('map2', {
                center: [55, 10],
                zoom: 2,
                layers: [esri],
                rotate: true,
                rotateControl: {
                    closeOnZeroBearing: false,
                },
                bearing: 30,
                touchRotate: true,
            });

            var layers = L.control
                .layers(
                    {
                        Empty: L.tileLayer(''),
                        Streets: osm,
                        Satellite: esri,
                    },
                    null,
                    {
                        collapsed: false,
                    },
                )
                .addTo(map);

            var markers = [];
            for (var i in places) {
                markers.push(
                    L.marker(places[i], {
                        draggable: true,
                    })
                        .bindPopup('<b>' + i + '</b><br>' + loremIpsum)
                        .bindTooltip(
                            '<b>' + i + '</b>',
                            markers.length
                                ? {}
                                : {
                                      direction: 'right',
                                      permanent: true,
                                  },
                        )
                        .addTo(map),
                );
            }
        </script>
    </body>
</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

After clicking on the marker, map moves to some direction. #59

After clicking on the marker, map moves to some direction. #59

AndreyPatseiko commented Sep 24, 2024

After clicking on the marker, map moves to some direction. #59

After clicking on the marker, map moves to some direction. #59

Comments

AndreyPatseiko commented Sep 24, 2024