MapKit JS PointOfInterestFilter.including Syntax

I'm using MapKit JS to create a simple map which is working well so far. I would now like to use the mapkit.PointOfInterestFilter to include a subset of the available categories.

I'm a beginner when it comes to JavaScript and having trouble working out the correct syntax to use here to get this working and haven't been able to find an example that demonstrates how to use this correctly.

Here's my current code:

    <script type="module">
/**
 * Wait for MapKit JS to be loaded by the script tag,
 * calls `mapkit.init` to set authorizationCallback with your JWT.
 */
const setupMapKitJs = async() => {
    if (!window.mapkit || window.mapkit.loadedLibraries.length === 0) {
        // mapkit.core.js or the libraries are not loaded yet.
        // Set up the callback and wait for it to be called.
        await new Promise(resolve => { window.initMapKit = resolve });

        // Clean up
        delete window.initMapKit;
    }

    // TODO: For production use, the JWT should not be hard-coded into JS.
    const jwt = "Insert Your JWT Here";
    mapkit.init({
        authorizationCallback: done => { done(jwt); }
    });
};

/**
 * Script Entry Point
 */
const main = async() => {
    await setupMapKitJs();
    
    // Create the Map and Geocoder
    const map = new mapkit.Map("map-container");
    const geocoder = new mapkit.Geocoder({ language: "en-US" });
    
    // Add Points of Interest Filter
    mapkit.PointOfInterestFilter.including([
        mapkit.PointOfInterestCategory.School, mapkit.PointOfInterestCategory.PostOffice
    ]);
    
    // Create the "Marker" annotation, setting properties in the constructor.
    const event = new mapkit.Coordinate(-27.536432, 153.0671578);
    const eventAnnotation = new mapkit.MarkerAnnotation(event, {
        color: "red",
        title: "",
        glyphText: "" 
    });
    
    // Add and show both annotations on the map
    map.showItems([eventAnnotation]);
    
    // Show/Hide Scale
    map.showsScale = mapkit.FeatureVisibility.Visible;



};

main();

</script>

The filter isn't working as I'm currently getting all points of interest showing on the map and can't work out what the correct syntax to use here is.

Solution

The syntax is correct and the filter is created, you just need to apply it to your map by setting the instance property of the same name, PointOfInterestFilter :

map.pointOfInterestFilter = mapkit.PointOfInterestFilter.including([
    mapkit.PointOfInterestCategory.School, mapkit.PointOfInterestCategory.PostOffice
]);

You can also set the filter as a MapConstructorOptions when creating the map :

const map = new mapkit.Map("map-container", {
  pointOfInterestFilter: mapkit.PointOfInterestFilter.including([
    mapkit.PointOfInterestCategory.School, mapkit.PointOfInterestCategory.PostOffice
  ])
});