MapKit JS poor webperf (performance issues)

I'll wait for others to comment on the perfomance of the page but I figured it may be worth asking if you've considered using a MapKit JS snapshot rather than loading all the code required for intactivity? Not sure if it's appropriate but certainly lighter weight.

Take a look at : https://developer.apple.com/documentation/snapshots

-Mark

In my reply to the person who raised this question in our service, I've mentionned that using snapshots would be an alternative but some of our clients wants "interactive maps" (move the map) so using screenshot is not suitable for these cases;

if there is performance issues with MapKit JS, it would be best to fix/address them to improve your product/service instead of using a different product that has very reduced features;

Hello @malonicus,

Do you have any news on the performance subject ? It's been 3 month I've raised performance issues but no news since then.

Is there someone you can ping internally to take a look at this ?

Thank you 😉

Hey @dev-yprox, a good way to get some action on this issue is to file a report via Feedback Assistant https://feedbackassistant.apple.com. Reports filed here are reviewed by the MKJS enginering team.

Not sure if this is helpful, but I've also been a little concerned with the performance of MapKit JS also. I just filed a report via Feedback Assistant as Frameworks Engineer suggests above. I'm also posting this in the forums, just in case the additional feedback is helpful, and to possibly encourage anyone else who has issues with the performance to file reports via Feedback Assistant. (As an aside, I really like MapKit JS in a lot of ways, so I don't want to sound too negative!)

If it is suitable to your context (worked for me), the basic way to prevent MapkitJS to block JS execution is to include the script with the "defer" keyword and adapt your JS code calling Mapkit to be executed only after Mapkit is loaded:

in header:

<script defer src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"></script>

in your page:

<script type="text/javascript">
// ready function taken from http://youmightnotneedjquery.com/#ready
function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

// mapkit init only after mapkit is loaded, here is my init code as a sample
ready(function() {
    mapkit.init({
    authorizationCallback: function(done) {
    done('[mapkitToken]');
        }
    });
    
    var mapregion = new mapkit.CoordinateRegion(
    new mapkit.Coordinate([latitude], [longitude]),
    new mapkit.CoordinateSpan(0.15, 0.15)
    );
    
    var map = new mapkit.Map("map-container");
    map.isRotationEnabled = false;
    map.showsScale = mapkit.FeatureVisibility.Visible;
    map.region = mapregion;
});
</script>