Develop Reference

How to position an element on an SVG path at certain point?

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.

Google Maps API ImageMap Coordinate Limit

I have a Map (Google Maps API 3) that uses purely coordinates, as the world it shows is flat, there is no lat/lng. However, when I scroll down on the map, I reach the limit of what it shows before my images stop. Also the starting point of what it shows is far to the topleft, not centered at all.
I've seen the boundary and center commands, but they're for lat/lng and I have no idea how to make that work.
Here's my current .html:
http://pastebin.com/8KTu7Sii
It gets tiles from /tiles/, which has these contents:
http://pastebin.com/VHHn7rrZ
Unfortunately that folder is 1.7 GB, which would take me days to upload.
So the question is, how do I set the proper XY boundaries and how do I set a XY based Center?

How can I rotate an overlay image on Google Maps?

I'm trying to place a series of overlays onto a Google Map. I'm following along with the sample code for ground overlays, but that only allows me to dictate image placement using north/south/east/west boundaries. The works as long as my image is a rectangle and oriented along longitude and latitude lines. I'd really like to be able to accurately place an image, including custom scale and angular orientation. That doesn't seem possible with a ground overlay.
So here's a possible use case. I'm building a website to help city planners test parking availability.
The city planner uses a Google map on the analysis website to select an area of the street with a polygon select tool.
The website script tests the selected polygon area for parking availability.
When we're done with the evaluation, I'd like the site to paste random images of cars into the page so the user can better visualize what's available.
I can create a rectangular plan view of a car, but I'm unable to figure out how to rotate the image by X degrees as required. Perpendicular to North/South/East/West (NSEW) is no problem, but I'm unable to angle it.
This should work no matter how the original map is oriented. The goal is the user sees a proposed solution, complete in the current map view, and to scale.
Obviously the image would have to be perfectly scaled to the visible map, and that's fairly easy to do (a minor latitude length adjustment may be required.)
(In this image, the city planner has just selected the area of interest via polygon selection tool. The next step is to evaluate the area, and paste in some parked cars, aligned and in scale!)
All the Google mapping native overlay tools I'm looking at rely on LatLngBounds class, hence the NSEW perpendicular alignment problem. I know I can calculate the desired angle, go to a php server, rotate a .png image with transparent background, per php imagerotate, but that seems like such a hack for a geo-mapping exercise. I could also pre-rotate the cars in a .png file and save them as red_car_15degrees.png, blue_car_30degrees.png, white_pickup_45degrees.png, (three different cars x 5 degree increments from 0 to 45 degrees) but that too, just feels like a hack.
Is there anyway to create a custom map overlay at a given desired orientation angle, so I can layer in the cars to show the city planner what's available? Many thanks.

I would draw and rotate in a <canvas> and then out that on.
EDIT:
place on canvas, ctx.rotate, c.toDataUrl(), and overlay that on your map.

Library for visualizing users on map over time

I have data corresponding to user events with (location, time). I would like to visualize these on an animated map. Maybe with points of light appearing when an event happens (with multiple events in the same place making a brighter dot). Double points for animating the day/night regions on the map at the same time. Is there a javascript library good for visualizing such data?
The map on the right side of this visualization written in processing doesn't quite fit my description, but would also work well.

I found that d3.js worked really well for the project. The geo module made it easy to draw a world map (with data from data/world-countries.json and a mercator projection) in an svg element. First, I pre-processed the data to put the users in "buckets" of gps locations. I added a circle for every location, and changed its radius for how many users were in that bucket.

Placing markers for 6000+ locations using Google Maps (or some other web & mobile platform)

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.