Get center of geojson Continent/Country/State with leaflet - javascript

Is there a way of finding a center for countries/continents which consist of more than one polygon object(ex. USA, Canada, which have an islands besides main land part)? I was trying to use leaflet's Layer.getCenter() or even Layer.getBounds().getCenter(), but those methods certainly don't work for this type of countries and return a "no-go" results.
Example can be seen by the following link (leaflet playground). Just scroll and click on US or Canada and see where circleMarker will appear. Then try clicking on smaller entities, like some islands on south of US, they shall place this marker precisely on center of'em:
http://playground-leaflet.rhcloud.com/voyi/1/edit?html,output

Leaflet can only calculate the center of the bounding box of a feature. With a bit of help from other libraries (such as Turf.js) you can calculate the centroid of the polygon or (multipolygon).
In any case, you are getting confused because sometimes the centroid is not within the polygon (or multipolygon):
(source: postgis.net)
(Figure 1. Centroid of a polygon as per PostGIS's ST_Centroid documentation)
So I guess that what you really wanted to ask is:
Given a polygon or multipolygon, how can I calculate a center (or center-like point) which is guaranteed to be within the polygon and looks visually in the center of it, in order to add symbolizers to that point with Leaflet?
And for that, the answer is "pole of inaccessibility" as implemented by polylabel: «the most distant internal point from the polygon outline».

Related

How can I rotate an overlay image on Google Maps?

I'm trying to place a series of overlays onto a Google Map. I'm following along with the sample code for ground overlays, but that only allows me to dictate image placement using north/south/east/west boundaries. The works as long as my image is a rectangle and oriented along longitude and latitude lines. I'd really like to be able to accurately place an image, including custom scale and angular orientation. That doesn't seem possible with a ground overlay.
So here's a possible use case. I'm building a website to help city planners test parking availability.
The city planner uses a Google map on the analysis website to select an area of the street with a polygon select tool.
The website script tests the selected polygon area for parking availability.
When we're done with the evaluation, I'd like the site to paste random images of cars into the page so the user can better visualize what's available.
I can create a rectangular plan view of a car, but I'm unable to figure out how to rotate the image by X degrees as required. Perpendicular to North/South/East/West (NSEW) is no problem, but I'm unable to angle it.
This should work no matter how the original map is oriented. The goal is the user sees a proposed solution, complete in the current map view, and to scale.
Obviously the image would have to be perfectly scaled to the visible map, and that's fairly easy to do (a minor latitude length adjustment may be required.)
(In this image, the city planner has just selected the area of interest via polygon selection tool. The next step is to evaluate the area, and paste in some parked cars, aligned and in scale!)
All the Google mapping native overlay tools I'm looking at rely on LatLngBounds class, hence the NSEW perpendicular alignment problem. I know I can calculate the desired angle, go to a php server, rotate a .png image with transparent background, per php imagerotate, but that seems like such a hack for a geo-mapping exercise. I could also pre-rotate the cars in a .png file and save them as red_car_15degrees.png, blue_car_30degrees.png, white_pickup_45degrees.png, (three different cars x 5 degree increments from 0 to 45 degrees) but that too, just feels like a hack.
Is there anyway to create a custom map overlay at a given desired orientation angle, so I can layer in the cars to show the city planner what's available? Many thanks.
I would draw and rotate in a <canvas> and then out that on.
EDIT:
place on canvas, ctx.rotate, c.toDataUrl(), and overlay that on your map.

Complete an open polygon from a KML

I am working on an app that tests whether or not a certain coordinate is in the "beam" of a satellite transponder. My code works well except for cases of an open polygon. I was just closing these polygons by adding a coordinate on the end that was the same as the first but that is not a good approach as seen in the cases in the image I attached. The black represents how they are supposed to be completed.
I am parsing a KML that contains these polygons that are in the form of a LinearRing. They are not always counter-clockwise as they are supposed to be so I can't go from that clue.
For the yellow example, I thought about just using the coordinates on the two ends and fixing the longitude and generating latitude values until they matched up.
This approach fails for the blue example because of the pole issue but I could flip 180 degrees once I got to the pole. I also am not sure how to decide to go up in latitude or down. Obviously the semi-circle opens up towards the north so I would go that way but I can't figure out a reliable test for how it opens because of the red example. It mostly opens up toward the north (which is the way it should) but the ends start to go south so I couldn't just test the ends because it would look like it is opening up to the south. Is there a way to test to see what direction a parabola "mostly" opens up towards?
Something that might make it easy is that since it is a geo satellite, it can only see half of the earth centered at 0 degrees latitude. That is why I was thinking of traversing up or down a fixed longitude.
Another thing I was thinking about...could I treat this as a pseudo-cartesian system since I am a satellite looking at half of the earth. It pretty much resembles an skewed x-y system.
My question is, what is the best approach in completing the polygon and preserving the intended beam pattern?
EDIT: I could use the end points to calculate a point between the ends and then get the slope of the bisector using a middle point of the original curve. This would give me the direction of how it opens up.
y+, x+ : it opens toward the upper right
y+, x- : it opens toward the upper left
y-, x+ : it opens toward the lower right
y-, x- : it opens toward the lower left
From there, I am not sure how to generate the points. Can I just use the longitude of one of the end points and keep that fixed while iterating through latitudes around the globe until it matches the latitude of the other end point? I feel like I am oversimplifying it. I would hate to get it "working" and then realize it was a waste because it only works for a certain test case.

Retaining the screen-size of a polygon when zooming

I have a function that plots a polygon centered over a certain location. I noticed that when a user zooms, the size of the polygon stays geographically the same, meaning it changes screenwise (i.e. zooming out displays a larger portion of the map, while the polygon occupies a small portion of the map).
One could say that I position the polygon with respect to geographical measurements but I wish to size it with respect to screen ditto.
How can I do that?
I suppose I could find out the size of the viewer or screen and check that against boundaries of the map and so on. However, that sounds like a tedious approach and I trust that there's functionality in the API that does all that for me, likely much faster and more reliably.
Since polygons are tied to locations you will need to just draw an image on the screen instead. (Unless you like to inflict pain upon yourself and recalculate all the polygon locations when the zoom changes).

Surface covering Google Maps

This is the setting:
I have a car moving inside a specific area on google maps. This area is determined by a
Polygon. The car is tracked via GPS and you can see it on the map moving.
I want to know which parts of that polygon area the car covered on its route before leaving the polygon, and show the covered in green color and the uncovered in red color (these will be polygons also, right?).
I don't asking for any code at all, only the idea of how an algorithm would work for that purposes.
If someone can throw me some pointers, I'll apreciate it.
Your better off coloring the polygon Red initially and overlaying a green polygon based on historical locations. The algorithm would end up creating a list of all max/min lats with unique lons, and all min/max lons with unique lats. Let me know if this isn't enough information for you and I can elaborate further.

Google map divided in regions with color and in subregions

I need to divide USA map into political boundaries. i.e. states and in seven Regional boundaries on Google map. Each region will have its own color. Example, California, Hawaii, Nevada, Utah, Arizona and Colorado (Southwestern US) will all be same color. Political boundaries will also be on map along with regional boundaries. On national view only regional names should be visible and no state name. On zooming in to region state names will be shown, no city name should be visible either I zoom in or out.
Can you please help me understanding that from where should I start? Links? Tutorial?
Do I need an Image to put on map as overlay.
I am really not getting it.
If you want to close this question then please help me that what is the forum to ask this so I put it there?
I need to divide USA map into political boundaries. i.e. states and in seven Regional boundaries on Google map. Each region will have its own color.
You can do this with a relatively simple polygon overlay. You'll need to obtain polygon data for each region of interest from a third party since the API does not provide any.
On zooming in to region state names will be shown, no city name should be visible either I zoom in or out.
This starts to get more complicated. Probably best done using a custom map type (see image map types) if you don't want to see features like city names.
See also
Google Maps w/ counties overlay?
http://maps.forum.nu
State polygon overlay example (for API v2)
MapTiler - Map Tile Cutter
Polymaps - a personal favorite alternative to Google Maps, with a really slick API

Categories

Resources