MapKit JS Examples
Track your website’s use of Apple Maps services with the MapKit JS Dashboard. Monitor map initializations and service requests in realtime, or see up to a year of activity by day, week, month, or year.
MapKit JS beta provides a free daily limit of 250,000 map views and 25,000 service calls per Apple Developer Program membership. For additional capacity needs, contact us.
Apple Maps may not be available in all countries or regions.
Create an embedded map in an element on the page.
Create a map with two annotations. Shift-click on the map adds a new annotation where the shift-click is detected and removes the annotation on the map that was previously added with shift-click, if one exists.
Create annotations with custom callouts for the landmarks of San Francisco.
A “loupe” is used to demonstrate draggable annotations. This example shows how to make a pin draggable, style a map with CSS, observe map events, and update the region of a second map in response to map events.
Create a map with an overlay for each state in the US. The color of each overlay represents the population in that
This samples uses GeoJSON data derived from cartographic boundary files and 2018 population estimates provided by the United States Census Bureau. The code shows how to use a delegate when importing GeoJSON
data to add style and data to the imported items; the color of each overlay gives an indication of its population,
and selecting an overlay displays the the information associated with that state.
Region and Zoom Limits
Create a map restricted by camera boundaries and zoom range to two cities (San Francisco and Toronto). Click on the
desired city to change the region and zoom limits.