How can I create a polygon(only a square in my case) around a given point(lat/lang) x meters around the given point. It's just a visual representation of a geofence but I dont need all the calculations whether a point is outside a geofence or not. I tried using the code below but its creating a rectangle instead of a square and I'm not even sure if the 1000 meter boudaries are being rendered correctly.
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.addControl(new GSmallMapControl());
GEvent.addListener(map, 'click', function(overlay, latlng) {
var lat = latlng.lat();
var lng = latlng.lng();
var height = 1000; //meters
var width = 1000; //meters
var polygon = new GPolygon(
[
new GLatLng(lat + height / 2 * 90 / 10000000, lng + width / 2 * 90 / 10000000 / Math.cos(lat)),
new GLatLng(lat - height / 2 * 90 / 10000000, lng + width / 2 * 90 / 10000000 / Math.cos(lat)),
new GLatLng(lat - height / 2 * 90 / 10000000, lng - width / 2 * 90 / 10000000 / Math.cos(lat)),
new GLatLng(lat + height / 2 * 90 / 10000000, lng - width / 2 * 90 / 10000000 / Math.cos(lat)),
new GLatLng(lat + height / 2 * 90 / 10000000, lng + width / 2 * 90 / 10000000 / Math.cos(lat))
], "#f33f00", 2, 1, "#ff0000", 0.2);
map.addOverlay(polygon);
});
I ported this PHP function to calculate the location an arbitrary distance and bearing from a known location, to Javascript:
var EARTH_RADIUS_EQUATOR = 6378140.0;
var RADIAN = 180 / Math.PI;
function calcLatLong(longitude, lat, distance, bearing)
{
var b = bearing / RADIAN;
var lon = longitude / RADIAN;
var lat = lat / RADIAN;
var f = 1/298.257;
var e = 0.08181922;
var R = EARTH_RADIUS_EQUATOR * (1 - e * e) / Math.pow( (1 - e*e * Math.pow(Math.sin(lat),2)), 1.5);
var psi = distance/R;
var phi = Math.PI/2 - lat;
var arccos = Math.cos(psi) * Math.cos(phi) + Math.sin(psi) * Math.sin(phi) * Math.cos(b);
var latA = (Math.PI/2 - Math.acos(arccos)) * RADIAN;
var arcsin = Math.sin(b) * Math.sin(psi) / Math.sin(phi);
var longA = (lon - Math.asin(arcsin)) * RADIAN;
return new GLatLng (latA, longA);
}
I have written a working example of this function that you can check out (source).
I use the Pythagorean Theorem to translate from a width of a square to a radius, if you want to use a simple 1000 meter radius from the center you can do that instead:
// this
var radius = 1000;
// instead of this
var radius = (Math.sqrt (2 * (width * width))) / 2;
Related
Here is my code. For some reason Sheets is saying that the "Split function is not recognized".
function distance3(latlon1, latlon2){
var [lat1, lon1] = split(latlon1,",");
var [lat2, lon2] = split(latlon2,",");
var R = 6371000; // radius of the earth in meters, https://en.wikipedia.org/wiki/Earth_radius
var dLat = (lat2-lat1) * Math.PI / 180; // Convert degrees to radians
var dLon = (lon2-lon1) * Math.PI / 180; // Convert degrees to radians
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(lat1 * Math.PI / 180 ) * Math.cos(lat2 * Math.PI / 180 ) *
Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
// Distance in meters, rounded to an integer.
return Math.round(d)*0.000621371;
}
THANK YOU!
Try:
var [lat1, lon1] = latlon1.split(",");
I am implementing consistent hashing and hence drawing a circle with sectors as shown in the Circle Demo. The sectors represents the Nodes.
The HTML withing which my Circle resides is :
<div id="container1">
<div id="svgcontainer"></div>
</div>
Now I want to add some dots(small rings) over the circumference of the circle to show the key-value pair that belong to a particular node.
I am sing HTML5 for my circle.
After adding the data(key value pair my circle) , the circle should have some rings(or any other representations) on its boundary like required circle output
How can I achieve this in HTML5 ?
TIA :)
The dot for a given sector will be positioned at a point (xd,yd) on the circumference half ways between the sector's (x1,y1) and (x2,y2) points. Calculating the dot's position (xd,yd) will be similar to calculating the sector's (x1,y1) and (x2,y2) but with an angle that is half ways between the anlges used for calculating (x1,y1) and (x2,y2). If you wish to place text near the dot and outside the circle then calculating the text's position (xt,yt) will be similar to calculating the dot's position (xd,yd) but with a larger radius. For example, the existing addSector() function could be modified to...
function addSector() {
sector++;
group.clear();
paper.clear();
var start = 0;
var angle = 360 / sector;
var col = 0;
var x1;
var y1;
var x2;
var y2;
var xd;
var yd;
var xt;
var yt;
var i;
var path;
var dot;
var text;
var textPadding = 15;
for (i = 0; i < sector; i++) {
x1 = Math.round((x + Math.cos(start * Math.PI / 180) * radius) * 100) / 100;
y1 = Math.round((y + Math.sin(start * Math.PI / 180) * radius) * 100) / 100;
x2 = Math.round((x + Math.cos((start + angle) * Math.PI / 180) * radius) * 100) / 100;
y2 = Math.round((y + Math.sin((start + angle) * Math.PI / 180) * radius) * 100) / 100;
path = paper.path("M" + x + "," + y + " L" + x1 + "," + y1 + " A" + radius + "," + radius + " 0 0 1 " + x2 + "," + y2 + "z");
path.attr({"fill": colors[col], "stroke" : null});
group.push(path);
col++;
if (col == colors.length) col = 0;
start += angle;
}
for (i = 0; i < sector; i++) {
start = i * angle;
xd = Math.round((x + Math.cos((start + angle / 2) * Math.PI / 180) * radius) * 100) / 100;
yd = Math.round((y + Math.sin((start + angle / 2) * Math.PI / 180) * radius) * 100) / 100;
dot = paper.circle(xd, yd, 5);
dot.attr({"fill": "#FFFFFF", "stoke": "#000000"});
xt = Math.round((x + Math.cos((start + angle / 2) * Math.PI / 180) * (radius + textPadding)) * 100) / 100;
yt = Math.round((x + Math.sin((start + angle / 2) * Math.PI / 180) * (radius + textPadding)) * 100) / 100;
text = paper.text(xt, yt, i.toString());
}
}
I have a marker on a Google Map (Android) and I want to move the marker to a new position given bearing and distance.
//lat, lng in degrees. Bearing in degrees. Distance in Km
private LatLng newPostion(Double lat,Double lng,Double bearing,Double distance) {
Double R = 6371; // Earth Radius in Km
Double lat2 = Math.asin(Math.sin(Math.PI / 180 * lat) * Math.cos(distance / R) + Math.cos(Math.PI / 180 * lat) * Math.sin(distance / R) * Math.cos(Math.PI / 180 * bearing));
Double lon2 = Math.PI / 180 * lng + Math.atan2(Math.sin( Math.PI / 180 * bearing) * Math.sin(distance / R) * Math.cos( Math.PI / 180 * lat ), Math.cos(distance / R) - Math.sin( Math.PI / 180 * lat) * Math.sin(lat2));
Double newLat = 180 / Math.PI * lat2;
Double newLng = 180 / Math.PI * lon2;
LatLng newLatLng = new LatLng(newLat, newLng);
return newLatLng;
}
LatLng newPos = newPostion(myMark.getPosition().latitude,myMark.getPosition().longitude, 90.0,3000.0);
Distance is calculated speed * time.
distance = speed * time
Let's say the marker represents a car and the car goes 100 km/h and I need to update the marker every 5 seconds.
distance = 100 * (5/60)
but the problem is showing distance on Google map because Google maps are scaled. Using distance calculated above to move the marker will move the marker much further.
Can anyone help me to convert real distance to Google map distance?
In your distance calculation, you're mixing seconds with minutes (5 seconds, 60 minutes). It should be:
distance = 100 km * (5 sec / 3600 sec)
I was wondering if someone could help me with a circle meter gauage i have taken some code from a different example and i am just protypting stuff to see if i can get it to work here is a working example.
http://jsbin.com/ixuyid/28/edit
Click run with javascript
Code below
var context;
canvas = document.getElementById('myCanvas');
context = canvas.getContext('2d');
//use a reusable function
function drawCircle(num){
console.log(num);
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var startAngle = 0 * Math.PI;
var endAngle = num * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 5;
// line color
context.strokeStyle = 'black';
context.stroke();
}
drawCircle();
var num = 1;
setInterval(function(){
},1000);
+function(){
var ctx = new webkitAudioContext()
, url = '//kevincennis.com/sound/loudpipes.mp3'
, audio = new Audio(url)
// 2048 sample buffer, 1 channel in, 1 channel out
, processor = ctx.createJavaScriptNode(2048, 1, 1)
, meter = document.getElementById('meter')
, source
audio.addEventListener('canplaythrough', function(){
source = ctx.createMediaElementSource(audio)
source.connect(processor)
source.connect(ctx.destination)
processor.connect(ctx.destination)
audio.play()
}, false);
// loop through PCM data and calculate average
// volume for a given 2048 sample buffer
processor.onaudioprocess = function(evt){
var input = evt.inputBuffer.getChannelData(0)
, len = input.length
, total = i = 0
, rms
while ( i < len ) total += Math.abs( input[i++] )
rms = Math.sqrt( total / len )
meter.style.width = ( rms * 100 ) + '%';
context.clearRect(100,50,200,200);
drawCircle(rms);
}
}()
I seem to be having issue with the levels???
Any help
Change these two lines in the drawCircle function:
var startAngle = 0; //multiplying with 0 will result in 0
var endAngle = 360 * num * Math.PI / 180;
Your num seem to be a value between 0 and 1 so we need to add what we're using that with, here 360 degrees, then convert by using PI / 180.
The other problem is that the clearRect wasn't extended far enough so it left part of the arc uncleared to the right.
Tip: To make it look more realistic you can update your rms only when the new rms is higher, and if not just subtract a small value for each frame.
For example:
//global scope
var oldRMS = 0;
Inside your processor.onaudioprocess after vars:
if (rms > oldRMS) oldRMS = rms;
meter.style.width = ( oldRMS * 100 ) + '%';
context.clearRect(100,50,canvas.width,canvas.height);
drawCircle(oldRMS);
oldRMS -= 0.04; //speed of fallback
Modifcations:
http://jsbin.com/ixuyid/29/edit
i am going to develop a location service app i have the application part now i have the work on server side for this i have to calculate the distance between 2 points
for ex(point 1 to point 2 distance = 1 km) and i have got a code when i tried implementing the code shows wrong distance actual km is 1 but the code shows 300 meters.
Can anybody say me why this happens?
Thank you..
Why c# if you can achieve it by javascript
var R = 6371; // km
var dLat = (lat2-lat1).toRad();
var dLon = (lon2-lon1).toRad();
var lat1 = lat1.toRad();
var lat2 = lat2.toRad();
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(lat1) * Math.cos(lat2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;