Dev: SM: Using Callbacks

From AAT Wiki
Jump to navigation Jump to search


Callbacks are a powerful method to have your data and users interact with the map. A quick reference is available here Streetmaps Reference

Example - Large Data Sets

A common problem is representing very large data sets on a map. The easy way of doing it, is to add all your points to the map and let the Javascript handle it. The problem here is that after a few hundred or thousand points, browsers will start to feel a negative impact on the user experience. The right way of handing large data sets, is to load only the data visible in the current map view.

A simple example is shown at callback_test.html - feel free to take the source code and adapt it to your needs.

The Main Page

You can view the source of the test page to see how it works, but the important points are:

  • Set the callback with myMap.RedrawCallback = cb_redraw;; each time the map is redrawn, it will allow you to run code to update the points.
  • The callback function gets the viewport bounds with mapobj.GetBounds() (Javascript_API_Reference#GetBounds_.28.29 Reference) and constructs a URL from them.
  • The URL is invoked for a JSON call
  • The JSON callback at CallbackTest(data) is executed when the JSON returns
  • Current points are removed with myMap.RemoveAllPoints(); to ensure there are as few off-screen items for the API to maintain as possible
  • The points returned in the JSON are added with myMap.AddPoint
  • The map view is updated with myMap.Update(false); - it's very important that the false parameter is set here, as it instructs the API to not invoke the RedrawCallback again, getting into an infinite loop.

The Callback Page

See the source code here callback_test_cb.aspx. This is a simple C# page that generates some random points within the current viewport, and is self-explanatory.

Other Tips

  • Try and only display more important data the further out the map is zoomed. Displaying too many points on a map is usually useless to the user. A small number of pertinent points makes for a far better user experience, both in browser performance, and the ability to digest the information.