I want to implement Airbnb's "Search as I move the map" using Leaflet. On the one hand, if a user pans the map I want to load data associated with that portion of the map, on the other hand, I don't want to make unnecessary requests (e.g. making a request every time the user slightly changes the map).
I see Leaflet provides a moveend event which is "Fired when the center of the map stops changing" but doesn't have any new location associated to it that I can use to make a new request. Also, it's probably fired too many times for this use case.
Which events should I listen to? How should I implement "search as I move the map"?
You can call map.getCenter() or some of its friends (eg map.getBounds()) from within the moveend event to find out where the map was panned to.
Related
I have a map of points, and for each of those points, a specific extent that I want the map to zoom into when I click on it.
I assume I will need to tabulate the bounds of those extents and add them as another column in the data.
Is there a way for Carto to automatically zoom to the bounds once I do this?
Yes you need to develop a CARTO.js web application. You need of course to store the bounds somehow on your table in a set of columns or in one single column using a format you can later parse. Next, you need to add that/those fields to a custom infowindow so they are passed to the web application in the interactivity. Finally, you need to listen to the feature click event in order to retrieve the interactivity data and using Leaflet map methods move its bounds.
You have all CARTO.js documentation here and a tutorial and many examples here. It's easier than it seems.
I have a silly problem with an OpenLayers Map where I want to show a non-interactive picture on one site, where all clicks and such are disabled. I've tried capturing the clicks on the element but OpenLayers seems to still be able to get these events which makes the map interactive. There should be a simple solution to this but I can't figure it out.
Setting the control property to the empty array does not have any effect on the interaction.
Edit: We could not find a way to do this easily on an already existing map, so what we did was to re-use the old map initiation code in this new page, with added parameters that can remove all controls upon the creation and initiation of the map.
Setting the control property to the empty array does not have any effect on the interaction.
Wierd, this should do the trick:
map = new OpenLayers.Map('map', {controls: []});
I'm working on a company website of an acquaintance of mine. The company has 7 offices spread all over the country. He has asked me to create a page listing these offices (with contact info, picture, etc.), and add a Google map to it with multiple markers that indicate the offices.
I've done so, but seeing as the zoom-level (a complete country) isn't really detailed, I was thinking about making the map zoom in to specific markers/offices when clicking on the office in the aforementioned list.
I however have no idea if there's a way to perform actions inside the map, from outside the map. Does anybody know?
The website is not live yet, but as an example, you can take a look at this link: http://www.inter-psy.nl/contact/contactgegevens
What I'd like to do is (for example) make the colored block/header perform a map zoom-in to a specific marker when clicking on it.
You must make the map-variable globally accessible, then you may perform any action on the map from anywhere in the page(e.g. map.setCenter() to center the map at a specific location or map.setZoom() to set the zoom-level)
To make the variable globally accessible remove the var-keyword when creating the map
The closest example of what I'm trying to accomplish is a store locator. I have 6,000+ locations that need to be plotted onto a map of Canada.
My original plan was to use Google maps to place markers on each location, but it doesn't make sense to plot them all every time someone attempts to view the map, or various parts of the map.
How does one only put markers on the locations in view? Do I have to send the geo data of all 6000 locations to the client each time they load the map?
Is this doable with maps? (I'm sure it's got to be) Or is there a better service for this kind of thing?
Definitely do not draw all the locations at the same time if they are not all visible. Consider using MarkerManager (article here) or MarkerLight (code: http://gmaps-samples.googlecode.com/svn/trunk/manymarkers/, demo: http://gmaps-samples.googlecode.com/svn/trunk/manymarkers/randommarkers.html). If your initial map and data is such that all the markers would be visible initially, this is definitely the way to go.
You can also use the GEvent object (docs) to detect a "move" event, then check the current display coordinates, draw any that are in bounds. This is the best route if your initial map is too zoomed or small, and/or your marker set is too large to fit on the map's initial view. Your user will be moving the map around, so you can react to that movement and only draw the relevant markers. Take a look at http://econym.org.uk/gmap/gevent.htm for a list of other GEvent events (couldn't find an official list on the API), you might also want to watch "zoom" events.
The two methods can also be combined.
You can use getBounds() to determine the viewable portion of the map. I'd use this data to request from the server all locations within those bounds. Use the bounds_changed event to monitor changes to the viewport and request additional locations as necessary. You'll probably want to set either a minimum zoom level, or maximum number of results to avoid displaying too many locations than is reasonable. Eg, when the map is zoomed out to display all of Canada in a single view.
I have a store locator that displays stores as markers on the map and lists them in a sidebar. There are ~600 stores and they are all loaded at once on the page load via AJAX. So I have access to all them in an array at all times. Now, the functionality I want is that when the user moves/zooms around in the viewport, I get the bounds of the current area being displayed and filter the results in the sidebar (the array of locations, each location has a lat and long) based on whether or not they would be in that area being displayed. Then I would draw the markers of the relevant locations. Basically, whatever locations would be viewable in the viewport would also be listed in the sidebar, staying in sync.
Could someone point me in the right direction to implement this? Does this even sound like an efficient way of handling this functionality?
You need to write a handler for bounds_changed event (more documentation here)
google.maps.event.addListener(map, 'bounds_changed', function(){
// your logic here - map.getBounds() will give you the updated bounds
});
As for efficiency, loading everything at once is probably not the most scalable approach. What if you have 6000 stores next year or you add additional data for every store? A better approach is to pass the bounds back to the server using an AJAX call and only return stores that fall into the area.
You can attach moves/zooms event to the map and basically do a bound check to hide/show markers within the viewing bound. You can achieve this using LatLngBounds(sw?:LatLng, ne?:LatLng) and check the markers LatLng against the map's current bounds using getBounds();. Furthermore within LatLngBounds there's a method to check to see if the LatLtn is within Bounds contains(latLng:LatLng). So you would loop through your markers' LatLng and check against it.
Google Map API LatLngBounds
and
Google Map API Map
As far as the sidebar goes, if you have markers saved then you can just remove or hide the associated locations on the sidebar.