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.
Related
I've been searching for hours for a tutorial on how to re-create the map/chart functionality displayed on this page.
When you hover your cursor over the histogram chart at different points (which shows elevation) it moves a pin/cursor on the google map to indicate what point on the map the elevation relates to.
Hard to explain but easier if you click on the link and see for yourself.
https://www.greaterhobarttrails.com.au/track/north-south-track/
map & chart
Any guidance is appreciated.
Thank you for your time.
John.
Below are just some guiding points, how to approach this task(probably not the best solution, but should work).
As the first requirement in your path array each point should have three properties - latitude, longitude, elevation.
To build the chart you need to use some of the chart libraries - it should support the mouseover event (here are some examples for chart libraries - https://www.sitepoint.com/15-best-javascript-charting-libraries/). Y-axis is elevation, X-axis can be distance from the beginning of the path(distance should be calculated for each point beforehand).
As the third step you need to show your path on the map - to do that you can use google maps api (https://developers.google.com/maps/).
In the end you need to connect chart and map, you need to subscribe for mouseover event from the chart. When handling that, you're interested in which path point is currently hovered by user. Afterwards you can take coordinates from it and add a marker on the map based on these coordinates.
I can point you to the right direction with some helping methods from my own plugin pathAnimator:
You need to attach a mousemove event on the bottom element (in your specific example) so you can get the x percentage (from 0 to 100).
using the above value, use pathAnimatorm or any of it's methods, to position your marker element on the path of the map at the right point.
you can use pointAt method for that, check the demo at the link above and you'll understand how it's done.
im new to prime faces and i was just wondering if it is possible to add custom google code to the prime faces gmap component. I was looking at the code given on the primefaces site , ie add marker etc, but i was wondering if i am constrained to these code functions on the site. Ideally i would prefer a map that allows a user to add multiple markers connected by poly-lines which would eventually meet up to form a polygon(ie created by the user via an interactive map) and eventyually get the area of the polygon, by using java-script, however i am only able to implement the given code on the prime-faces site(the code listed on this page(http://www.primefaces.org/showcase/ui/d ... asic.xhtml). So am i constrainted to these functions or is there more customization options?
Here's an idea:
In the funtion called init() from this example, you can pass in an array of coordinates (these can come from markers that your users generate). And each time a marker is added, call init() so it creates a polygon for you using the markers' lat/lng info.
For calculating the area, you have to actually come up with a algorithm or function like this and implement it using Primefaces syntax. Or something that can be done by using ideas from the Geometry Library.
Hope this gives you a starting point.
I'm somehow new in making web services using Openlayers and Javascript. I would like to create a clickable grid layer on top of a map (e.g. OSM) which first has a defined spatial resolution (e.g. 200 m) and of course when user zooms the grid size adapts to the new zoom level of the map. Also I want to show every cell of a grid with a specific colour, and when the user clicks on each cell some information can be shown. So, I guess each cell is like a feature in this layer (e.g. polygon). I was wondering if Openlayers has existing function to do such a thing that I can use, or do I have to code all of it? any help and suggestions on how I can manage to do this would be highly appreciated. Below is a link to a service that has created such a service, I would like to do the same... Thanx.
Link to sample:
http://koenigstuhl.geog.uni-heidelberg.de/osmatrix/#timestamp/allotments_area/8/12/-0.2142333984375/51.578776399817066
Having developed the application you mention in your example, I can give you some hints on your question. The solution is pretty straightforward.
The grid you see, i.e. the coloured hexagons, is simply map tiles, that are served by a custom back-end following the Tile Map Service schema (I used NodeJS) that, in turn, uses Mapnik (any other engine should work as well, e.g. GeoServer or MapServer) for rendering the images. The data is stored in a Postgres data base with PostGIS added on.
Use a client-side library to create the map and add the tiled layer. OpenLayers and Leaflet both do the job well. (Leaflet, though, is a bit easier to grasp if your new to the topic).
On client side you register a click-event handler on the Map, that you can use to get the coordinates of the mouse click. Use these coordinates, send them to your back-end and perform a spatial query on the data base to get the polygons adjacent to the coordinates. The server's response should then provide the geometries of the polygons (encoded in GeoJSON in this case, GML, KML should work fine as well) and whatever information you want to display.
Use these polygons and add them to a vector layer using whatever colour scheme you want.
Have a look at the code to see how it works. The important files are osmatrix.js (connects to the back-end), control.js (main module, keeps track of everything) and map.js (surprisingly enough, everything map-related).
Openlayers has facilities for creating an interactive vector later. In order to create something like in the example, you would have to 1) add a vector layer, 2) write a loop that adds vector features to the appropriate locations on the map, 3) style the features as hexagons, and 4) create a stylemap that dynamically sets the feature color based on the appropriate parameters. Each step is facilitated by Openlayers.
A good start is to use the leaflet library because it use the map projection and to read this tutorial: http://build-failed.blogspot.de/2013/07/dynamically-creating-hexagons-from-real.html?m=1.
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.