Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

mstdmstd's avatar

How with leaflet show with polylines on marker points

Hello, In my Laravel 6/blade/jquery 3/leaflet / turf app I need to 1)show set of markers and 2) to join them with polylines. Next I need 3) when user click on map to define is it polyline area and if yes 4) show popup action menu and with “Add item” option selected to 5) split points on edge of selected polyline into 2 polylines and 1 more marker. I make it as :

        const points = [
            {title:'title #1 ', lat:52.509, lng:-3.08},
            {title:'title #2 ', lat:51.503, lng:-1.06},
            {title:'title #3 ', lat:49.51, lng:-2.47}
        ];

        var mymap = L.map('mapid').setView([51.505, -0.09], 7);

        var popup = L.popup();

        function onMapClick(e) {
            popup
                .setLatLng(e.latlng)
                .setContent("You clicked the map at " + e.latlng.toString())
                .openOn(mymap);
        }

        mymap.on('click', onMapClick);

        drawPoints()
        function drawPoints() {
            points.forEach(point => {
                const latlngs = L.marker([point.lat, point.lng]).addTo(mymap)
                    .bindPopup(point.title);//.openPopup();

                // const ret= L.polyline(latlngs, { color: 'red' }).addTo(mymap)
                // var polyline = new L.Polyline(latlngs, {
                //     weight: 10, // THIS WAY DOES NOT WORK TOO
                // }).addTo(mymap);
                var polyline = new L.Polyline(point.lat, point.lng, {
                    weight: 10,
                }).addTo(mymap);
            })
        } // function drawPoints () {

As result I have set of markers, but not polylines between markers. How to show polylines and please give hints how to make steps 3), 4), 5)must be done with which methods?

Thanks!

0 likes
2 replies
mstdmstd's avatar

I found how step 2 can be done :

            points.forEach(point => {
                const latlngs = L.marker([point.lat, point.lng]).addTo(mymap)
                    .bindPopup(point.title);//.openPopup();
                polylinePoints[polylinePoints.length]=[point.lat, point.lng]
            })

            var polyline = L.polyline(polylinePoints, {color: 'red'}).addTo(mymap);
            mymap.fitBounds(polyline.getBounds());

Any hints as for steps 3,4,5, please.

celltracksfind's avatar

When you have determined the fundamental components for a following procedure, click on the catch and let the framework works. You can follow the headway of the operational framework through a board that will keep you educated on the status of each continuous activity. The conclusion of the following experiences a character confirmation to ensure the https://imei-tracker.online/ client is doing everything by the law and isn't bargaining the security of others. When finished, the client is naturally diverted to a guide that shows the border where the telephone may be founded on past estimations.

Please or to participate in this conversation.