Google maps to show locations - html

In my application i want to show two or more points in the google maps and also need to draw a line between them. I want this to show by a tag of html. How can i do it??

So you need to use the static maps API.
Here's an example with markers and a polyline:
<img src="http://maps.googleapis.com/maps/api/staticmap?
size=500x300
&sensor=false
&markers=color:green|label:1|51.511333,-0.119355
&markers=color:blue|label:2|51.507801,-0.107569
&markers=color:red|label:3|51.510999,-0.104297
&path=color:0xff0000ff|weight:5|51.511333,-0.119355|51.506205,-0.114462|51.507774,-0.10861|51.507801,-0.107569|51.5071,-0.107344|51.507207,-0.105016|51.507507,-0.104404|51.510999,-0.104297">
The last line starts off setting the attributes for the polyline, i.e. its color is red (ff0000). The last 'ff' indicates it's 100% solid, but you can vary these last two characters anywhere between 00 - FF (base 16) to go between 0 - 100% opacity (or if you leave those last two characters off entirely, it'll default to 50% opacity). It has a weight (thickness) of 5.
After that, it's just a list of coordinates for the polyline, each one separated by a |
Check the documentation: https://developers.google.com/maps/documentation/static-maps/intro#Paths

Related

Is there a way to determine whether there's a sufficient amount of space in a Pie chart segment for a label?

In the attached Google charts Pie chart the labels fit well inside the segments. Determining the length of a bit of text in HTML5 canvas is easy enough - but how do you determine whether the label will fit into a particular segment (using trigonometry) ? As you can see on the image, two of the segments don't have labels inside the segment.
EDIT: Here's an example of what I have at the moment: https://www.rgraph.net/tests/canvas.pie/in-pie-labels.html
As you see the labels for the small segments overlap. What I'm after is a way to calculate whether there's enough space for the labels at the point where they're going to be rendered. If not, I can just not draw the label like in the example image above.
Could chord size be useful to do this?
Here's the forumulae for the chord size that I found via Google:
"Chord length using trigonometry = 2 × r × sin(θ/2); where 'r' is the radius of the circle and 'θ' is the angle subtended at the center by the chord."
I sorted it (in about one hour) after 3 days of trying to calculate it with trig by using the built-in context.isPointInPath() function...
Draw the text (transparent color) to get the coordinates (x/y/w/h) of it. You might be able to get away with measuring it to get the width and height.
Draw the segment in a transparent color and do not stroke or fill it. Also, do not close the path.
Test each corner of the text rectangle (formed the x/y/w/h that you got above) using the context.isPointInPath() function. If the function returns true for each corner of the rectangle formed by the coordinates of the text, then the text will fit into the segment.

Plotly - Hide a point

