Manipulate the lines in an HTML map and showcase the distinctions between them

Question

Manipulate the lines in an HTML map and showcase the distinctions between them

I've been searching through various inquiries on this particular subject, but none have provided me with a satisfactory response. I have created a map where I've set up 4 axes using the following code:

function axis() {
        var bounds = map.getBounds();
        var NECorner = bounds.getNorthEast();
        var SWCorner = bounds.getSouthWest();

        // horizontal top axis

        var PolylineCoordinates = [
            new google.maps.LatLng(NECorner.lat()-0.0002, NECorner.lng()),
            new google.maps.LatLng(NECorner.lat()-0.0002, SWCorner.lng()),
        ];

        var Path = new google.maps.Polyline({
            clickable: false,
            geodesic: true,
            path: PolylineCoordinates,
            strokeColor: "#FF0000",
            strokeOpacity: 1.000000,
            strokeWeight: 0.8
        });

        Path.setMap(map);

        // horizontal low axis

        var PolylineCoordinates = [
            new google.maps.LatLng(SWCorner.lat()+0.0002, NECorner.lng()),
            new google.maps.LatLng(SWCorner.lat()+0.0002, SWCorner.lng()),
        ];

        var Path = new google.maps.Polyline({
            clickable: false,
            geodesic: true,
            path: PolylineCoordinates,
            strokeColor: "#FF0000",
            strokeOpacity: 1.000000,
            strokeWeight: 0.8
        });

        Path.setMap(map);

        // vertical left axis

        var PolylineCoordinates...

Now, my objective is to be able to drag these axes horizontally or vertically (depending on the axis) and continuously monitor the position difference between them - both in terms of the horizontals and verticals.

The visual output can be viewed here:If the question remains unclear, my requirements are as follows:

- ability to move/adjust the four red lines by dragging them with the mouse

- display the value of: abs(latitude_axis1 - latitude-axis2) and abs(longitude_axis1 - longitude-axis2) above the map

If anyone has knowledge or solutions regarding this issue, please assist me. If not, do you know of any similar queries that have been resolved? Thank you.

javascript html css google-maps google-maps-api-3

Answer 1

Answer №1

My code lacks user-friendly features, such as preventing the user from dragging the north line under the south line or allowing the lines to be dragged too far...

However, this fulfills your request to some extent.

Remember to update your API key

UPDATE: In line 46, you can change 'dragend' to 'drag'. This will alter the display while the user is dragging

<!DOCTYPE html>
<html>
<head>
    <title>Drag Lines in HTML Map and Display Line Differences</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            height: 90%;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <div id="log"></div>
    <div id="info">
        <a href="http://stackoverflow.com/questions/39370766/drag-lines-in-html-map-and-display-difference-between-lines/39376480#39376480">Stackoverflow</a>
    </div>
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry"></script>
    <script>
        var map;
        var initialViewportCoordinates = {
          north: 51.0,
          east:  5.0,
          south: 50.0,
          west: 3.0
        };
        var extraDegrees = 10;  
        var lineObjects = [];

        function drawPolyline(path, color) {
            var line = new google.maps.Polyline({
                path: path,
                draggable: true,
                strokeColor: color,
                strokeOpacity: 0.9,
                strokeWeight: 3
            });
            line.setMap(map);
            
            google.maps.event.addDomListener(line, 'dragend', function(e) {
              var index = lineObjects.indexOf(this);
              
              switch(index) {
                case 0: initialViewportCoordinates.north = e.latLng.lat(); break;
                case 1: initialViewportCoordinates.east =  e.latLng.lng(); break;
                case 2: initialViewportCoordinates.south = e.latLng.lat(); break;
                case 3: initialViewportCoordinates.west =  e.latLng.lng(); break;
              }
              displayDifference();
            });
            return line;
        }
        
        function displayDifference() {
          document.getElementById('log').innerHTML = 
            'difference lat: ' + (initialViewportCoordinates.north - initialViewportCoordinates.south) + '<br/>' +
            'difference lng: ' + (initialViewportCoordinates.east - initialViewportCoordinates.west) ;
        }
        
        function drawViewport() {
          var north = [
            {lat: initialViewportCoordinates.north , lng: initialViewportCoordinates.east + extraDegrees},
            {lat: initialViewportCoordinates.north, lng: initialViewportCoordinates.west - extraDegrees}
          ];
          var east = [
            {lat: initialViewportCoordinates.north + extraDegrees , lng: initialViewportCoordinates.east},
            {lat: initialViewportCoordinates.south - extraDegrees, lng: initialViewportCoordinates.east}
          ];
          var south = [
            {lat: initialViewportCoordinates.south , lng: initialViewportCoordinates.east + extraDegrees},
            {lat: initialViewportCoordinates.south, lng: initialViewportCoordinates.west - extraDegrees}
          ];
          var west = [
            {lat: initialViewportCoordinates.north + extraDegrees , lng: initialViewportCoordinates.west},
            {lat: initialViewportCoordinates.south - extraDegrees, lng: initialViewportCoordinates.west}
          ];

          lineObjects = [
            drawPolyline(north, '#ff0000'),
            drawPolyline(east, '#ff0000'),
            drawPolyline(south, '#ff0000'),
            drawPolyline(west, '#ff0000')
          ];
        }

        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: 50.84, lng: 4.35},
                zoom: 7,
                mapTypeId: 'terrain'
            });

            drawViewport();
            displayDifference();
        }
        
        google.maps.event.addDomListener(window, 'load', initMap);
    </script>
