Draw line on Map and get countries line passes through using javascript - javascript

I'm working on a maps based application and at the moment want to do the following. I have two coordinates a start point and an end point and can draw a line between those points on a map. However what I want to do is to be able to get a list of all countries on the map that the line passes through. I was wondering if this can be done using google maps. I've looked at a number of options but can't get around the way to get this done - how do I do this?

you could check at various points of the line for the country it's in with:
pOfLine.AddressDetails.Country.CountryName

Related

Problem while modifying MultiPolyline drawn over dateline in Openlayers

I am working on an application in OpenLayers which allows users to draw polylines and modify them.
For sake of presentation when the user draws across the dateline, I have split the polyline into two halves and added it to map as a MultiPolyline (MultiLineString) in OpenLayers.
The problem is when the user tries to modify the point on the dateline, the line can be observed as split on the map to the user.
Which should not happen. When a user tries to modify the point on the dateline, it should be seen as a complete line not split at any instance.
To see the problem draw a polyline across the dateline and try to modify the dateline point (180° longitude). Here is a link to my code dateline modify problem
I was thinking about adding a vertex from the point being modified to the point on the dateline, is there a way to do that?
Also, I have observed that not all the polylines on my map are modifiable. I don't know why.
Please suggest me if I should refactor my code with a different approach.

Finding Self-Intersections in Leaflet polygons using JSTS Library

I'm using Mapbox with Leaflet Draw, and I would like to avoid self-intersecting polygons.
I can already specify to not allow intersections while creating the draw control, but it only works when I use the control to create a new polygon. However, if I try to edit an already existing polygon, it allows intersections over there.
I searched around and found the JSTS Library which does exactly what I want, and I also found this JSFiddle to use as an example, where it works based on the Google Maps API.
So I created my own JSFiddle with Mapbox based on the above two links. Here, the 'findSelfIntersects' function kicks in if it's a polygon edit, and it is not used if it is a new polygon. The idea is that, if there's an intersection, I'll show an alert to the user and cancel the edit. However, when I try to do this, I'm getting an uncaught exception: [object Object] error.
The error seems to be formed on this line of the findSelfIntersects function:
var shell = geometryFactory.createLinearRing(coordinates);
I checked out the coordinates returned by the Google Maps example, and that does seem similar to the coordinates I'm getting. But I'm not sure why I'm getting this error.
I just noticed that in the Google Maps example, the starting and ending points were the same in the coordinates array, whereas mine weren't. I had missed it initially. Now I've added the below code after the 'for' loop, and it works fine.
coordinates.push(new jsts.geom.Coordinate(
corners[0].lat, corners[0].lng));
This is an updated JSFiddle in case anyone wants to use the JSTS library with Mapbox/Leaflet.

Straight lines on map in d3.js

I am experimenting with d3.js and I have a map of the world with points that represent various cities. I would like to draw straight(ish) lines between the cities which I am doing using a LineString and d3.geo.path(). For some reason some of the lines aren't direct to the destination as you can see in the following block where the line from Europe to one of the Pacific islands creates an arc.
http://bl.ocks.org/whatsthebeef/6360703
The problem seems to occur where the line goes off one side of the map and on the other. I interpreted a part of the documentation to say that the line is drawn clockwise so I have tried switching the order of the points but it remains the same.
I am looking for something more like this
http://mbostock.github.io/d3/talk/20111116/airports.html
I can see in this example mbostock is using greatArc but it also says in the documentation this isn't necessary and there is no documentation on big arc anyway as it seems to have been deprecated.
Any ideas how to prevent this arcing?
To draw a straight line use:
d3.svg.line()
You will have to convert your coordinates using whatever projection you are using
var trcoords_o = projection(r.coordinates[0]);
var trcoords_d = projection(r.coordinates[1]);
This also doesn't seem to allow you to draw a line which leaves one side of the map and come in the other.

Create a route using a list of coordinates in Google Maps

I have a list of lat,lon coordinates as result of tracking a bus. I'm showing the route using PolyLine to create a line to connect "the dots" but because of the accuracy these dots aren't exactly by the street, and when you zoom in it is more obvious.
What can I do to show the route by the street?
This is what I have right now (There are 2 lines because the bus did 2 turns. It won't show like this in the final product)
And this is what I need.
Thanks for your help.
I would suggest reducing the polylines to the minimum number of waypoints required to make the DirectionsServide create the same route.
example from this similar question
example using coordinates rather than addresses
Search for 'snap polyline to road using google maps api v3' for similar discussions.
There doesn't appear to be a straightforward API service to do this and you would need to reduce your route to significant changes in direction rather than every wiggle.
You might add a star to the issue in the 'Google Maps API bug reports and feature requests' database
http://code.google.com/p/gmaps-api-issues/issues/detail?id=3824
and possibly add a new issue since your problem is somewhat different

Create random flashing dots in particular countries

I'm trying to show website usage statistics in a more graspable way. I'd like to use google maps API to have dots flash in random areas of a country every time someone in that country logs in.
My question is two part.
Firstly, is there a built in way to create a dot on google maps without using overlays, or with an overlay that will delete itself after a given period of time (say 25ms)?
Second, is there a way to generate random coordinates that will be used to generate the dot? The difficulty that I'm having is that I need to make sure it stays within the country that the user logged in and it needs to be in a plausible location. It'll be pretty obvious that it's a made up location if it continually shows usage in the water.
I could create a file with millions of coordinates for each country and have it randomly draw from that file, but I'm trying to avoid that.
Thanks in advance
interesting use case:)
"is there a built in way to create a dot on google maps without using overlays, or with an overlay that will delete itself after a given period of time (say 25ms)?"
I recommend just creating the overlay and using jquery (or whatever framework you use) to do a nice animate to slowly hide the overlay. Once hidden you can remove it ($(".theelementselector').remove())
As to your second question:
Lot's of ways to go about this, one of the best imho would be:
get your hands on polygon data of countries (tip: www.weogeo.com for free downloads on request)
given a boundingbox of the country
generate a random point in the bounding box (for instance with the so called "monte carlo method.")
check if it's in the polygon as well (point polygon intersect. Look it up on SO for example)
hth

Categories