1

I am working with the simple app Beta Here

The application is using leaflet plugins/api....

User draw a line(poly-line) on the map/image and then enter the distance between two points....

Working

Getting the input from user is to set the reference for that particular picture which will be used later on... now after clicking button "load work place" will lead user to new view where he/she can draw or put rectangles on the base of reference distance we have taken first...

Problem

sometimes the distance/area of any shape drawn (according to reference distance) is perfect, sometimes nearly correct, sometimes incorrect and sometimes foolishly incorrect ....that means different distances for different image parts....

Script

<script type="text/javascript">
        var userDistanceVal;
        $(function () {
            $(document).on('click', '#clickme', function () {
                var userInputss = document.getElementById("userDistance").value;
                //alert(userInputss);
                var calcThis = userDistanceVal / userInputss;
                //alert(calcThis);
                $('#inputDiv').hide();
                $('#map').show();
                $(function loadControls() {
                    alert('controls are being loaded');
                    var map = L.map('map', {
                        minZoom: 1,
                        maxZoom: 4,
                        center: [0, 0],
                        zoom: 1,
                        crs: L.CRS.Simple
                    });
                    // dimensions of the image
                    var w = 3200,
                        h = 1900,
                        url = 'assets/img/isbimg.jpg';
                    // calculate the edges of the image, in coordinate space
                    var southWest = map.unproject([0, h], map.getMaxZoom() - 1);
                    var northEast = map.unproject([w, 0], map.getMaxZoom() - 1);
                    var bounds = new L.LatLngBounds(southWest, northEast);

                    var featureGroup = L.featureGroup().addTo(map);

                    var drawControl = new L.Control.Draw({
                        edit: {
                            featureGroup: featureGroup
                        },
                        draw: {
                            polygon: true,
                            polyline: true,
                            rectangle: true,
                            circle: false,
                            marker: false,
                            measureControl: true
                        }
                    }).addTo(map);

                    map.on('draw:created', showPolygonArea);
                    map.on('draw:edited', showPolygonAreaEdited);


                    // add the image overlay,
                    // so that it covers the entire map
                    L.imageOverlay(url, bounds).addTo(map);

                    // tell leaflet that the map is exactly as big as the image
                    map.setMaxBounds(bounds);

                    L.tileLayer({
                        attribution: '<a href="http://smartminds.co">SmartMinds</a>',
                        maxZoom: 18
                    }).addTo(map);

                    //newMarkerGroup = new L.LayerGroup().bindPopup('Mapbox DC').addTo(map);
                    map.on('click', function (e) {
                        // alert(e.latlng); // e is an event object (MouseEvent in this case)
                    });

                    //polygon area customization
                    function showPolygonAreaEdited(e) {
                        e.layers.eachLayer(function (layer) {
                            showPolygonArea({ layer: layer });
                        });
                    }
                    function showPolygonArea(e) {
                        featureGroup.addLayer(e.layer);
                        var tempLatLng = null;
                        var totalDistance = 0.00000;
                        $.each(e.layer._latlngs, function (i, latlng) {
                            if (tempLatLng == null) {
                                tempLatLng = latlng;
                                return;
                            }

                            totalDistance += tempLatLng.distanceTo(latlng);
                            tempLatLng = latlng;
                        });
                        e.layer.bindPopup(((totalDistance / 100000) / calcThis).toFixed(2) + ' meters');
                        e.layer.openPopup();
                    }

                });
            });
        })


        //first function to run to take user input
        var map = L.map('takeDistance', {
            minZoom: 1,
            maxZoom: 4,
            center: [0, 0],
            zoom: 1,
            crs: L.CRS.Simple
        });

        // dimensions of the image
        var w = 3200,
            h = 1900,
            url = 'assets/img/isbimg.jpg';
        // calculate the edges of the image, in coordinate space
        var southWest = map.unproject([0, h], map.getMaxZoom() - 1);
        var northEast = map.unproject([w, 0], map.getMaxZoom() - 1);
        var bounds = new L.LatLngBounds(southWest, northEast);

        var featureGroup = L.featureGroup().addTo(map);

        var drawControl = new L.Control.Draw({
            edit: {
                featureGroup: featureGroup
            },
            draw: {
                polygon: false,
                polyline: true,
                rectangle: false,
                circle: false,
                marker: false,
                measureControl: false
            }
        }).addTo(map);

        map.on('draw:created', showPolygonArea);
        map.on('draw:edited', showPolygonAreaEdited);


        // add the image overlay,
        // so that it covers the entire map
        L.imageOverlay(url, bounds).addTo(map);

        // tell leaflet that the map is exactly as big as the image
        map.setMaxBounds(bounds);

        L.tileLayer({
            attribution: '<a href="http://smartminds.co">SmartMinds</a>',
            maxZoom: 18
        }).addTo(map);

        //newMarkerGroup = new L.LayerGroup().bindPopup('Mapbox DC').addTo(map);
        map.on('click', function (e) {
            // alert(e.latlng); // e is an event object (MouseEvent in this case)
        });

        //polygon area customization
        function showPolygonAreaEdited(e) {
            e.layers.eachLayer(function (layer) {
                showPolygonArea({ layer: layer });
            });
        }
        function showPolygonArea(e) {
            featureGroup.addLayer(e.layer);
            var tempLatLng = null;
            var totalDistance = 0.00000;
            $.each(e.layer._latlngs, function (i, latlng) {
                if (tempLatLng == null) {
                    tempLatLng = latlng;
                    return;
                }

                //transformation experiment
                alert('longitude/latitude '+latlng);

                totalDistance += tempLatLng.distanceTo(latlng);
                tempLatLng = latlng;
                alert(totalDistance);
                userDistanceVal = totalDistance / 100000;
            });
            e.layer.bindPopup((totalDistance / 100000).toFixed(2) + ' meters');
            e.layer.openPopup();
        }
    </script>

Sorry for a little long script, but there anyone can find the distanceTo() function and the values I am passing.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.