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.
Related
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».
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.
I've been searching the internet for a package which can create a simply global map.
There are several which I've searched, webgl globe, kartograph, cartodb, R etc.
None of these have what I'm looking for.
What I'm looking for:
I want a map of the globe, which has two colours for the each country.
there would be a background colour, then the second colour would fill from the bottom by x percent based on an input. For example, if I created a map of gun owners as a percentage over the US map, the background colour would be cream and the second colour would fill the map 55% which represents the amount of gun owners.
So, basically, the second colour in the map would act like a bar chart which fills the colour of the country by the % being applied to the country/area.
Please let me know if any .js library or which tools might be able to do this.
Just take any SVG map of the world and change every country into a mask with two rects below it. Do the rest with a simple loop and svgTopOfTwoElements.style.setProperty("height", heightPercentage, ""). Just search google for getting started with SVG from javascript (it's practically the same as working with HTML elements). The only possible concern would be that 17% of the users don't support SVG (IE8-), but for the ease of use you get in return I would believe this to be an acceptable price.
I have a canvas with image drawn to it.
When the user clicks on the image, I need to find the color region that the user clicked on. A region is defined as a set of 4-way connected pixels with the same color as the pixel that was clicked on.
I need the region in a form that I could use to set a clipping path on the canvas, so that I could fill the area with, say, a gradient, etc.
Are there efficient algorithms for finding a boundary? Something more optimal than flood fill algorithms (I do not need to fill, I just need to find a path around my region).
I believe the Moore Neighborhood tracing algorithm will do what you want. By definition, the Moore Neighborhood looks at 8-connectedness, but you should be able to easily adjust it to 4-connectedness. Your resulting regions will most likely be better if you test for 8-connectedness, but your application may have specific requirements.
Wikipedia has a good outline of the algorithm here. I've worked with this in the past and had great success--it's very fast.
I have a web application with several points placed on a map. Every point is associated with a value, good values are green,ok values yellow and bad values red. If two values are close enough I would like them to merge colours between them e.g. One point is red and the other point is yellow the area between them should be orange.
I have looked into heat maps but not found anything that works for my needs.
Anyone know of any good libraries that solve this problem?
Just make the images for these points being PNGs with alpha channels set to 0.5 or other suitable value.