I am trying to figure out how to capture the four corners of a Leaflet window, so that I might load points based on where a user is zoomed in geographically. For example, have a look here.
Now, how would I capture the four corners of that view so that I could load only the points that are geometrically bounded to that general location - downtown London?
I have not been able to find any example for Leaflet specifically. Any assistance will be appreciated.
The term you should be searching with is called "bounds". Leaflet's L.Map has a method called getBounds which will return the bounds of the current mapview:
http://leafletjs.com/reference.html#map-getbounds
Returns the LatLngBounds of the current map view.
It returns a LatLngBounds object which consist of a southwest and a northeast LatLng object:
http://leafletjs.com/reference.html#latlngbounds
Represents a rectangular geographical area on a map.
How you use those bounds to query your points of interest from your server depends on the platform you are working with.
If you already have a dataset loaded and you want filter that based on the current bounds you could use contains method of the LatLngBounds object. You can use that to check if a point is contained within the current bounds:
http://leafletjs.com/reference.html#latlngbounds-contains
Returns true if the rectangle contains the given point.
Related
Here I have plotted a circle with
center="59.82352331557955,-43.59219821635634" & radius ="567.6796059859073"
I am giving two links , one is plotted using ngui-map and second one is the the marker point set as the same circles center in google map.
Link1: Plunker
Link2: Google map
There is a huge difference between them. Can anyone help? Is this my mistake or bug in the module?
AFAIK(I have been using ng2-ui/map for some while), the marker's position accept array which contains lat, lng, and circle's center accept object which contains properties of lat/lng, ng2-ui/map will call geocode to search for result if they are binded with string(your current plunker).
refer code, and fixed plunker.
I have a list of lat long pairs. (Or I could create GeoJSON). I want to map them all on leaflet map.
How do I find what should I set as the center and as the zoom level so that all the points show up.
All the leaflet examples seem to use a fixed center and zoom, but I am accepting user input so I need to calculate them.
The easiest way is with a LatLngBounds object. You can then have the map fitBounds. Or get its center manually if you prefer.
var myPoints = [[1,1],[2,2] /*, ...*/ ];
var myBounds = new L.LatLngBounds(myPoints);
myMap.fitBounds(myBounds); //Centers and zooms the map around the bounds
You can even forgo instantiating the bounds object if you would like:
myMap.fitBounds([[1,1],[2,2] /*, ...*/ ]);
I'd recommend to use GeoJSON and create your leaflet map as described in the tutorial. Than you can simply use geojsonLayer.getBounds() together with map.setBounds() to zoom to your data.
I am using VEMap API. I have the latitude and longitude of the top left point and the bottom right point (bounding box) of a map. I want to get the center point. What is an easy way to do that? I couldn't find a solution by searching on Google.
What I was thinking is that if I can define the map using the two points mentioned above, then I can get the center very easily:
// JavaScript code snippet
var center = map.GetCenter();
var lat = center.Latitude;
var lng = center.Longitude;
Is there a way to call the constructor of map object and pass the two coordinates I have?
Thanks.
The simple answer would be add the latitudes and divide by two, and do the same for longitudes. They are straight lines.
Is there any reason you can't use the VEMap.GetCenter method after the map has been constructed? This way regardless of the viewpoint it will be correct. If you're using the default constructor you can pass in your bounding box, and then call getmap after the object is instantiated.
http://msdn.microsoft.com/en-us/library/bb412539.aspx
I'm building a store finder and would like to implement the following workflow:
User enters a location
We geocode it using Google Geocoder
We examine the geocoded results for the bounding box
We zoom the map in to fit the specified bounds and query for stores within those bounds
If there are stores within the map bounds, display them all on the map
But if there now no stores within the map bounding box, zoom one level further out, and repeat (5) until we find some stores
The above is fine, but it would be better UX if the map did not actually appear to move until some stores have been found.
So, is it possible to query Google Maps as follows: Given a bounding box, can we find the the bounds of the correctly zoomed Google Map that contains that particular bounding box, without actually loading the Google Map?
I'm not sure it's possible, because it depends on the width of the map div in my page, I guess.
geocoder.geocode( {'address': search_text }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.panTo(results[0].geometry.location);
map.fitBounds(results[0].geometry.bounds);
var bounds_to_check_for_stores = map.getBounds();
// QUESTION: get bounds_to_check_for_stores without the three preceding steps?
}
}
The google.maps.LatLngBoundsapi-doc has a method: extend(point:LatLng) which will allow you to extend a bounds to ensure that the bounds are adjusted to include the LatLng point passed as a parameter. The extend method returns a LatLngBounds that has been adjusted.
With this, you could:
Expand the radius of your geocode lookup until you find appropriate stores.
Find the closest store or group of stores that you wish to use.
Retrieve the current bounds from the map: Map.getBounds().
Call LatLngBounds.extend to adjust the bounds, using the .geometry.location property of the stores you selected in Step 2.
Call Map.panToBounds to change the map's viewport, keeping the user's experience simple, because only one change to the view will be performed.
I want to zoom to a particular house in the google mapS, but when I provide its bounds and lattitude and longitude, it does not show images as well as the particular house. Can anyone provide the solution for this?
Solution would be probably to transporm coordinates first. Unfortunately when You pass coordinates to OpanLayers.LonLat(lon,lat) it is supposed to be WGS:84, while OpenLayer.Bounds() needs coordinates given in EPSG:900913.
You should then use Proj4js.transform and pass transformed coordintes in EPSG:900913
You can transform it like this one:
var map = new OpenLayers.Map('map');
var location.transform(map.getProjectionObject(), new OpenLayers.Projection("EPSG:900913"));