What is the process for retrieving the array of points from a polygon shape?

My current challenge involves working with a JSON file containing an array of states and a sub-array of corresponding latitude (lat) and longitude (lng) values.

After looping through the states and points to build 50 polygons, I now need to center and zoom in on a state when it is clicked. I realized I could potentially reloop through the points to add bounds, but when I display the polygon in the console, I can see the points by clicking through the values.

Is there a way to access these points without reiterating through them? The points are already associated with a polygon, which is linked to a state.

When I attempt to log console.log(newpoly.latLngs);, the output looks cumbersome and messy.

Kf

->b: Array[1]

->0: Kf

->b: Array[5]

->0: Q
     Xa: 41.0037
     Ya: -104.05560000000003
     __proto__: Q
  1: Q
     Xa: 44.9949
     Ya: -104.0584
     __proto__: Q
  2: Q
     Xa: 44.9998
     Ya: -111.0539
     __proto__: Q
  3: Q
     Xa: 40.9986
     Ya: -111.04570000000001
     __proto__: Q
  4: Q
     Xa: 41.0006
     Ya: -104.05560000000003

I apologize for the unclear formatting.

Is there a way to access the last array of the latLng points without adding another loop for the bounds?

Thank you.

Answer №1

It seems like obtaining the bounding box for the polygons in an image map is not a straightforward task (assuming that is the method you are utilizing).

You can avoid creating an additional loop by leveraging the existing one to compute the limits and construct the polygons in tandem.

Answer №2

Managed to get it to work using the following approach:

jQuery.getJSON("http://www.someexample.com/wp-content/themes/twentytwelve/states.json", function(data) 
{
var points = [];
var ids = [];
var $entries = Object.keys(data).length;
for (var p=1; p<$entries+1; p++)
{
var boundary = new google.maps.LatLngBounds();
var coordinates = [];
for (var i=0; i<data[p].points.length; i++) 
{
var identifier = data[p].stateid;
coordinates[i] = new google.maps.LatLng(data[p].points[i][1], data[p].points[i][2]);
boundary.extend(coordinates[i]);
};
var polygon = new google.maps.Polygon({
paths: coordinates,
strokeColor: "#000000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#00FF00",
fillOpacity: 0.5
});
polygon.setMap(map);
polygon.boundary = boundary;
polygon.info = identifier;
attachClickListener(polygon);
};
});
function attachClickListener(polygon)
{
google.maps.event.addListener(polygon, 'click', function(event)
{
map.fitBounds(polygon.boundary);
});
};

In this implementation, I am linking the boundary coordinates to the "polygon" object and then retrieving them from a separate function that handles the click event. If you have any concerns about this method, please share your feedback.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Empty results in NgRx Parameterized Selector

Having trouble implementing a parameterized query in NgRx and receiving empty results. Check out the StackBlitz version of the code here: https://stackblitz.com/edit/ngrx-parameterized-query Update to Reducer Code export const userAdapter = createEntity ...

Is there a way to verify the content of a span and automatically guide the user elsewhere if it meets certain criteria?

Currently, I am facing an issue with adding Google authentication to my website as the redirect function is not working properly. As a solution, I plan to implement manual redirection using JavaScript in case the value of the span element is <span id= ...

What is the method with the greatest specificity for applying styles: CSS or JS?

When writing code like the example below: document.querySelector('input[type=text]').addEventListener('focus', function() { document.querySelector('#deletebutton').style.display = 'none' }) input[type=text]:focu ...

What is the best way to create a function that triggers another function every minute?

Currently, I have a function that checks if a user is authenticated: isAuthenticated = (): boolean => { xxx }; I am working with AngularJS and I want to create a new function called keepCheckingAuthentication() This new function should call the ...

How can I align the Socket.io path on the client with the directory structure of my Node.js server?

Currently, I am utilizing socket.io with node.js along with Expressjs. As I serve my HTML page, I have the socket.io.js file linked directly in a script tag: <script src="/socket.io/socket.io.js"></script> I'm facing some difficulty match ...

Tips for retrieving the HTML file of a modified canvas in HTML5

