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:https://i.sstatic.net/oadAv.pngIf 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

Learn how to implement Redux login to display the first letter of a user's name and their login name simultaneously

Utilizing MongoDB query for geoLocation with maxDistance parameter

The data retrieved by jQuery AJAX is empty when accessed outside of the success handler

Using the jquery slider in conjunction with the onchange event

Activate an asynchronous request within a dropdown menu that was loaded using ajax

The error of "No 'Access-Control-Allow-Origin' header is present on the requested resource" persists even after implementing the Access-Control-Allow-Origin header

Retrieving a specific variable from a cookie value that is stored within a JSON array

What is the best way to trigger a refresh in Next.js React component?

Unique WordPress Loop Design (Grid/Row)

Why is it that my jquery code seems to be struggling with calculating the count accurately?

The Backbone Model is producing unspecified data

Error: The function getOrders is not defined in the customerFactory

Changing the application's state from within a child component using React and Flux

Trouble displaying CSS content image in Internet Explorer

How should we arrange these components to optimize the overall aesthetic of this particular design?

Loop through the array and eliminate the identification solely

While iterating through a dynamically generated JSON data array, omitting the display of the ID (both title and value) is preferred

jQuery functions smoothly on Firefox, but encountering issues on Chrome

Facilitating the integration of both Typescript and JavaScript within a Node application

Transforming images with Imagick