How to draw a marker in middle of path? - html

I have a path (which is essentially a line). I am able to draw an arrowhead with the help of marker-end attribute of path. But now I want to make a + sign in the middle of the path. I think for that purpose, marker-mid should be used.
Here is the code and output when I use marker-end.
Here is the code and output when I use marker-mid.

marker-mid specifies the marker type that should be placed for the points in a path that are not the first or last point.
In other words, if you have a path that consists of four points (thus three lines), marker-mid markers will be placed on the middle two points.
There is currently no way to automatically place markers in the middle of a line segment as you wish. You would need to either place an appropriate shape at that point yourself, or split the line into two half-lines.
SVG 2, which is still in development, will likely have this feature, but you can't do it yet.

Related

Bounding areas and restrictions for geolocalizing

I'm trying to restraint an area to verify that certain points are correctly geolocalized. I have .klm files with the boundaries of the areas and also the coordinates of the points I'm trying to verify. I wonder If there is a way to combine this in code in a way the code itself identifies which points are inside the poligon and which aren't.

create message bubble and path on Google static maps

I am trying to create a static map url using google maps api which looks similar to following
It seems like I require to increase the zoom levels and add a path parameter to the url. I have tried to create url like following
http://maps.googleapis.com/maps/api/staticmap?scale=4&format=png32&center=50.133751,4.833644&zoom=16&size=640x640&markers=color:red%7C50.133751,4.833644&sensor=false&path=color:blue|48.133751,4.833644|50.133751,4.833644&style=feature:road.local
But it is not giving required results, I need to create dynamic urls based on the addresses and lat/lng values provided. I somehow requires to rotate map in such a way so that it always have a vertical road in the middle so that I can draw a path over it. Additionally, I need a bubble which will show a fixed time to reach say 5/1 min.
I am not using any programming language as of now. I am trying to create these urls manually.
Thanks in advance.
EDIT : I don't need to rotate it now. Just wants to show a 1-5 min directions to the given latitude/longtitude/address value and for message bubble, I have created a static image which I can show as an overlay.
Based on your specific needs to show a path and a time from 1 to 5 minutes I would recommend the following:
First of all you need to know that you have two possibilites concerning the label
Use the standard marker and add a label with a length of 1 and [A-Z], [0-9] (so just the time in your case...one to five)
Use a custom icon which already includes the label (in your case this is a option because you just have to create five images containing "2 min" or something)
For the first option I would take the center of two connected points and add a white marker with the label of the route duration like markers=color:white|label:1|52,5210924,13,39181335. Then you will have a white standard marker on your route like this.
For the second option you can change the marker position away from the path (depending on how your label image looks like) and add the image with the correct duration (1.png, 2.png, 3.png,...) like markers=icon:https//your.path/to/image.png|52,5210924,13,39228335. Like this you can include your own image, which would look like this (sorry for the bad image ;-)).
Adding a custom marker icon with a label (in the URL) is sadly not possible.
I think in your case (also when creating it manually) it would be fine to create 5 bubble images and add those as described to your static map. The faster and easier (but not so good looking) way would be the first option, because you could place it right on the path and don't have to create the bubble images.

How can I find out what part of the GMSPolyline was tapped?

I have a GMSMutablePath object containing coordinates that I display visually on the screen with a GMSPolyLine. I want the user to be able to tap on a line segment (spanning two coordinates) and have the app create another node at the midpoint of that segment.
I use didTapOverlay method to get the touch event, but unfortunately that just gives the poly line as a whole. How can I find out what line segment was tapped so I know where to insert the new coordinate in the GMSMutablePath array?
I've found a work around for this, but if anyone knows how to do this properly I'd love to hear it!!
Basically, instead of drawing a single polyline to represent the path, I drew a separate line between each coordinate in the path. I subclassed polyline and added a property "positionInPath", which I set when I created the line. In didTapOverlay, I used this property to determine where to insert the new coordinate in the GMSMutablePath.
Hope that helps someone!

Around-the-world path breaking in Google Static Maps

