I am creating a coverage map for my company's vendors, and then need to check how many of our customers live outside the overall coverage. A vendor's coverage area is always a circle.
I used this solution to combine the coverage areas of our vendors into a single polygon so that I can use the containsLocation function to compare out customer's locations. The problem is that the containsLocation function identifies some overlapping coverage areas as being outside coverage. Here is an example, where the pin should remain invisible because it is within the coverage of 2 vendors.
Overlapping Vendor Coverage Example
function updateMap(){
var radius = $('#radius').val();
$.ajax({
url: "",
dataType: "json",
type: "POST",
data: $('#dataForm').serialize()
}).done(function(result){
for(var i=0; i<result.length; i++){
center = {lat: parseFloat(result[i].Latitude), lng: parseFloat(result[i].Longitude)};
shapeArray.push(drawCircle(center, (radius), 1));
}
coverage = new google.maps.Polygon({
paths: shapeArray,
strokeColor: "#ff0000",
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: "#ff0000",
fillOpacity: 0.35,
map: map
});
});
}
function drawCircle(point, radius, dir)
{
var d2r = Math.PI / 180; // degrees to radians
var r2d = 180 / Math.PI; // radians to degrees
var earthsradius = 3963; // 3963 is the radius of the earth in miles
var points = 32;
// find the raidus in lat/lon
var rlat = (radius / earthsradius) * r2d;
var rlng = rlat / Math.cos(point.lat * d2r);
var extp = new Array();
if (dir==1) {var start=0;var end=points+1} // one extra here makes sure we connect the
else{var start=points+1;var end=0}
for (var i=start; (dir==1 ? i < end : i > end); i=i+dir)
{
var theta = Math.PI * (i / (points/2));
ey = point.lng + (rlng * Math.cos(theta)); // center a + radius x * cos(theta)
ex = point.lat + (rlat * Math.sin(theta)); // center b + radius y * sin(theta)
extp.push(new google.maps.LatLng(ex, ey));
}
return extp;
}
function showUncovered(el){
if(!el.checked){
for(var i=0; i<markerArray.length; i++){
markerArray[i].setVisible(false);
}
return;
}
for(var i=0;i<markerArray.length;i++){
var pos = markerArray[i].position;
var isAffected = false;
if(!google.maps.geometry.poly.containsLocation(pos,coverage)){
markerArray[i].setVisible(true);
}
}
}
Google accepted this as a bug.
https://code.google.com/p/gmaps-api-issues/issues/detail?id=10609
Since you have all the circles you can iterate shapeArray and run .containsLocation(... in each circle, the first that contains the location ends the loop (if not, the marker is outside the polygon).
Actually, this is the solution proposed in the filed bug report (and looks like they won't fix it).
Related
I have an issue, in my leaflet map I've created a triangle from polygon:
var polygon = L.polygon([
[parseFloat(decimal_lat),parseFloat(decimal_lon)],
[parseFloat(decimal_lat) + 1, parseFloat(decimal_lon) - 1],
[parseFloat(decimal_lat) + 1, parseFloat(decimal_lon) + 1] ],
{
color:'green'
});
polygon.addTo(map);
and I want to rotate this polygon around Point[decimal_lon, decimal_lat]. But I'm not able to solve it..
I've created DEMO, where I'm rotating polynom the same I want to rotate my triangle (polygon) to show you my problem.
One way to do it is through matrix rotation. https://en.wikipedia.org/wiki/Rotation_matrix.
You want to translate the point to the center then apply the rotation, then translate it back.
This is what the end of your code would look like.
//changing polyline with slider but I want to change polygon there
range_yaw.onchange = function() {
var yawAngle = (parseFloat(range_yaw.value) / (819 / 360) + 90)
// line
var center = [decimal_lat, decimal_lon]
var end = [decimal_lat + 2, decimal_lon + 2]
var pointListRotated = rotatePoints(center, [center, end], yawAngle)
polyline.setLatLngs(pointListRotated);
// polygon
var polygonPoints = [
center,
[center[0] + 1, center[1] - 1],
[center[0] + 1, center[1] + 1]
]
polygonRotated = rotatePoints(center, polygonPoints, yawAngle)
polygon.setLatLngs(polygonRotated)
};
//
// rotate a list of points in [lat, lng] format about the center.
//
function rotatePoints(center, points, yaw) {
var res = []
var angle = yaw * (Math.PI / 180)
for(var i=0; i<points.length; i++) {
var p = points[i]
// translate to center
var p2 = [ p[0]-center[0], p[1]-center[1] ]
// rotate using matrix rotation
var p3 = [ Math.cos(angle)*p2[0] - Math.sin(angle)*p2[1], Math.sin(angle)*p2[0] + Math.cos(angle)*p2[1]]
// translate back to center
var p4 = [ p3[0]+center[0], p3[1]+center[1]]
// done with that point
res.push(p4)
}
return res
}
Here is a DEMO
I adapted #dooderson and #MBo from this question answers, the final code is something like this, it works perfectly!
rotatePoints (center, points, yaw) {
const res = []
const centerPoint = map.latLngToLayerPoint(center)
const angle = yaw * (Math.PI / 180)
for (let i = 0; i < points.length; i++) {
const p = map.latLngToLayerPoint(points[i])
// translate to center
const p2 = new Point(p.x - centerPoint.x, p.y - centerPoint.y)
// rotate using matrix rotation
const p3 = new Point(Math.cos(angle) * p2.x - Math.sin(angle) * p2.y, Math.sin(angle) * p2.x + Math.cos(angle) * p2.y)
// translate back to center
let p4 = new Point(p3.x + centerPoint.x, p3.y + centerPoint.y)
// done with that point
p4 = map.layerPointToLatLng(p4)
res.push(p4)
}
return res
}
You can approach it a couple ways. Here is one...
FIRST: calculate the bearing and distance to the two 'outer' points from the anchor point. Here are a couple helper functions:
https://github.com/gregallensworth/Leaflet/blob/master/LatLng_Bearings.js
SECOND: adjust those bearings however you want...keep the original distances.
THIRD: Using the new bearings and the distances, calculate the new LatLngs using the accepted answer here: How to calculate the latlng of a point a certain distance away from another? (This uses google maps instead of leaflet, but its easy to port to leaflet)
Let me know if you have any problems implementing...
I have tried lots but could not figure out the problem. I want to draw a polygon around specific lat,lng. The polygon will consists of 13 coordinates in specific radius.
Person inter the address and radius in text box.
Geo code get lat,lng of that address
Center the map to there.
Draw the polygon around that center point with radius
The polygon should consists of 13 coordinates
Code
function showAddress(address, miles) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
address : address
}, function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
//searchLocationsNear(results[0].geometry.location);
var cordinate = results[0].geometry.location;
//alert(cordinate);
var mapOptions = {
center : cordinate,
zoom : 8,
mapTypeId : google.maps.MapTypeId.ROADMAP,
overviewMapControl : true,
overviewMapControlOptions : {
opened : true,
position : google.maps.ControlPosition.BOTTOM_LEFT
}
};
//
//var address = document.getElementById("address").value;
var radius = 1;
var latitude = 23.1793013;
var longitude = 75.78490970000007;
//Degrees to radians
var d2r = Math.PI / 180;
// Radians to degrees
var r2d = 180 / Math.PI;
// Earth radius is 3,963 miles
var cLat = (radius / 3963) * r2d;
var cLng = cLat / Math.cos(latitude * d2r);
//Store points in array
var points = [];
alert("declare array");
var bounds = new google.maps.LatLngBounds();
// Calculate the points
// Work around 360 points on circle
for(var i = 0; i < 13; i++) {
var theta = Math.PI * (i / 180);
// Calculate next X point
circleY = longitude + (cLng * Math.cos(theta));
//console.log("CircleY:"+circleY);
// Calculate next Y point
circleX = latitude + (cLat * Math.sin(theta));
//console.log("circleX:"+circleX);
// Add point to array
var aPoint = new google.maps.LatLng(circleX, circleY);
points.push(aPoint);
bounds.extend(aPoint);
}
points.push(points[0]);
//console.log(points);
//to complete circle
var colors = ["#CD0000", "#2E6444", "#003F87"];
var Polyline_Path = new google.maps.Polyline({
path : points,
strokeColor : colors[0],
// color of the outline of the polygon
strokeOpacity : 1,
// between 0.0 and 1.0
strokeWeight : 1,
// The stroke width in pixels
fillColor : colors[1],
fillOpacity : 0
});
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
Polyline_Path.setMap(map);
} else {
alert(address + ' not found');
}
});
}
Replace i<13;i++ by
i<360;i+=360/13
this will work
thank
edit: the last point isn't needed since gmap will close it automagically
I believe that cLng should be changed to:
var cLng = cLat * Math.cos(latitude * d2r);
(to get a perfect circle, that is)
I'm drawing a circle the size of the radius over which I'm performing a nearby search:
// Point where to search
var searchArea = new google.maps.LatLng(25.435833800555567, -80.44189453125);
// Draw a circle around the radius
var circle = new google.maps.Circle({
center: searchArea,
radius: parseFloat(document.getElementById("distance").value) * 1609.3, //convert miles to meters
strokeColor: "#0000FF",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0000FF",
fillOpacity: 0.4
});
circle.setMap(map);
// Perform search over radius
var request = {
location: searchArea,
radius: parseFloat(document.getElementById("distance").value) * 1609.3, //convert miles to meters
keyword: "coffee",
rankBy: google.maps.places.RankBy.PROMINENCE
};
service.nearbySearch(request, callback);
}
I then plot markers. This works fine but in some cases markers show outside the circle leading me to believe that it might not be the same size as the radius.
Here is a very good example of what I mean.
http://jsfiddle.net/hnPRh/2/
Notice how markers show outside the circle. Why is this happening?
The way I would do it is to calculate the distance from the center point. I've set your radius into a variable called RADIUS, make sure to place it where it is executed after the document has loaded.
I've also modified your for loop to include distance check. The distance function accepts 2 arguments which are both of type google.maps.LatLng
var EARTH_RADIUS = 6378137; // meters
var RADIUS = (parseFloat(document.getElementById("distance").value) * 1609.3);
function deg2rad(deg) {
return deg * (Math.PI / 180);
}
function distance(pos1, pos2) {
var p1Lat = pos1.lat(),
p1Lng = pos1.lng(),
p2Lat = pos2.lat(),
p2Lng = pos2.lng(),
dLat = deg2rad(p1Lat-p2Lat),
dLon = deg2rad(p1Lng-p2Lng),
a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(deg2rad(p1Lat)) * Math.cos(deg2rad(p2Lat));
return EARTH_RADIUS * (2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)));
}
for (var i = 0; i < results.length; i++) {
if (distance(results[i].geometry.location, searchArea) <= RADIUS) {
createMarker(results[i]);
}
}
I have a set of latitude and longitude coordinates in an array. When plotted as points on a Polygon in Google Maps, they form roughly an irregular oval pointing from west to east.
I would like to rotate the polygon to arbitrary degrees with a point near the far left (western) axis as the origin point.
What's important to me is that the overall distances are preserved — the total length and width of the polygon in miles should be preserved even though size of the polygon in pixels will obviously vary because of the map projection.
I've spent many hours Googling and searching on this site for an answer to this question but haven't been able to find one. Strictly speaking this is not a Google Maps issue — it's just a geometry issue related to rotating polygons on a map projection.
Here is more or less (some things dropped/renamed for simplicity) what I've been playing with so far:
function transpose_poly() {
//the polygon I'm transposing; these are actually in lng,lat not lat,lng
var poly = [
[165.2467094000077,11.90511591102683],[165.1960646350092,11.8776472999036],[165.163749733589,11.84385698549516],[165.1260503052001,11.79105209544025],[165.1174590975139,11.73721064669002],[165.1239723221977,11.68443896599666],[165.1455712453083,11.62322111902237],[165.1628352566873,11.60212814234246],[165.2801792409835,11.57112282455308],[165.3469838984795,11.55321856612457],[165.4267372080734,11.49929306693537],[165.565122175408,11.43334434041074],[165.7036021721537,11.37198352732909],[165.7982543390455,11.32757670668951],[165.942446703552,11.2660302522167],[166.0435044916007,11.23207374453692],[166.1628753311194,11.19161490039798],[166.3468035041342,11.13537294275959],[166.432786256031,11.11077339082378],[166.6460225244011,11.09603091173615],[166.9054486129032,11.10353634871533],[167.0953310801652,11.11920326808891],[167.2738338244123,11.14546202299651],[167.5299835821322,11.20017441185735],[167.7587090824888,11.25007287877568],[168.0532186132958,11.32987818697488],[168.3030699093596,11.40339603540862],[168.592055474493,11.49329084618948],[168.8894586866613,11.59767488596071],[169.1097084341002,11.70426500697907],[169.3388671138959,11.8464629880637],[169.47335151263,11.96284699062962],[169.4987805640997,12.00051052731504],[169.5113979458664,12.04997756596092],[169.496674063518,12.07975001861134],[169.4439862794831,12.10473302818016],[169.3792705121883,12.11718325976015],[169.2053586392944,12.12366910168141],[169.0210976722354,12.12171866909852],[168.7390558752391,12.08703266811138],[168.4733370821476,12.04764814638675],[168.1055698159765,12.00021651042535],[167.8745488025422,11.97152786285725],[167.5955303201492,11.94724207538445],[167.1571321566584,11.94152529858467],[166.8673995936747,11.95771709621411],[166.6698153277294,11.98911065050636],[166.4432968316392,12.03361885637251],[166.2604579582592,12.0693923391982],[166.0834945953367,12.09610600014998],[165.9206278637858,12.10688793842689],[165.7421018997999,12.1070118835482],[165.6244752224984,12.09489163127243],[165.4939687494391,12.0642833194958],[165.4055155587918,12.02521842289156],[165.3386147079753,11.97769336095395],[165.278157772496,11.92168821285675],[165.2467094000077,11.90511591102683],
];
var pos = marker.getPosition(); //where it transposes it to
var marker_lat = pos.lat();
var marker_lng = pos.lng();
var angle = document.getElementById("poly_angle").value; //rotational angle
var original_lat = 11.697222; //the original lat/lng of the polygon coordinates above
var original_lng = 165.27194399999996; //used to move the general polygon to a new set of coords as an offset
var new_poly = []; //the transformed polygon
//iterate over polygon array, create new array of Google Maps LatLng objects that are transposed and rotated
for(var i=0; i<poly.length; i++) {
new_poly.push( rotateLatLng( (poly[i][1]-original_lat)+marker_lat,(poly[i][0].lng()-original_lng)+marker_lng,angle));
}
// plot the polygon on the map
poly_obj = new google.maps.Polygon({
paths: poly_new,
strokeColor: "#ff763b",
strokeOpacity: 1,
strokeWeight: 1,
fillColor: "#ff763b",
fillOpacity: 0.25,
map: map,
visible: true
});
}
//this rotating function is cobbled together from code I found... it doesn't really work. It somewhat rotates it but distorts it terribly and gives really bizarre results
function rotateLatLng (pointLat,pointLng,angle) {
var pos = marker.getPosition();
var theX = pointLat;
var theY = pointLng;
var rotationTheta = angle;
var rotationThetaRad = rotationTheta*(Math.PI/180);
var rotationOriginX = pos.lat();
var rotationOriginY = pos.lng();
var newX;
var newY;
if (rotationOriginX == 0 && rotationOriginY == 0) {
newX = theX * Math.cos(rotationThetaRad) - Math.sin(rotationThetaRad) * theY;
newY = theX * Math.sin(rotationThetaRad) + Math.cos(rotationThetaRad) * theY;
} else {
newX = (theX - rotationOriginX) * Math.cos(rotationThetaRad) - (theY - rotationOriginY) * Math.sin(rotationTheta) + rotationOriginX;
newY = (theX - rotationOriginX) * Math.sin(rotationThetaRad) + (theY - rotationOriginY) * Math.cos(rotationTheta) + rotationOriginY;
}
return new google.maps.LatLng(newX,newY);
}
I don't think the above is necessarily the right way to do it at all. Any pointers would be helpful.
A much more simplified version of this problem would be to say that if I had an origin point of lat1,lng1, and another target point of lat2,lng2, how do I calculate lat3,lng3 which is defined as being the same distance between lat1,lng1 and lat2,lng2 but at an arbitrary angle? Because if I knew how to do that, applying that to the entire polygon should be a snap.
I am using bing maps ajax v7 and for simplicity's sake let's say I have 10 PinPoints placed around the world. I'm trying to have the map zoom to the lowest level so that the closest PinPoint is still visible to the current location of the user. If someone could point me in the right direction I would greatly appreciate it.
$(document).ready(function () {
var windowHeight = $(window).height();
var windowWidth = $(window).width();
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {
credentials: "myCredentials",
backgroundColor: "#A4C4ED",
zoom: 3,
height: windowHeight,
width: windowWidth
});
Microsoft.Maps.Events.addHandler(map, 'viewchange', hideInfoBox);
Microsoft.Maps.Events.addHandler(map, 'click', hideInfoBox);
//get users location and set view bound
var geoLocationProvider = new Microsoft.Maps.GeoLocationProvider(map);
var viewRectangle = Microsoft.Maps.LocationRect(geoLocationProvider.getCurrentPosition());
map.setView({ bounds: viewRectangle });
dataLayer = new Microsoft.Maps.EntityCollection();
map.entities.push(dataLayer);
var infoboxLayer = new Microsoft.Maps.EntityCollection();
map.entities.push(infoboxLayer);
//create initial infobox
infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), {
visible: false,
offset: new Microsoft.Maps.Point(0, 20)
});
infoboxLayer.push(infobox);
Microsoft.Maps.loadModule('Microsoft.Maps.Search', { callback: searchModuleLoaded });
});
I assume that you is one pin point and you have another 10 pin points located somewere on the map.
First you need to find the pinpoint that is closest to you.
You can use this function that expect two location objects that contains latitude and longitude.
oLocation1 = {latitude:0,longitude:0};
oLocation2 = {latitude:19,longitude:23};
function calcDistHaversine (oLocation1, oLocation2) {
var dLat = (oLocation2.latitude * Math.PI / 180 - oLocation1.latitude * Math.PI / 180);//*Math.PI*180;
var dLon = (oLocation2.longitude * Math.PI / 180 - oLocation1.longitude * Math.PI / 180);//*Math.PI*180;
var lat1 = oLocation1.latitude * Math.PI / 180;//*Math.PI*180;
var lat2 = oLocation2.latitude * Math.PI / 180;//*Math.PI*180;
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 distance = 6371 * c;
return distance;
};
As a result you will get the distance between those two location with respect yo earth curvature.
Now you have your location and closest pinpoint location.
Lets name them as your,their.
Next you need to create array that contains those two location converted to microsoft location objects.
var yourLocation= new Microsoft.Maps.Location(your.latitude, your.longitude);
var theirLocation= new Microsoft.Maps.Location(their.latitude, their.longitude);
var arr = [];
arr.push(yourLocation);
arr.push(theirLocation);
Now you use bing maps feature that gives you best zoom and pointing according to given locations.
var bestView = Microsoft.Maps.LocationRect.fromLocations(arrLocations);
Then you set the map view according to the best view that we found.
setTimeout((function () {
map.setView({ bounds: bestView });
}).bind(this), 1000);