Related
I need to show all POI and Markers in a Open Layers map with the best zoom defined.
How can I get that?
I need the best zoom to show all markers on view.
function setMapCenter() {
var layers = multiMapa.getLayers();
//that's it. It's started inverted to be adjusted on first iteration below.
var minx = 9999999999;
var miny = 9999999999;
var maxx = -9999999999;
var maxy = -9999999999;
var extent = [];
layers.forEach(function (lay) {
if (lay instanceof ol.layer.Vector) {
vehicleLayer = lay;
var features = lay.getSource().getFeatures();
features.forEach(function (fea) {
//all vectors, in this case, are Points.
var coords = String(fea.getGeometry().getExtent()).split(",");
if (minx > coords[0]) {
minx = coords[0];
}
if (miny > coords[1]) {
miny = coords[1];
}
if (maxx < coords[0]) {
maxx = coords[0];
}
if (maxy < coords[1]) {
maxy = coords[1];
}
});
//console.log(lay.getStyle().getText().getText());
}
});
console.log([minx, miny, maxx, maxy]);
extent.push(minx);
extent.push(miny);
extent.push(maxx);
extent.push(maxy);
multiMapa.getView().fit(extent, multiMapa.getSize()); //[minx, miny, maxx, maxy]);
}
If all your features are on the same layer, get your vector's extent like;
const extent = yourLayer.getExtent();
Then do this;
map.getView().fit(extent);
If they are on separate layers, you can either jam all of the features in a separate layer and get the extent that way or you can combine all of the features extents like this;
let featExtent = featuresOfInterest[0].getGeometry().getExtent();
for (let i = 0; i < featuresOfInterest.length; i++) {
ol.extent.extend(featExtent, featuresOfInterest[i].getGeometry().getExtent());
}
Then use the fit function of the view again like;
map.getView().fit(featExtent);
I created a formula to form a grid on the google earth. I want to get the intersection point between the lat/long. Please tell me how we can get the intersection.I am using SharpKML lib for generating KML
for (int x = 90; x >= 0; x = x - 15)
{
Placemark placemark = new Placemark();
LineString line = new LineString();
CoordinateCollection co = new CoordinateCollection();
for (int i = 0; i <= 180; i = i + 15)
{
Vector cords = new Vector()
{
Latitude = x,
Longitude = i,
Altitude = 1000
};
co.Add(cords);
}
for (int i = -180; i <= 0; i = i + 15)
{
Vector cords = new Vector()
{
Latitude = x,
Longitude = i,
Altitude = 1000
};
co.Add(cords);
}
line.Coordinates = co;
placemark.Geometry = line;
document.AddFeature(placemark);
}
for (int x = -90; x <= 0; x = x + 15)
{
Placemark placemark = new Placemark();
LineString line = new LineString();
CoordinateCollection co = new CoordinateCollection();
for (int i = 0; i <= 180; i = i + 15)
{
Vector cords = new Vector()
{
Latitude = x,
Longitude = i,
Altitude = 1000
};
co.Add(cords);
}
for (int i = -180; i <= 0; i = i + 15)
{
Vector cords = new Vector()
{
Latitude = x,
Longitude = i,
Altitude = 1000
};
co.Add(cords);
}
line.Coordinates = co;
placemark.Geometry = line;
document.AddFeature(placemark);
}
for (int i = 0; i <= 180; i = i + 15)
{
Placemark placemark = new Placemark();
LineString line = new LineString();
CoordinateCollection co = new CoordinateCollection();
for (int x = 0; x <= 90; x = x + 15)
{
Vector cords = new Vector()
{
Latitude = x,
Longitude = i,
Altitude = 1000
};
co.Add(cords);
}
for (int x = -90; x <= 0; x = x + 15)
{
Vector cords = new Vector()
{
Latitude = x,
Longitude = i,
Altitude = 1000
};
co.Add(cords);
}
line.Coordinates = co;
placemark.Geometry = line;
document.AddFeature(placemark);
}
for (int i = -180; i <= 0; i = i + 15)
{
Placemark placemark = new Placemark();
LineString line = new LineString();
CoordinateCollection co = new CoordinateCollection();
for (int x = 0; x <= 90; x = x + 15)
{
Vector cords = new Vector()
{
Latitude = x,
Longitude = i,
Altitude = 1000
};
co.Add(cords);
}
for (int x = -90; x <= 0; x = x + 15)
{
Vector cords = new Vector()
{
Latitude = x,
Longitude = i,
Altitude = 1000
};
co.Add(cords);
}
line.Coordinates = co;
placemark.Geometry = line;
document.AddFeature(placemark);
}
Matthew is correct if the question is how you can find the intersection point of an arbitrary LineString object with your grid using C#. In C++ you can use GEOS http://trac.osgeo.org/geos/ in Java it would be JTS http://www.vividsolutions.com/jts/JTSHome.htm.
If, however, you are creating the grid yourself, and want an answer to the far simpler question of how do I find the intersection points between the horizontal and vertical lines of the grid I just created, the answer would be to use the same exact latitude, longitude values that you used for the LineStrings in a nested loop:
Document document = new Document();
for(y = -90; y < 0; y += 15){
for(x = -180; x < 0; x+= 15){
Point point = new Point();
point.Coordinate = new Vector(x, y);
Placemark placemark = new Placemark();
placemark.Geometry = point;
document.AddFeature(placemark);
}
}
.. repeat for the other 4 quadrants
// It's conventional for the root element to be Kml,
// but you could use document instead.
Kml root = new Kml();
root.Feature = document;
XmlFile kml = KmlFile.Create(root, false);
Here is some source code if you wanted to use DotSpatial, for instance, to find the intersection between the grids and a Shapefile. In this case, the shapefile has river lines and only produced one intersection point. Be advised that the topology intersection code is kind of slow, so you will want to use extent checking to speed things up. In your case you may want to build new Features by using KMLSharp to read a the linestring coordinates in a kml source file, rather than opening a shapefile, but the intersection code would be similar.
As a side note, I don't think the seemingly easy to use FeatureSet.Intersection method is smart enough to handle the case where line intersections produce point features as intersections. It only works for points or polygons where the output is likely to be the same feature type as the input.
using DotSpatial.Controls;
using DotSpatial.Data;
using DotSpatial.Topology;
using DotSpatial.Symbology;
private FeatureSet gridLines;
private void buttonAddGrid_Click(object sender, EventArgs e)
{
gridLines = new FeatureSet(FeatureType.Line);
for (int x = -180; x < 0; x += 15)
{
List<Coordinate> coords = new List<Coordinate>();
coords.Add(new Coordinate(x, -90));
coords.Add(new Coordinate(x, 90));
LineString ls = new LineString(coords);
gridLines.AddFeature(ls);
}
for (int y = -90; y < 0; y += 15)
{
List<Coordinate> coords = new List<Coordinate>();
coords.Add(new Coordinate(-180, y));
coords.Add(new Coordinate(180, y));
LineString ls = new LineString(coords);
gridLines.AddFeature(ls);
}
map1.Layers.Add(new MapLineLayer(gridLines));
}
private void buttonIntersect_Click(object sender, EventArgs e)
{
if (gridLines == null)
{
MessageBox.Show("First add the grid.");
}
IFeatureSet river = FeatureSet.Open(#"C:\Data\Rivers\River.shp");
MapLineLayer riverLayer = new MapLineLayer(river);
map1.Layers.Add(river);
List<DotSpatial.Topology.Point> allResultPoints = new List<DotSpatial.Topology.Point>();
foreach (Feature polygon in river.Features)
{
Geometry lineString = polygon.BasicGeometry as Geometry;
foreach (Feature lineFeature in gridLines.Features)
{
// Speed up calculation with extent testing.
if(!lineFeature.Envelope.Intersects(lineString.Envelope)){
continue;
}
IFeature intersectFeature = lineFeature.Intersection(lineString);
if (intersectFeature == null)
{
continue;
}
MultiPoint multi = intersectFeature.BasicGeometry as MultiPoint;
if (multi != null)
{
for(int i = 0; i < multi.NumGeometries; i++)
{
allResultPoints.Add(intersectFeature.GetBasicGeometryN(i) as DotSpatial.Topology.Point);
}
}
DotSpatial.Topology.Point single = intersectFeature.BasicGeometry as DotSpatial.Topology.Point;
{
allResultPoints.Add(single);
}
}
}
FeatureSet finalPoints = new FeatureSet(FeatureType.Point);
foreach(DotSpatial.Topology.Point pt in allResultPoints){
finalPoints.AddFeature(pt);
}
map1.Layers.Add(new MapPointLayer(finalPoints));
}
I think the DotSpatial library should meet your needs, I have used this library in the past but not made use of the intersections function:
http://dotspatial.codeplex.com/wikipage?title=DotSpatial.Data.FeatureSetExt.Intersection
If you try and do your own line intersection analysis, know that a simplistic Cartesian plane approach will introduce errors (which [I think] become more obvious as you approach the poles).
See here: http://www.geog.ubc.ca/courses/klink/gis.notes/ncgia/u32.html
And here: Intersection between two geographic lines
I'm trying to check if a point is in polygon.
At the moment I have try with this function
pointInPolygon:function (point,polygon){
var i;
var j=polygon.length-1;
var inPoly=false;
var lon = point.longitude;
var lat = point.latitude;
for (i=0; i<polygon.length; i++)
{
if (polygon[i][0]<lon && polygon[j][0]>=lon|| polygon[j][0]<lon && polygon[i][0]>=lon){
if (polygon[i][0]+(lon-polygon[i][0])/(polygon[j][0]-polygon[i][0])*(polygon[j][1]-polygon[i][1])<lat){
inPoly=!inPoly;
}
}
j=i;
}
return inPoly;
}
... this function is seems to work on simple polygon ( http://jsfiddle.net/zTmr7/3/ ) but it won't work for me...
here is sample data of a polygon:
polygon: Array[14]
Array[2]
0: "-120.190625"
1: "29.6614549946937"
Array[2]
0: "-116.87275390625"
1: "32.6320990313992"
Array[2]
0: "-116.60908203125"
1: "34.0363970332393"
Array[2]
0: "-120.89375"
1: "41.9203747676428"
Array[2]
0: "-114.74140625"
1: "45.784484644005"
Array[2]
0: "-115.971875"
1: "48.6489780115889"
Array[2]
0: "-132.758984375"
1: "59.9891712248332"
Array[2]
0: "-162.5099609375"
1: "68.919753529737"
Array[2]
0: "-168.6623046875"
1: "68.9828872543805"
Array[2]
0: "-168.4865234375"
1: "64.2551601036027"
Array[2]
0: "-179.874356794357"
1: "51.0915874974707"
Array[2]
0: "-179.999916362762"
1: "13.1823178795562"
Array[2]
0: "-143.8771484375"
1: "19.9962034117847"
Array[2]
0: "-120.190625"
1: "29.6614549946937"
Maybe you can help... thanks in advance
PS. solution must be especially for Bing maps or universal solution...
The Google maps API does not already provide a method for checking points in polygons. After researching a bit I stumbled across the Ray-casting algorithm which will determine if an X-Y coordinate is inside a plotted shape. This will translate to latitude and longitude. The following extends the google.maps.polygon.prototype to use this algorithm. Simply include this code at a point in the code after google.maps has loaded:
google.maps.Polygon.prototype.Contains = function(point) {
var crossings = 0, path = this.getPath();
// for each edge
for (var i=0; i < path.getLength(); i++) {
var a = path.getAt(i),
j = i + 1;
if (j >= path.getLength()) {
j = 0;
}
var b = path.getAt(j);
if (rayCrossesSegment(point, a, b)) {
crossings++;
}
}
// odd number of crossings?
return (crossings % 2 == 1);
function rayCrossesSegment(point, a, b) {
var px = point.lng(),
py = point.lat(),
ax = a.lng(),
ay = a.lat(),
bx = b.lng(),
by = b.lat();
if (ay > by) {
ax = b.lng();
ay = b.lat();
bx = a.lng();
by = a.lat();
}
// alter longitude to cater for 180 degree crossings
if (px < 0) { px += 360 };
if (ax < 0) { ax += 360 };
if (bx < 0) { bx += 360 };
if (py == ay || py == by) py += 0.00000001;
if ((py > by || py < ay) || (px > Math.max(ax, bx))) return false;
if (px < Math.min(ax, bx)) return true;
var red = (ax != bx) ? ((by - ay) / (bx - ax)) : Infinity;
var blue = (ax != px) ? ((py - ay) / (px - ax)) : Infinity;
return (blue >= red);
}
};
Here we have extended the functionality of google.maps.Polygon by defining a function with name ‘Contains’ which can be used to determine whether the latitude longitude provided in function parameter are within the polygon or not. Here we make use of Ray-casting algorithm and developed a function using the same. After doing this much of exercise now, we can check a point as follows:
var point = new google.maps.LatLng(52.05249047600099, -0.6097412109375); var polygon = new google.maps.Polygon({path:[INSERT_PATH_ARRAY_HERE]}); if (polygon.Contains(point)) { // point is inside polygon }
For complete code and demo please go to: http://counsellingbyabhi.blogspot.in/2013/01/google-map-check-whether-point-latlong.html
The first if statement looks good - you're checking to see if the longitude of the point lies within the longitude of the polygon segment.
The second if should be interpolating the intercept of the segment with the exact longitude of the point, and determining if that intercept is above or below the point. I don't think that is what it is doing, due to a simple typo.
if (polygon[i][1]+(lon-polygon[i][0])/(polygon[j][0]-polygon[i][0])*(polygon[j][1]-polygon[i][1])<lat){
^
You should also include a separate case when polygon[i][0]==polygon[j][0] so that you don't get a divide-by-zero error.
You can use my clone of the libkml variant which I have mirrored in github here: https://github.com/gumdal/libkml-pointinpolygon
With help of the author of this open source, a module is designed which will indicate whether the given point is inside the KML polygon or not. Make sure that you check the branch "libkml-git" and not the "master" branch of the git sources. The class you would be interested in is "pointinpolygon.cc". It is C++ source code which you can include inside your project and build it along with your project.
Edit - The solution for point in polygon problem is independent of what map it is overlayed on.
true|false = google.maps.geometry.poly.containsLocation(googlePoint, googlePoly);
I have a MovieClip holding an irregular shape such as this one:
I need to generate a random point on this shape.
I can use brute force by generating points within the bounding box and then hitTesting to see if they reside on the irregular shape. However, I'm sure there's a more efficient way to tackle this problem.
What is the most efficient way to generate a random point on an irregular shape?
You mentioned hitTest, but I assume you meant hitTestPoint().
If so, a function go get the random points you mention, would look a bit like this:
function getRandomPointsInClip(target:MovieClip,numPoints:int):Vector.<Point>{
var points:Vector.<Point> = new Vector.<Point>(numPoints,true);
var width:Number = target.width,height:Number = target.height;
for(var i:int = 0; i < numPoints ; i++){
var point:Point = new Point(target.x+Math.random() * width,target.y+Math.random() * height);
if(target.hitTestPoint(point.x,point.y,true)) points[i] = point;//is the random coord inside ?
else i = i-1;//nope, go back one step - > retry above until it is inside
}
return points;
}
The other I hinted at in my comment involves looping through non transparent pixels in a bitmap data of your object. This method would insure you don't have many duplicates, as opposed to the previous method, but it also means, you have less control over the number of points created and there's extra memory used for creating the bitmap. Still, for documentation purposes, here is the function:
function getGridPointsInClip(target:MovieClip,res:int,offset:Number = 3):Vector.<Point>{
var points:Vector.<Point> = new Vector.<Point>();
var x:int,y:int,alpha:int,w:int = int(target.width),h:int = int(target.height);
var bmd:BitmapData = new BitmapData(w,h,true,0x00FFFFFF);bmd.draw(target);
var pixels:Vector.<uint> = bmd.getVector(bmd.rect),numPixels:int = w*h;
for(var i:int = 0; i < numPixels; i+=res) {
x = i%bmd.width;
y = int(i/bmd.width);
alpha = pixels[i] >>> 24;
if(alpha > 0) points.push(new Point(x+random(-offset,offset),y+random(-offset,offset)));
}
return points;
}
function random(from:Number,to:Number):Number {
if (from >= to) return from;
var diff:Number = to - from;
return (Math.random()*diff) + from;
}
And here'a very basic test:
var pts:Vector.<Point> = getRandomPointsInClip(mc,300);
//var pts:Vector.<Point> = getGridPointsInClip(mc,100,4);
for(var i:int = 0 ; i < pts.length; i++) drawCircle(pts[i].x,pts[i].y,3,0x009900);
function getRandomPointsInClip(target:MovieClip,numPoints:int):Vector.<Point>{
var points:Vector.<Point> = new Vector.<Point>(numPoints,true);
var width:Number = target.width,height:Number = target.height;
for(var i:int = 0; i < numPoints ; i++){
var point:Point = new Point(target.x+Math.random() * width,target.y+Math.random() * height);
if(target.hitTestPoint(point.x,point.y,true)) points[i] = point;//is the random coord inside ?
else i = i-1;//nope, go back one step - > retry above until it is inside
}
return points;
}
function getGridPointsInClip(target:MovieClip,res:int,offset:Number = 3):Vector.<Point>{
var points:Vector.<Point> = new Vector.<Point>();
var x:int,y:int,alpha:int,w:int = int(target.width),h:int = int(target.height);
var bmd:BitmapData = new BitmapData(w,h,true,0x00FFFFFF);bmd.draw(target);
var pixels:Vector.<uint> = bmd.getVector(bmd.rect),numPixels:int = w*h;
for(var i:int = 0; i < numPixels; i+=res) {
x = i%bmd.width;
y = int(i/bmd.width);
alpha = pixels[i] >>> 24;
if(alpha > 0) points.push(new Point(x+random(-offset,offset),y+random(-offset,offset)));
}
return points;
}
function random(from:Number,to:Number):Number {
if (from >= to) return from;
var diff:Number = to - from;
return (Math.random()*diff) + from;
}
function drawCircle(x:Number,y:Number,radius:Number,color:uint):void{
graphics.lineStyle(1,color);
graphics.drawCircle(x-radius,y-radius,radius);
}
HTH
If you think of some non-blob like shapes, it's clear the check random pixel, try again method isn't really a good way. The bounding box area could be huge compared to the shape area.
What you could do to improve the effectiveness is getting a vector of the BitmapData of the shape. It should contain all pixels of the bounding box. Update - it would be nice now if we could pick a random point, and remove it from the vector if it isn't inside the shape. Unfortunately the vector only contains the pixels' colour, not the position which is implicit and only correct if we don't change the vector's length. Since we don't need to know the actual colour, we can omit all transparent pixels and store an inside pixel's position as it's value in the vector. This way we don't need to create a new object for each pixel of the shape (that would be quite expensive!).
var v:Vector.<uint> shapeBoxBitmap.getVector(shapeBoxBitmap.rect);
var pixelNum:int = v.length;
for(var i:uint = 0; i < pixelNum; i++) {
if( v[i] && 0xFF000000 == 0) { // transparent pixel, outside off shape
v.splice(i,1);
} else {
v[i] = i;
}
}
//get random point
var randomPixel:int = v[Math.floor(Math.random()*v.length)];
var point:Point = new Point(randomPixel%shapeBitmap.width,int(randomPixel/shapeBitmap.width));
This question already has answers here:
How do I limit panning in Google maps API V3?
(15 answers)
Closed 8 years ago.
I'm trying to set bounds where you can drag the map using Google Maps API V3
Here is the solution for V2 http://econym.org.uk/gmap/example_range.htm that works pretty well.
However with API V3 it isn't so good: when you use the same checkbounds() function, the map is twitching when you reach the bound while map.setCenter() changes the center of the map.
How to fix it? What is the solution for API V3?
I've had the same problem, but this should sort it out (it's the same function, the event to listen to is changed from 'move' or 'drag' to 'center_changed', works like a charm!:
google.maps.event.addListener(map,'center_changed',function() { checkBounds(); });
function checkBounds() {
if(! allowedBounds.contains(map.getCenter())) {
var C = map.getCenter();
var X = C.lng();
var Y = C.lat();
var AmaxX = allowedBounds.getNorthEast().lng();
var AmaxY = allowedBounds.getNorthEast().lat();
var AminX = allowedBounds.getSouthWest().lng();
var AminY = allowedBounds.getSouthWest().lat();
if (X < AminX) {X = AminX;}
if (X > AmaxX) {X = AmaxX;}
if (Y < AminY) {Y = AminY;}
if (Y > AmaxY) {Y = AmaxY;}
map.setCenter(new google.maps.LatLng(Y,X));
}
}
You might also need to consider wrapping coordinates, curve distortion, and centerizing to the bound dimensions if the map resizes or zooms in/out. This is especially required if your bounds takes up a large percentage of the entire map (eg. like a continent).
One of the problems with checkBounds() though, is that it doesn't take into account that latitude values close to the north/south poles, which have non-linear distortion which make limiting the bounds in-accurate (I use approximate magic number multipliers that won't work in all situations). By right, you should first convert the bounds to linear 2d world coordinates to see how far off the bounds it is in terms of world coordinates, than map the actual target center point in world coordinate to the target actual latitude position. For longitude values, this doesn't seem like much of issue and the linear clipping approach seems accurate enough, the main issue is with the wrapping of longitude coordinates which is accounted for (somewhat) in the below code.
// Persitant variables
var allowedBounds; // assign something here
var lastValidCenter; // initialize this using map.getCenter()
function checkBounds() { // when bounds changes due to resizing or zooming in/out
var currentBounds = map.getBounds();
if (currentBounds == null) return;
var allowed_ne_lng = allowedBounds.getNorthEast().lng();
var allowed_ne_lat = allowedBounds.getNorthEast().lat();
var allowed_sw_lng = allowedBounds.getSouthWest().lng();
var allowed_sw_lat = allowedBounds.getSouthWest().lat();
var wrap;
var cc = map.getCenter();
var centerH = false;
var centerV = false;
// Check horizontal wraps and offsets
if ( currentBounds.toSpan().lng() > allowedBounds.toSpan().lng() ) {
centerH = true;
}
else { // test positive and negative wrap respectively
wrap = currentBounds.getNorthEast().lng() < cc.lng();
var current_ne_lng = !wrap ? currentBounds.getNorthEast().lng() : allowed_ne_lng +(currentBounds.getNorthEast().lng() + 180 ) + (180 - allowed_ne_lng);
wrap = currentBounds.getSouthWest().lng() > cc.lng();
var current_sw_lng = !wrap ? currentBounds.getSouthWest().lng() : allowed_sw_lng - (180-currentBounds.getSouthWest().lng()) - (allowed_sw_lng+180);
}
// Check vertical wraps and offsets
if ( currentBounds.toSpan().lat() > allowedBounds.toSpan().lat() ) {
centerV = true;
}
else { // test positive and negative wrap respectively
wrap = currentBounds.getNorthEast().lat() < cc.lat(); if (wrap) { alert("WRAp detected top") } // else alert("no wrap:"+currentBounds); wrap = false;
var current_ne_lat = !wrap ? currentBounds.getNorthEast().lat() : allowed_ne_lat + (currentBounds.getNorthEast().lat() +90) + (90 - allowed_ne_lat);
wrap = currentBounds.getSouthWest().lat() > cc.lat(); if (wrap) { alert("WRAp detected btm") } //alert("no wrap:"+currentBounds);
var current_sw_lat = !wrap ? currentBounds.getSouthWest().lat() : allowed_sw_lat - (90-currentBounds.getSouthWest().lat()) - (allowed_sw_lat+90);
}
// Finalise positions
var centerX = cc.lng();
var centerY = cc.lat();
if (!centerH) {
if (current_ne_lng > allowed_ne_lng) centerX -= current_ne_lng-allowed_ne_lng;
if (current_sw_lng < allowed_sw_lng) centerX += allowed_sw_lng-current_sw_lng;
}
else {
centerX = allowedBounds.getCenter().lng();
}
if (!centerV) {
if (current_ne_lat > allowed_ne_lat) {
centerY -= (current_ne_lat-allowed_ne_lat) * 3; // approximation magic numbeer. Adjust as u see fit, or use a more accruate pixel measurement.
}
if (current_sw_lat < allowed_sw_lat) {
centerY += (allowed_sw_lat-current_sw_lat)*2.8; // approximation magic number
}
}
else {
centerY = allowedBounds.getCenter().lat();
}
map.setCenter(lastValidCenter = new google.maps.LatLng(centerY,centerX));
}
function limitBound(bound) // Occurs during dragging, pass allowedBounds to this function in most cases. Requires persistant 'lastValidCenter=map.getCenter()' var reference.
{
var mapBounds = map.getBounds();
if ( mapBounds.getNorthEast().lng() >= mapBounds.getSouthWest().lng() && mapBounds.getNorthEast().lat() >= mapBounds.getSouthWest().lat() // ensure no left/right, top/bottom wrapping
&& bound.getNorthEast().lat() > mapBounds.getNorthEast().lat() // top
&& bound.getNorthEast().lng() > mapBounds.getNorthEast().lng() // right
&& bound.getSouthWest().lat() < mapBounds.getSouthWest().lat() // bottom
&& bound.getSouthWest().lng() < mapBounds.getSouthWest().lng()) // left
{
lastValidCenter=map.getCenter(); // valid case, set up new valid center location
}
// if (bound.contains(map.getCenter()))
// {
map.panTo(lastValidCenter);
// }
}
// Google map listeners
google.maps.event.addListener(map, 'zoom_changed', function() {
//var zoom = map.getZoom();
checkBounds();
});
google.maps.event.addListener(map, "bounds_changed", function() {
checkBounds();
});
google.maps.event.addListener(map, 'center_changed', function() {
limitBound(allowedBounds);
});
p.s For checkBounds(), to get proper 2d world coordinate from the map's center, given 2 lat/lng values, use map.getProjection().fromLatLngToPoint(). Compare the 2 points, find the linear difference between them, and map the difference in world coordinates back to lat/lng using map.getProjection().fromPointToLatLng(). This will give you accurate clip offsets in lat/lng units.
This script gets the initial bounds (allowedBounds) and limit the bounds on drag and zoom_changed. Also the zoom is limited on < 7.
var allowedBounds = false;
google.maps.event.addListener(map, 'idle', function() {
if (!allowedBounds) {
allowedBounds = map.getBounds();
}
});
google.maps.event.addListener(map, 'drag', checkBounds);
google.maps.event.addListener(map, 'zoom_changed', checkBounds);
function checkBounds() {
if (map.getZoom() < 7) map.setZoom(7);
if (allowedBounds) {
var allowed_ne_lng = allowedBounds.getNorthEast().lng();
var allowed_ne_lat = allowedBounds.getNorthEast().lat();
var allowed_sw_lng = allowedBounds.getSouthWest().lng();
var allowed_sw_lat = allowedBounds.getSouthWest().lat();
var currentBounds = map.getBounds();
var current_ne_lng = currentBounds.getNorthEast().lng();
var current_ne_lat = currentBounds.getNorthEast().lat();
var current_sw_lng = currentBounds.getSouthWest().lng();
var current_sw_lat = currentBounds.getSouthWest().lat();
var currentCenter = map.getCenter();
var centerX = currentCenter.lng();
var centerY = currentCenter.lat();
if (current_ne_lng > allowed_ne_lng) centerX = centerX-(current_ne_lng-allowed_ne_lng);
if (current_ne_lat > allowed_ne_lat) centerY = centerY-(current_ne_lat-allowed_ne_lat);
if (current_sw_lng < allowed_sw_lng) centerX = centerX+(allowed_sw_lng-current_sw_lng);
if (current_sw_lat < allowed_sw_lat) centerY = centerY+(allowed_sw_lat-current_sw_lat);
map.setCenter(new google.maps.LatLng(centerY,centerX));
}
}
Thanks #sairafi. Your answer got me very close. I was getting an error where getBounds was undefined, so I wrapped it in another listener to make sure that the map was fully loaded first.
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
allowedBounds = map.getBounds();
google.maps.event.addListener(map,'center_changed',function() { checkBounds(allowedBounds); });
});
// Limit map area
function checkBounds(allowedBounds) {
if(!allowedBounds.contains(map.getCenter())) {
var C = map.getCenter();
var X = C.lng();
var Y = C.lat();
var AmaxX = allowedBounds.getNorthEast().lng();
var AmaxY = allowedBounds.getNorthEast().lat();
var AminX = allowedBounds.getSouthWest().lng();
var AminY = allowedBounds.getSouthWest().lat();
if (X < AminX) {X = AminX;}
if (X > AmaxX) {X = AmaxX;}
if (Y < AminY) {Y = AminY;}
if (Y > AmaxY) {Y = AmaxY;}
map.setCenter(new google.maps.LatLng(Y,X));
}
}
southWest = new google.maps.LatLng(48.59475380744011,22.247364044189453);
northEast = new google.maps.LatLng(48.655344320891444,22.352420806884766);
var limBound = new google.maps.LatLngBounds(southWest,northEast);
var lastCenter;
var option = {zoom:15,
center: limBound.getCenter(),
mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById('divMap'),option);
google.maps.event.addListener(map,'zoom_changed', function() {
minZoom(15);
});
google.maps.event.addListener(map,'drag',function(e){
limitBound(limBound);
});
function minZoom(minZoom){
if (map.getZoom()<minZoom)
{map.setZoom(minZoom);}
};
function limitBound(bound)
{
if (bound.getNorthEast().lat() > map.getBounds().getNorthEast().lat()
&& bound.getNorthEast().lng() > map.getBounds().getNorthEast().lng()
&& bound.getSouthWest().lat() < map.getBounds().getSouthWest().lat()
&& bound.getSouthWest().lng() < map.getBounds().getSouthWest().lng())
{
lastCenter=map.getCenter();
$('#divText').text(lastCenter.toString());
}
if (bound.contains(map.getCenter()))
{
map.setCenter(lastCenter);
}
}
pls check this Google Maps API v3: Can I setZoom after fitBounds?
map.fitBounds(mapBounds);
#sairafi and #devin
thanks for both your answers. I could not get this to work in Chrome/Windows 7 because the .comtains() check evlauated to both true and false as soon as you hit the boundary.
So I changed the setCenter() at the bottom to panTo()
The second problem was that if you establish boundaries on initial load, you have to use the google.maps.event.addListenerOnce(map,'idle'...) event otherwise it keeps resetting the boundaries to the currently viewable map.
Finally I do use the drag event for tracking centers, for some reason that worked more smoothly.
The resulting code is this:
google.maps.event.addListenerOnce(map,'idle',function() {
allowedBounds = map.getBounds();
});
google.maps.event.addListener(map,'drag',function() {
checkBounds();
});
function checkBounds() {
if(! allowedBounds.contains(map.getCenter()))
{
var C = map.getCenter();
var X = C.lng();
var Y = C.lat();
var AmaxX = allowedBounds.getNorthEast().lng();
var AmaxY = allowedBounds.getNorthEast().lat();
var AminX = allowedBounds.getSouthWest().lng();
var AminY = allowedBounds.getSouthWest().lat();
if (X < AminX) {X = AminX;}
if (X > AmaxX) {X = AmaxX;}
if (Y < AminY) {Y = AminY;}
if (Y > AmaxY) {Y = AmaxY;}
map.panTo(new google.maps.LatLng(Y,X));
}
}