Maps - Polyline Change Color Based On Speed - javascript

I have an array of 3 different levels of color with speed ranging between values of
less than 60
between 60 and 80
more than 120.
I can put each lat long in an array where speed is one of the 3 options and use a different color for each however I have noticed that, if I have speed less than 60 as a starting point, for example, and then only have that at the end as well, the less than 60 at the beginning will connect with the less than 60 at the end therefore drawing a straight line, is there a way I can connect polyline based on minimum distance perhaps, even if I use different zoom levels point Y in an array of say less than 60 will connect to point Z (the next point) because it does not know of the other two arrays in between.
var myTripGoing60 = [];
for (i = 0; i < latlngdataGoing60.length; i = i + 2) {
var point = new google.maps.LatLng(latlngdataGoing60[i], latlngdataGoing60[i + 1]);
myTripGoing60.push(point);
}
var myTripGoing6080 = [];
for (i = 0; i < latlngdataGoing6080.length; i = i + 2) {
var point = new google.maps.LatLng(latlngdataGoing6080[i], latlngdataGoing6080[i + 1]);
myTripGoing6080.push(point);
}
var myTripGoing120 = [];
for (i = 0; i < latlngdataGoing120.length; i = i + 2) {
var point = new google.maps.LatLng(latlngdataGoing120[i], latlngdataGoing120[i + 1]);
myTripGoing120.push(point);
}
var flightPath = new google.maps.Polyline({
path: myTripGoing60,
strokeColor: "#000000",
strokeOpacity: 0.8,
strokeWeight: 7
});
flightPath.setMap(map);
var flightPath = new google.maps.Polyline({
path: myTripGoing6080,
strokeColor: "#99FF00",
strokeOpacity: 0.8,
strokeWeight: 7
});
flightPath.setMap(map);
var flightPath = new google.maps.Polyline({
path: myTripGoing120,
strokeColor: "#003300",
strokeOpacity: 0.8,
strokeWeight: 7
});
flightPath.setMap(map);

I used Markers (dots) instead of Polyline - It will do for now.

What I did to achieve this was:
Go through every coordinate in your array, and grab the current iteration as the starting point of the polyline and the current iteration + 1 for the end point of that polyline, you can put the colour you want for that line.
Then you move to the next one, and so on, repeat this process for every coordinate you have in your array.

Related

Animate google maps polyline

I'd like to draw an animated (geodesic) polyline in google maps, a bit like this: http://planefinder.net/route/SFO/
I found many tutorials on how to animate a symbol along a polyline, but nothing about animating the polyline itself from the source to the destination.
Any hints ? Where should I start ?
Any help is really appreciated.
I've had some success with the following:
var departure = new google.maps.LatLng(dept_lat, dept_lng); //Set to whatever lat/lng you need for your departure location
var arrival = new google.maps.LatLng(arr_lat, arr_lng); //Set to whatever lat/lng you need for your arrival location
var line = new google.maps.Polyline({
path: [departure, departure],
strokeColor: "#FF0000",
strokeOpacity: 1,
strokeWeight: 1,
geodesic: true, //set to false if you want straight line instead of arc
map: map,
});
var step = 0;
var numSteps = 250; //Change this to set animation resolution
var timePerStep = 5; //Change this to alter animation speed
var interval = setInterval(function() {
step += 1;
if (step > numSteps) {
clearInterval(interval);
} else {
var are_we_there_yet = google.maps.geometry.spherical.interpolate(departure,arrival,step/numSteps);
line.setPath([departure, are_we_there_yet]);
}
}, timePerStep);
This is basically using an interval to redraw the path. At each step, the visible, animated path makes up a larger percentage of the total path from departure to arrival until finally the arrival location is reached.

Animating radius growth/shrink of a circle on google maps in a given time

