Thanks for your reply - that looks like it's going to point me in the right direction.
I'm trying to test this using the Custom Callouts from the Apple Maps examples but not sure of the correct syntax to use here. Can you please show me how to incorporate the mapkit.Annotation.CollisionMode.None into that example? Code shown below:
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"></script>
<style>
#map {
height: 600px;
}
a:link, a:visited {
color: #2aaef5;
outline: none;
text-decoration: none;
}
.landmark {
width: 250px;
padding: 7px 0 0 0;
background: rgba(247, 247, 247, 0.75);
border-radius: 5px;
box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.29);
font-family: Helvetica, Arial, sans-serif;
-webkit-transform-origin: 0 10px;
transform-origin: 0 10px;
}
.landmark h1 {
margin-top: 0;
padding: 5px 15px;
background: #2aaef5;
color: rgba(255, 255, 255, 0.9);
font-size: 16px;
font-weight: 300;
}
.landmark section {
padding: 0 15px 5px;
font-size: 14px;
}
.landmark section p {
margin: 5px 0;
}
.landmark:after {
content: "";
position: absolute;
top: 7px;
left: -13px;
width: 0;
height: 0;
margin-bottom: -13px;
border-right: 13px solid #2aaef5;
border-top: 13px solid rgba(0, 0, 0, 0);
border-bottom: 13px solid rgba(0, 0, 0, 0);
}
@-webkit-keyframes scale-and-fadein {
0% {
-webkit-transform: scale(0.2);
opacity: 0;
}
100% {
-webkit-transform: scale(1);
opacity: 1;
}
}
@keyframes scale-and-fadein {
0% {
transform: scale(0.2);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
</style>
</head>
<body>
<div id="map"></div>
<script>
mapkit.init({
authorizationCallback: function(done) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/services/jwt");
xhr.addEventListener("load", function() {
done(this.responseText);
});
xhr.send();
}
});
// Landmarks data
var sanFranciscoLandmarks = [
{ coordinate: new mapkit.Coordinate(37.7951315, -122.402986), title: "Transamerica Pyramid", phone: "+1-415-983-5420", url: "http://www.transamericapyramidcenter.com/" },
{ coordinate: new mapkit.Coordinate(37.7954201, -122.39352), title: "Ferry Building", phone: "+1 (415) 983-8030", url: "http://www.ferrybuildingmarketplace.com" },
{ coordinate: new mapkit.Coordinate(37.8083396, -122.415727), title: "Fisherman's Wharf", phone: "+1 (415) 673-3530", url: "http://visitfishermanswharf.com" },
{ coordinate: new mapkit.Coordinate(37.8023553, -122.405742), title: "Coit Tower", phone: "+1 (415) 249-0995", url: "http://sfrecpark.org/destination/telegraph-hill-pioneer-park/coit-tower/" },
{ coordinate: new mapkit.Coordinate(37.7552305, -122.452624), title: "Sutro Tower", phone: "+1 (415) 681-8850", url: "http://www.sutrotower.com" },
{ coordinate: new mapkit.Coordinate(37.779267, -122.419269), title: "City Hall", phone: "+1 (415) 701-2311", url: "http://sfgsa.org/index.aspx?page=1085" },
{ coordinate: new mapkit.Coordinate(37.8184493, -122.478409), title: "Golden Gate Bridge", phone: "+1 (415) 921-5858", url: "http://www.goldengatebridge.org" },
{ coordinate: new mapkit.Coordinate(37.7785538, -122.514035), title: "Cliff House", phone: "+1 (415) 386-3330", url: "http://www.cliffhouse.com/" }
];
// Landmark annotation callout delegate
var CALLOUT_OFFSET = new DOMPoint(-148, -78);
var landmarkAnnotationCallout = {
calloutElementForAnnotation: function(annotation) {
return calloutForLandmarkAnnotation(annotation);
},
calloutAnchorOffsetForAnnotation: function(annotation, element) {
return CALLOUT_OFFSET;
},
calloutAppearanceAnimationForAnnotation: function(annotation) {
return ".4s cubic-bezier(0.4, 0, 0, 1.5) 0s 1 normal scale-and-fadein";
}
};
// Landmarks annotations
var annotations = sanFranciscoLandmarks.map(function(landmark) {
var annotation = new mapkit.MarkerAnnotation(landmark.coordinate, {
callout: landmarkAnnotationCallout,
color: "#c969e0"
});
annotation.landmark = landmark;
return annotation;
});
var map = new mapkit.Map("map");
map.showItems(annotations);
// Landmark annotation custom callout
function calloutForLandmarkAnnotation(annotation) {
var div = document.createElement("div");
div.className = "landmark";
var title = div.appendChild(document.createElement("h1"));
title.textContent = annotation.landmark.title;
var section = div.appendChild(document.createElement("section"));
var phone = section.appendChild(document.createElement("p"));
phone.className = "phone";
phone.textContent = annotation.landmark.phone;
var link = section.appendChild(document.createElement("p"));
link.className = "homepage";
var a = link.appendChild(document.createElement("a"));
a.href = annotation.landmark.url;
a.textContent = "website";
return div;
}
</script>
</body>
</html>
databuzz
Users receive reputation points by contributing quality content to the forums.
Posts include post and replies published on the forums.
Post authors can mark replies as Accepted to indicate successful solutions.
Apple Developer Forums admins can mark replies as Apple Recommended to indicate an approved solution
Last seen
User for
Post
Replies
Boosts
Views
Activity
Yes you need an Apple Developer Program membership.
"MapKit JS provides a free daily limit of 250,000 map views and 25,000 service calls per Apple Developer Program membership."