I’m currently working on a project to develop a website that allows users to design their own pages by simply dragging and dropping elements onto the canvas. The goal is for users to be able to save their creations as an HTML file. I’m facing challen ...

Unable to adjust the padding of a div while the Bootstrap 4 navbar is in a collapsed state on mobile devices

I am facing an issue with a fixed navbar at the top of my page. Below the navbar, I have the page content which includes a Bootstrap 4 image carousel. The problem arises on mobile devices where I need to add top-padding to the page-container (below the nav ...

blur event triggered on a cell within a table

Currently, I am using the code snippet below to populate data using a data table. My goal is to be able to edit the data in one of the columns and then validate the value after editing using the onblur event. I attempted to call the onblur event on the t ...

Transforming an NSArray into an Array in Swift can result in some values becoming nil in the Array

Facing a seemingly straightforward problem that I can't seem to solve. It involves converting an NSArray to an Array, and here's the code I have so far: func getTrainingSubCategories(completion: @escaping(Result<[TrainingSubCategory], GetErro ...

Trouble sharing arrays between iOS view controllers

I've been struggling to pass an array between view controllers, specifically from ViewControllerA to ViewControllerB. No matter what I try, the result always ends up being nil. Interestingly, when I log `destViewController.textArraysParsed` in ViewCo ...

Having several horizontal scrollbars at once on a single webpage

I stumbled upon a great example showcasing how to scroll a div on my page: Check out this Codepen - https://codepen.io/zheisey/pen/xxGbEOx Although, I am looking to extend this functionality to allow multiple divs to scroll together. Any suggestions? I ...

What is the best way to show a macOS progress pie loading icon alongside files?

While using macOS, a pie loading icon appears next to a file during downloading or transferring. To illustrate, here is an example of a file being downloaded from Chrome: https://i.sstatic.net/8jS4X.png I am interested in implementing a similar feature i ...

Text woven seamlessly with a series of different scenes

After contemplating the use of three.js for incorporating 3D visualization into my Sphinx extension for model visualization, I realized that the current tool I am using is outdated and not being maintained. The three.js library offers a variety of example ...

Ajax- priorToSend

To avoid encountering the same error twice, I implemented the use of beforeSend in my code. hasSent = false function submit() { if (!hasSent) { $.ajax({ url: "${createLink(controller:'userInvitation', action:'ajaxUp ...

How can AngularJS ng-repeat be used to extract HTML elements?

I need help parsing HTML that is received from the server as a string. Here is an example of what I receive: <img src="http://gravatar.com/avatar/9a52267d32ad2aaa4a8c2c45b83396e5?d=mm&amp;s=&amp;r=G" class=" user-1-avatar avatar- photo" width=" ...

How can you enhance your HTML elements by incorporating classes and other features?

At this moment, the code I have is: var carDiv = $("<div/>").appendTo("#content"); var eUl = $("<ul/>").appendTo(carDiv); How can I transform it into <ul data-role="listview"> content </ul> Instead of <ul> ...

The Angular directive was unable to reach the controller located higher up in the DOM hierarchy

template <section id="content" ng-controller="ReservationController as resvnCtrl" > <form role="form" name="resvnCtrl.form"> <div data-date-picker> </div> ...

Comparison between PHP's JSON parser and Javascript's JSON parser

Can anyone help me with this PHP serialize JSON encoding issue? json_encode(array('pattern' => '^(?:/?site/(?[\w\-]+))?(?:/?intl/(?[a-z]{2}(?:\-[a-z]{2})?)/?)?(/?(?.*))')); // output json: {"pattern":"^(?:\/?site ...

What is the best way to loop through a group of WebElements, and only log the results that contain a specific substring?

In my test case, I'm utilizing Mocha to handle the scenario. The test appears to be passing successfully, however, no logs are being printed... it('Is 'Mooooooo!!!! I2MaC0W' a Substring in Results?', function() { this.timeout(50 ...

Customize the appearance of the search box in Serverside Datatables

Is there a way to adjust the search and show inputs for datatables so that I can customize their width and make them fit my dynamic column sizing? The issue I ran into is that these inputs are enclosed within <label> tags in the source JavaScript, an ...