I have a set of scatter points which I want to connect, as shown below. I want to connect the points, but I want to hide the origin while keeping the point (x1, y1). How do I do this?
fig.add_trace(go.Scatter(x=[0, x1], y=[0, y1])
You can set the opacity of the markers to a value between 0 and 1; 0 meaning invisible, and 1 meaning totally opaque
fig=go.Figure()
data=[0,1,2]
dot_opacity=np.ones(len(data))
dot_opacity[0]=0
fig.add_trace(go.Scatter(x=[0, 1,3], y=[0, 1,2], marker=dict(opacity=dot_opacity)))
fig.add_trace(go.Scatter(x=[0, x1], y=[0, y1], alpha=0)
set alpha between 0 to 1
https://matplotlib.org/stable/api/_as_gen/matplotlib.pyplot.scatter.html
You can use mode parameter to hide markers as follows:
fig.add_trace(go.Scatter(x=[0, x1], y=[0, y1], mode="lines")
The API reference of Scatter states:
mode – Determines the drawing mode for this scatter trace. If the provided mode includes “text” then the text elements appear at the coordinates. Otherwise, the text elements appear on hover. If there are less than 20 points and the trace is not stacked then the default is “lines+markers”. Otherwise, “lines”.

Who knows, or knows how to figure out, which google map markers are available?

I want to use a variety of location markers in a map, of different colors. I like google's "teardrop"-shaped ones so that the location itself is less obscured, due to the point top of the inverted teardrop.
This is a link to the green one:
http://www.googlemapsmarkers.com/v1/009900/
...and the green uses 0099FF
But what about the other colors? Is there a list somewhere or do I have to write a utility to convert color to RGB, or what?
Even with that, how would I know which colors are supported/supplied? Or are the colors dynamically generated based on the RGB value you pass?
UPDATE
Based on the chart here:
http://cloford.com/resources/colours/500col.htm
...I would expect that entering this:
http://www.googlemapsmarkers.com/v1/65535/
...would return a bright yellow marker, but instead I get:
"400. That’s an error.
Your client has issued a malformed or illegal request.
The parameter 'chs' must have a width of at least 1 pixel.
That’s all we know."
UPDATE 2
I also found that you can put text on the marker by inserting the text in the penultimate spot.
This returns a blank yellow inverted teardrop:
http://www.googlemapsmarkers.com/v1/FFFF00/
..and this:
http://www.googlemapsmarkers.com/v1/Platypus/FFFF00/
...returns an inverted yellow teardrop with the word "Platypus" plastered on top of it.
You can pass your own RGB color. I suppose the markers are dynamically generated when the server receive your request, but anyway, you can create the color you exactly want.

Make a turn based system like final fantasy tactics AS3

i wanted to make a turn based system like final fantasy tactics. I already created the map, which is 5x5 tiles grid and the characters which is each character places in the end of the tiles. I have 2 teams, which are named Red and Yellow.
------Red-------:
First character is at 0,0. Second character is at 0,1. Third character is at0.2, fourth character is at0.3, and the last one is at0.4`.
-----Yellow------:
First character is at 5.0. Second character is at 5.1. Third character is at 5.2, fourth character is at 5.3, and the last one is at 5.4.
I wanted Red team are moving first and make a decision (whether it is attack or wait), and after 5 characters of the Red team is already made a decision, the Yellow team is the one that make a decision (Yellow team is an AI)
But, i don't know how to move my characters into the next grid (e.g: from 0,0 to 0,1) by clicking the left mouse button and also how do i display a grid (when select a move selection) that shows how many tiles that the character able to move.
Anyone know about this? or how should i know more about this? is there any recommendations books or webs?
You have your basic data structures set up, but now you need to get some higher level code to manipulate that data.
First of all, I think you should work on selecting locations on the grid with the mouse. Once you can click and get that grid coordinate saved to a variable, you need to set up a function to move your characters. After the first click (on a character), you need to check the valid moves, and for each valid move, you need to render an image on the grid square (or highlight the square's texture).
Secondly, you need a function which iterates through all the characters in each team, according to who moves next. When you have gone through Red.length (red is an array consisting of each player), then you switch to counting through Yellow.length, and running the AI for each character. If you are trying to make a two player game, you instead ask for user input a second time for the yellow team.
I recommend that you learn about how to display your grid and set up a simple way to highlight squares on the grid. After that, you need to convert mouse coordinates into grid coordinates. Your teams should each be an array of characters. I'm not familiar with actionscript, but in the languages I know, they would look like this:
team[6] = {Character1, Character2, Character3... }
Character1.position = {x, y}
running a turn would be something like this:
while battle == not finished {
for (i = 0; i < red.length; i++) {
getInput();
move(red[i], newX, newY); //red[i].position = {newX, newY}
}
for (i = 0; i < yellow.length; i++) {
runAI();
move(yellow[i], newX, newY);
}
}
The hardest part will be the mouse selection and drawing the grid/characters. Graphics are always a nuisance. The data itself just takes a bit of thinking. Your question in particular seems to be about game programming. My advice is to make the grid, then figure out how to display the grid. Then get mouse input. Finally, worry about moving the characters and highlighting squares.

google maps api marker composed of image and line

Is it possible with "Google Maps Api" to obtain a marker composed of a line and ends with a picture?
I tried to use a marker consists of a single image (eg, line and circle) and if there are 2 adjacent markers will be covered from the first second.
For example I have marker like this:
--0
and the second it's close the result is:
--0-0
I must rotate so the result is:
--0
\
0
how I can make this?
Take a look to MarkerOptions the attribute anchorPoint.
Using the Marker position you can detect a possible overlap between images, and change that value and image to do what you need.