I´m trying to animate the growth/shrink of the radius of a circle on the Google Maps API. Right now what I have is a method in JS that takes the time given, the final radius and calculates a delta of the radius, with that it calculates the time rate (or the number of milliseconds to wait until the next iteration of the cycle). The thing is that it's working for larger times (like 3 seconds or more) and for smaller times it's taking it more than it should (almost for everything lower or equal to 1 sec, it's taking it like 2 secs).
Here's the method>
var animateRadius = function(change){
var radiusDelta = Math.abs(change.FinalRadius-Circle.getRadius());
var radiusChangeRate = 1;
var timeRate = (radiusChangeRate*change.FinalTime)/radiusDelta;
if(timeRate <= 1){
/*since the setInterval method only works with miliseconds
if the timespan is less than one milisecond, the radius change
rate has to be bigger in order to make it on time, and since this
only happens in smaller times, I think the error is around here..*/
timeRate = 1;
radiusChangeRate = (timeRate*radiusDelta)/change.FinalTime;
}
if(change.FinalRadius > Circle.getRadius()){
//This just tells if the circle is growing or shrinking
radiusChangeRate = radiusChangeRate*-1;
}
var interval = window.setInterval(function(){
if(visionRadiusCircle.getRadius() == change.FinalRadius){
window.clearInterval(interval);
interval = 0;
}
Circle.setRadius(Circle.getRadius() - radiusChangeRate);
}, timeRate);
}
I can't figure out why this is not working. Any thoughts? Any idea is welcome, even if it's a different algorithm (I'm not even sure if there's a better way to do this).
Thanks!
Here is what I have done. You can adjust the animation by adjusting the time interval given in setTimeout function. http://jsbin.com/oritec/2/edit
function getCircle() {
var circle = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: 'red',
fillOpacity: 0.6,
scale: 2,
strokeColor: 'red',
strokeWeight: 1,
strokeOpacity: 0.6
};
return circle;
}
function init() {
var mapCenter = new google.maps.LatLng(41.7833, 5.2167);
var map = new google.maps.Map(document.getElementById('map'), {
'zoom': 2,
'center': mapCenter,
draggable: false,
disableDefaultUI: true,
'mapTypeId': google.maps.MapTypeId.ROADMAP
});
var rad = 0;
var sop = 1;
var sw = 1;
var fillop = 1;
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(18.7000, 79.1833),
icon: getCircle(),
draggable: false
});
for(var i=0;i<10;i++)
{
setTimeout(function(){
animate();
rad += 50000;
sop -= 0.1;
fillop -= 0.1;
sw -= 0.1;
},i* 50);
}
function animate(){
var circle2 = new google.maps.Circle({
map: map,
radius: rad,
center: new google.maps.LatLng(18.7000, 79.1833),
strokeColor: "#FF0000",
fillColor: "#FF0000",
fillOpacity: fillop,
strokeWeight: sw,
strokeOpacity: sop
});
setTimeout(function(){
circle2.setMap(null); },100);
}
}
google.maps.event.addDomListener(window, 'load', init);

Google map circles are not round

I am trying to draw many circles over a Google Map (many circles per rooftop).
I tried the Circle class and seem to be okay for big circles, but when drawing small ones they are not round at all.
The code I'm using goes like this:
for(var i = 0; i < latitudes.length; i++)
var newCircle = new google.maps.Circle({
strokeColor: "#FFFFFF",
strokeOpacity: 0,
strokeWeight: 1,
fillColor: "#FFFFFF",
fillOpacity: 1,
map: map,
center: new google.maps.LatLng(latitudes[i], longitudes[i]),
radius: 0.5
});
newCircle.setMap(map);
And the result is:
I know that there are other ways to draw points over a google map, but I'd really like to go with the google solution if there is a way to make them look round as they should be.
You could use Symbols, they should be perfect circles. Try this:
var whiteCircle = {
path: google.maps.SymbolPath.CIRCLE,
fillOpacity: 1.0,
fillColor: "white",
strokeOpacity: 1.0,
strokeColor: "white",
strokeWeight: 1.0,
scale: 1.0
};
Then
for(var i = 0; i < latitudes.length; i++) {
var latLng = new google.maps.LatLng(latitudes[i], longitudes[i])
var newCircle = new google.maps.Marker({
icon: whiteCircle,
position: latLng
});
newCircle.setMap(map);
}
The circles are likely to be huge, so play around with the scale to get it right.
I have never used the Circle class. Symbols were introduced in this year's Google I/O. They are vectors, meaning you can pretty much define your own shape. Here's a link for more info:
googlegeodevelopers.blogspot.com/2012/06/powerful-data-visualization-with.html
Anti-aliasing is critical.
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON)
The Google solution will not work for smaller circles.

