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.
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.
Basically, what I'm trying to do is use a map viewer as an image viewer with the same sort of efficient tile-loading, zoom/pan awesomeness without having to build it myself.
Specifically, I need an image viewer that will allow the image to grow and change while not altering the coordinates of any older (unchanged) tiles. This means that the center point (0,0), where the image started growing from, must always remain (0,0). So I'm looking for a library that will allow me to use a very basic Cartesian coordinate system (no map projection!), which will ask for tiles infinitely in all directions with no repetition (as opposed to how map libraries just ignore y-axis above and below the map, but the x axis repeats).
There's another catch. I need zoom level 0 to be zoomed in all the way. Since the image is constantly growing, there's no way to tell what the max zoom level will be, and the coordinates need to be based on the base image layer tiles so that every tile in zoom level z contains 2^z base layer tiles.
I am wondering if this is possible with OpenLayers and how to do it. If it's not, any suggestions of other (open-source javascript) libraries that can do this would be very appreciated! I've tried playing around with Polymaps, but the documentation is lacking too much for me to be able to tell if it will work. So far no luck.
Please let me know if none of this made sense, and I'll try to include some images or better explanations. Thanks!
I ended up using Polymaps after all, since I like it more than OpenLayers, because it's faster and has much smoother scrolling and panning. I wasn't able to do exactly what I wanted, but what I did was close enough.
I ended up writing my own layer (based on the po.image() layer), which disabled infinite horizontal looping of the map. I then wrote my own version of po.url() that modified the requests going to the server for tiles so that zooming was reversed (I just arbitrarily picked a 'max' zoom of 20, then when making a request subtract the zoom level from 20) and the x and y coordinates were converted to cartesian coordinates from the standard row, column coordinates Polymaps uses, based on the zoom level and the map centered at (0,0).
If anyone is interested in the code I can post it here. Let me know!
EDIT: I've posted the code on github at https://github.com/camupod/polymaps
The relevant files are src/Backwards* and examples/backwards (though it actually doesn't work, you might be able to clean some information about how it should work).
I have map with 30-50 polygons on it. There are like 4000 points in every polygon but they are hidden at beginning. I want to disply the point only when zoom is <=6 but not all of the point but only ones related to the currently displayed polygon(s). So I need to get the polygons in view (displayed in this moment on the screen).
Do you know how to get the polys in view ?
ps.Im working with javascript
Wont be quick if you have complex or lots of polygons but works (assumes v7 api):
https://gist.github.com/1704172
When drawing an editable Polygon on a map using Google's V3 API, is there some event I could register for that tells me when one of the polygon's points (only made visible by the editable flag) is clicked? I want to be able to enable a user to draw a polygon, using right clicks, and "complete" the polygon by clicking on the first point plotted. I begin by creating a Polygon of one point, and add each successive point with each right-click. I use the mousemove event to create two "completion" lines, two fainter lines (two Polylines) from the last point plotted to the current mouse position on the map, and from the current mouse position on the map to the first ("anchor") point. When I click on that first point, I'd like to be able to "finish" the Polygon, by taking away these completion lines, inferring the intent of the user now to either edit the points already drawn with the handles the editable Polygon provides, or save the Polygon's coordinates to my application.
Is there a way to do this? (As I've written this, I've thought of one solution: create a small circle, invisible, around the first ("anchor") point, and detect when that invisible circle is clicked. But I wanted to see if there was something built-in in the API that I could use.)
Are you trying to roll your own polygon editor? I would suggest using the drawing library instead:
http://code.google.com/apis/maps/documentation/javascript/overlays.html#drawing_tools
Also see events section:
http://code.google.com/apis/maps/documentation/javascript/reference.html#DrawingManager
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.