I'm creating Google Static Maps with a path between markers and have come across certain coordinate combinations that break the path.
The path breaks in this example (markers # Beijing, SF, NY, Azores, Rome):
http://maps.google.com/maps/api/staticmap?path=color:0xff0000cc|weight:3|39.904214,116.407413|37.77493,-122.419416|40.714353,-74.005973|38.721642,-27.220577|41.89052,12.494249&markers=39.904214,116.407413|37.77493,-122.419416|40.714353,-74.005973|38.721642,-27.220577|41.89052,12.494249&maptype=terrain&sensor=false&size=640x404
And works in this example (marker # Rome removed)
http://maps.google.com/maps/api/staticmap?path=color:0xff0000cc|weight:3|39.904214,116.407413|37.77493,-122.419416|40.714353,-74.005973|38.721642,-27.220577&markers=39.904214,116.407413|37.77493,-122.419416|40.714353,-74.005973|38.721642,-27.220577&maptype=terrain&sensor=false&size=640x404
The cause is not crossing over the Greenwich Meridian as I initially thought. It breaks even if I add a marker before that, seemingly any a point East of the automatically calculated centerpoint of the map...but only when the path starts on the other side of -180 longitude.
To prove that, you can see that the Beijing, SF, NY, Azores, Rome path displays correctly when I set the map centerpoint to -170,35
http://maps.google.com/maps/api/staticmap?path=color:0xff0000cc|weight:3|39.904214,116.407413|37.77493,-122.419416|40.714353,-74.005973|38.721642,-27.220577|41.89052,12.494249&markers=39.904214,116.407413|37.77493,-122.419416|40.714353,-74.005973|38.721642,-27.220577|41.89052,12.494249&maptype=terrain&sensor=false&size=640x404&center=-170,35
Unfortunately, I can't programmatically set center like this because I never know the collection of points I'm going to get, and it would be next to impossible to detect that the passed points would cause a line break.
Any ideas?
First: you can calculate the center even if you don't know the collection of points (locations) at compile time: at runtime you know all the points (otherwise it would be not possible to insert the coordinates into the URL), therefore you can easily iterate over all the points and compute the center. You can computing the average of all coordinates and you get the geometric center (also called centroid): this is the easier way. Another way to do is to check the most distant pair of locations (for both, latitude and longitude) and then set the middle point as center: this requires slightly more coding (for instance to compute the longitude distance you need to take into account the you have to compute the distance in two directions, since it is possible to go 'around the world) and it has an higher complexity.
I don't go deeper in this topic because, even if you compute correctly the center of your points, this does NOT resolve the problem, and moreover the center provided automatically by the Google static map API is always correct: again the center is related to the problem, but it is not the (couse of the) problem.
An aspect that is trivial but important to keep in mind: Google static map draws a path between two locations always by considering the shortest path, i.e. by drawing the shortest straight line.
Therefore if you are in a situation where your path has to go from a location A to a location B, and the shortest path between A and B goes 'around the world' (or better, it goes out from one side of the image), then the path appears 'borken' as in maps that you have shown. In practice A and B are near the left and right margins of the map, and the map can not be centered in some point along the shortest path between A and B because of the others point of the path. And this is what happen when you remove 'Rome': without Rome the map can be centered in a way that the path is not borken.
Formally, I think that the problem appears (i.e. the path is broken), when the projection of the path on the equator is longer than 360 degree of longitudes, and the path always goes in the same direction (i.e. always west to east or always east to west).
Google static map in this situation simply adds another world map next to the first one: if you set the zoom to the minimum, you can see up to three world maps. This is really impractical for several reasons:
you can not zoom out infinitely;
if you want also insert markers into the map they will be drawn only on the 'main' map;
potentially you can have a path that goes around the world (passing in sequence from America, Europe, Asia, and America again and so on...) many times, and it would be really terrible to have so many little maps one after each other;
I googled a lot about this problem, and I didn't find any solution, there is a bug open on the bug tracker, but it is unsolved.
In my opinion the 'right' way to do is simply the following: at most one map and if a path has to goes out from one margin of the map/image, then it should appear on the opposite margin and continues to the destination, drawn on the same map.
So I found a first workaround:
you draw your path, and with the same style (line's color, etc) you also draw the path in a reversed way (Google static map allows to draws multiple paths in the same map), i.e. path=A|B|C&path=C|B|A and this will solve the problem in many situations (i.e. the path exits from one side of the image and enters from the other). Unfortunately this not works always: if you have a path that cross the image margin two consecutive times, then you lose a portion of your path
To solve this problem I found a second workaround:
- not draw simply the path and its reverse, but draw a different path for every pair of locations of the path (and reversed), i.e. for a path A->B->C then: path:A|B,path=B|C,path=C|B,path=B|A and this works always
The drawback is that in this way the URL becomes very long and the limit of 2048 characters for URLs is easily reached.
The best solution would be to compute manually the center, check manually where the path will cross the margin, and only for this portion of the path draw an additional path going between the two locations at the margin (and maybe also the reverse), but I do not think it really worth, although I do not think Google ever will solve this problem.

Can I draw lines on top of an "gif" image using the <canvas> function?

I'm having difficulty drawing lines on top of an uploaded "map.gif" image.
Basically I've upload a small outline map and use the "area" function to create defined areas (cities, roads, etc). When I click on a city a snall pop up gets displayed with the word "hey, you've just click on Dallas" (or where ever). All that works just fine.
My problem is that my map is actually just a blank outline with no actual cities or roads drawn on it.
Therefore I tried using the "canvas" function to draw the cities (circles) and roads (lines).
The only problem is that they appear below the map rather than on top of it.
Any ideas as to how I can get the lines to appear on the map?
Many thanks,
Pete
You might just have to try playing with the CSS z-index values of the image and canvas.
Do make sure you set the canvas to be transparent.
An other possibility is to replace the image with the canvas (or just load the image in the canvas to begin with).
For some hints on how to use images with canvas take a look here.
I would load the gif directly in the canvas memory, and then do all the rest inside the canvas itself.
The gif is not animated, right?
Some reference about loading: https://developer.mozilla.org/en/Canvas_tutorial/Using_images