Create triangle in google map

I was searching from last 1-2 hours about this question but didn't get any answer if this question is posted before then please give me link and delete this one anyways,
I've a marker in my google map and its like mobile tower
I want to create 10 KM triangle of 120 degree on that marker click,
here's the my code :
google.maps.event.addListener(marker2,"click",function(e){
var myLatLng = e.latLng;
var Tlat = myLatLng.lat();
var Tlng = myLatLng.lng();
var Tlng2 = Tlng+(10*0.009);
var Tlng3 = Tlng-(10*0.009);
var Tlat2 = Tlat+30;
var Tlat3 = Tlat-30;
var triangleCoords = [
new google.maps.LatLng(Tlat2, Tlng2),
new google.maps.LatLng(Tlat, Tlng),
new google.maps.LatLng(Tlat3, Tlng3)
];
alert(triangleCoords);
Triangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: "#FF0000",
fillOpacity: 0.35
});
Triangle.setMap(map);
My current lat-long is 23.061389, 76.37222199999997 I don't know 10*0.009 is correct formula to find out km or adding 30 degree is correct or not
Follow the link
http://www.birdtheme.org/useful/v3tool.html
this will help you to draw any type of shape polygon, rectangle with source code on Google Map V3.

drawing a line in google maps perpendicular to two points

I have two coordinates for which I would like to draw a perpendicular line of equal length. Is there either a simple google maps offset for this or a clean javascript approach by which I might accomplish this? What would that be?
Here is what I have thus far. As you can see, I plot the two points as markers and then attempt to draw a line between them, except I need to get that line perpendicular to the line between the two coordinates.
var locations = [
['', position.coords.latitude, position.coords.longitude, 1],
['', llat, llng, 2]
];
var marker, i;
for ( var i = 0; i < locations.length; i++ )
{
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
}
var borderPlanCoordinates = [
new google.maps.LatLng(llat, position.coords.longitude),
new google.maps.LatLng(position.coords.latitude,llng)
];
var borderPath = new google.maps.Polyline({
path: borderPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 10,
map: map
});
borderPath.setMap(map);
So you have two points with coordinates (x1,y1) and (x2, y2) and you want to draw a line segment whose length is the distance between them, which is the perpendicular bisector of the segment connecting them, and which is bisected by said segment?
Probably the simplest way is to set cx = (x1 + x2)/2, cy = (y1+y2)/2), dx = (x2-x1)/2, dy = (y2-y1)/2 and then draw a line from (cx-dy, cy+dx) to (cx+dy, cy-dx).
This works because (cx, cy) is the midpoint of the segment you want, and then you're just taking the vector from that midpoint to (x2,y2) and rotating it by plus and minus 90 degrees to find the endpoints of the segment you want to draw.
I tried this solution, the middle of the segment is ok BUT it doesn't look perpendicular on google maps, I suspect because of spherical projection (not orthonormal).
Here is a solution that works :
spherical = google.maps.geometry.spherical;
var F = new google.maps.LatLng(latF, longF);
var T = new google.maps.LatLng(latT, longT);
// M is the middle of [FT]
var latM = (latF + latT)/2;
var longM = (longF + longT)/2;
var M = new google.maps.LatLng(latM, longM);
// Get direction of the segment
var heading = spherical.computeHeading(F, T);
var dist = 200; // distance in meters
// Place point A that is oriented at 90° in a distance of dist from M
var A = spherical.computeOffset(M, dist, heading+90);
var perpendicularCoordinates = [M, A ];
var perpendicular = new google.maps.Polyline({
path: perpendicularCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2,
map: map
});
Here is the related fiddle : http://jsfiddle.net/8m7vm650/15/
Please note that you need to use an optional google maps library called geometry which is done by adding libraries=geometry to query string when loading maps : http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false

Categories

Resources