MapKit JS

TileOverlay Demos

MapKit JS from the Console

Show JavaScript Console, then use these commands.

mapkit.build
// "21.16-138"
// "23.08-258"

mapkit.version
// "5.61.1"
// "5.75.4"
// "5.75.57"

mapkit.language
// "en"

mapkit.FeatureVisibility
// { Adaptive: "adaptive", Hidden: "hidden", Visible: "visible" }

mapkit.PointOfInterestCategory
// { Airport: "Airport", AmusementPark: "AmusementPark", Aquarium: "Aquarium", ATM: "ATM", Bakery: "Bakery", Bank: "Bank", Beach: "Beach", Brewery: "Brewery", Cafe: "Cafe", Campground: "Campground", … }

mapkit.Map.ColorSchemes
// { Dark: "dark", Light: "light" }

mapkit.Map.MapTypes
// { Satellite: "satellite", Hybrid: "hybrid", MutedStandard: "mutedStandard", Standard: "standard" }

mapkit.Map.Distances
// { Adaptive: "adaptive", Metric: "metric", Imperial: "imperial" }

mapkit.maps[0].center
// { latitude: 37.788706013265816, longitude: -122.45377750000002 }

mapkit.maps[0].region
// { latitudeDelta: 0.6511658054971932, longitudeDelta: 1.039581298828125 }

mapkit.maps[0].rotation
// 10

mapkit.maps[0].cameraDistance
// 78967.63006909048

mapkit.maps[0].cameraZoomRange
// { _minCameraDistance: 0, _maxCameraDistance: Infinity }

mapkit.maps[0].mapType
// "standard", "hybrid", "satellite"

JSON.stringify(mapkit.maps[0].visibleMapRect)
// {"origin":{"x":0.24169921875,"y":0.260009765625},"size":{"width":0.5166015625,"height":0.47998046875}}

JSON.stringify(mapkit.maps[0].annotationsInMapRect( mapkit.maps[0].visibleMapRect ))
// [
// {"landmark":{"coordinate":{"latitude":37.7951315,"longitude":-122.402986},
//   "title":"Transamerica Pyramid","phone":"+1-415-983-5420","url":"http://www.transamericapyramidcenter.com/"}},
// {"landmark":{"coordinate":{"latitude":37.7954201,"longitude":-122.39352},
//   "title":"Ferry Building","phone":"+1 (415) 983-8030","url":"http://www.ferrybuildingmarketplace.com"}},
// {"landmark":{"coordinate":{"latitude":37.8083396,"longitude":-122.415727},
//   "title":"Fisherman's Wharf","phone":"+1 (415) 673-3530","url":"http://visitfishermanswharf.com"}},
// {"landmark":{"coordinate":{"latitude":37.7552305,"longitude":-122.452624},
//   "title":"Sutro Tower","phone":"+1 (415) 681-8850","url":"http://www.sutrotower.com"}},
// {"landmark":{"coordinate":{"latitude":37.779267,"longitude":-122.419269},
//   "title":"City Hall","phone":"+1 (415) 701-2311","url":"http://sfgsa.org/index.aspx?page=1085"}},
// {"landmark":{"coordinate":{"latitude":37.8184493,"longitude":-122.478409},
//   "title":"Golden Gate Bridge","phone":"+1 (415) 921-5858","url":"http://www.goldengatebridge.org"}},
// {"landmark":{"coordinate":{"latitude":37.7785538,"longitude":-122.514035},
//   "title":"Cliff House","phone":"+1 (415) 386-3330","url":"http://www.cliffhouse.com/"}}
//   ]

I18N with MapKit JS

  • https://developer.apple.com/documentation/mapkitjs/mapkitinitoptions
    • Use the language constructor at init()
  • https://developer.apple.com/documentation/mapkitjs/mapkit/2974045-init
mapkit.init({
    authorizationCallback: function(done) {
        done("your-token-string");
    },
    language: "es"
});

GeoJSON Import1

Create a map with an overlay for each state in the US. The color of each overlay represents the population in that state.
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.

Makes use of this GeoJSON Data

wget -N https://developer.apple.com/maps/web/scripts/states.json
  • https://developer.apple.com/documentation/mapkitjs/mapkit/2974044-importgeojson

  • Converts imported GeoJSON data to MapKit JS items.

mapkit.importGeoJSON("states.json", {/* callback */});

Disables rotation, zoom

var map = new mapkit.Map("map", {
            isRotationEnabled: false,
            isZoomEnabled: false,
            showsZoomControl: false
        });

Region and Zoom Limits1

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.

// Define camera boundaries and zoom ranges for San Francisco and Toronto.
var CITIES = {
    sanfrancisco: {
        region: new mapkit.CoordinateRegion(
            new mapkit.Coordinate(37.7812, -122.44755),
            new mapkit.CoordinateSpan(0.10, 0.11)
        ),
        zoomRange: new mapkit.CameraZoomRange(250, 15000)
    },

    toronto: {
        region: new mapkit.CoordinateRegion(
            new mapkit.Coordinate(43.6451, -79.37505),
            new mapkit.CoordinateSpan(0.05, 0.11)
        ),
        zoomRange: new mapkit.CameraZoomRange(250, 20000)
    }
}

Embed11

Create an embedded map in an element on the page.

Add Annotations1

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.

Custom Callout1

Create annotations with custom callouts for the landmarks of San Francisco.

Draggable Annotations1

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.

The “loupe” is fairly straightforward, as it disables most of the controls.

// Initialize the loupe based on the marker's location on the map
var zoomedMap = new mapkit.Map("loupe", {
    isScrollEnabled: false,
    isZoomEnabled: false,
    showsCompass: mapkit.FeatureVisibility.Hidden,
    showsZoomControl: false,
    showsMapTypeControl: false
});