</body>
</html>

Answer 2

My code lacks user-friendly features, such as preventing the user from dragging the north line under the south line or allowing the lines to be dragged too far...

However, this fulfills your request to some extent.

Remember to update your API key

UPDATE: In line 46, you can change 'dragend' to 'drag'. This will alter the display while the user is dragging

<!DOCTYPE html>
<html>
<head>
    <title>Drag Lines in HTML Map and Display Line Differences</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            height: 90%;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <div id="log"></div>
    <div id="info">
        <a href="http://stackoverflow.com/questions/39370766/drag-lines-in-html-map-and-display-difference-between-lines/39376480#39376480">Stackoverflow</a>
    </div>
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry"></script>
    <script>
        var map;
        var initialViewportCoordinates = {
          north: 51.0,
          east:  5.0,
          south: 50.0,
          west: 3.0
        };
        var extraDegrees = 10;  
        var lineObjects = [];

        function drawPolyline(path, color) {
            var line = new google.maps.Polyline({
                path: path,
                draggable: true,
                strokeColor: color,
                strokeOpacity: 0.9,
                strokeWeight: 3
            });
            line.setMap(map);
            
            google.maps.event.addDomListener(line, 'dragend', function(e) {
              var index = lineObjects.indexOf(this);
              
              switch(index) {
                case 0: initialViewportCoordinates.north = e.latLng.lat(); break;
                case 1: initialViewportCoordinates.east =  e.latLng.lng(); break;
                case 2: initialViewportCoordinates.south = e.latLng.lat(); break;
                case 3: initialViewportCoordinates.west =  e.latLng.lng(); break;
              }
              displayDifference();
            });
            return line;
        }
        
        function displayDifference() {
          document.getElementById('log').innerHTML = 
            'difference lat: ' + (initialViewportCoordinates.north - initialViewportCoordinates.south) + '<br/>' +
            'difference lng: ' + (initialViewportCoordinates.east - initialViewportCoordinates.west) ;
        }
        
        function drawViewport() {
          var north = [
            {lat: initialViewportCoordinates.north , lng: initialViewportCoordinates.east + extraDegrees},
            {lat: initialViewportCoordinates.north, lng: initialViewportCoordinates.west - extraDegrees}
          ];
          var east = [
            {lat: initialViewportCoordinates.north + extraDegrees , lng: initialViewportCoordinates.east},
            {lat: initialViewportCoordinates.south - extraDegrees, lng: initialViewportCoordinates.east}
          ];
          var south = [
            {lat: initialViewportCoordinates.south , lng: initialViewportCoordinates.east + extraDegrees},
            {lat: initialViewportCoordinates.south, lng: initialViewportCoordinates.west - extraDegrees}
          ];
          var west = [
            {lat: initialViewportCoordinates.north + extraDegrees , lng: initialViewportCoordinates.west},
            {lat: initialViewportCoordinates.south - extraDegrees, lng: initialViewportCoordinates.west}
          ];

          lineObjects = [
            drawPolyline(north, '#ff0000'),
            drawPolyline(east, '#ff0000'),
            drawPolyline(south, '#ff0000'),
            drawPolyline(west, '#ff0000')
          ];
        }

        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: 50.84, lng: 4.35},
                zoom: 7,
                mapTypeId: 'terrain'
            });

            drawViewport();
            displayDifference();
        }
        
        google.maps.event.addDomListener(window, 'load', initMap);
    </script>
</body>
</html>

Manipulate the lines in an HTML map and showcase the distinctions between them

Answer №1

Similar questions

Tips for generating a JSON string with nested structure

Testing the speed of the client's side

What is the correct way to pass the res object into the callback function of a jest mock function?

What could be the reason for the malfunctioning toggle button on the Bootstrap navbar?

Creating a custom comparison method between two select dropdowns using the jQuery Validation plugin

Positioning CSS for a Responsive Button

`My jquery mobile application fails to trigger the pageinit or ready events`

Styled-components does not generate a style tag as output

Update DataTable 1.9 while preserving existing rows

Rest parameter ...args is not supported by Heroku platform

Customizing the tab content background color in MaterializeCSS

How to position preloader at the center in materializeCSS

Guide on transmitting information from two separate pages to a PHP script simultaneously using an AJAX request

Is it possible to set up an automatic redirection to the Identity Provider sign-in page when accessing a protected page in Next.js using Auth.js?

The development server fails to respond when initializing a new project following the NextJs documentation for an empty project

How to effectively leverage useMediaQuery in material ui?

How come the item I just inserted into a JavaScript array is showing up as undefined when I try to retrieve it immediately after adding it?

How can I modify the content within a scoped `<style>` tag in Vue?

CSS 3 - Apply transition to the 'display' property

Is it possible to implement drag and drop functionality for uploading .ply, .stl, and .obj files in an angular application?