index2.ejs

<% layout('layouts/boiler') %>
    <div id="cluster-map" style='width:100%;height:300px'></div>
    <div class="container">
        <h1>All campgrounds</h1>
        <a href="/campground/new">Add new campground</a>
        <% for(let camp of campgrounds) {%>
            <div class="card mb-3" style="max-width: 900px;">
                <div class="row g-0">
                <div class="col-md-4">
                    <img crossorigin="anonymous" src="<%=camp.images[0].url%>" class="img-fluid rounded-start" alt="">
                </div>
                <div class="col-md-8">
                    <div class="card-body">
                    <h5 class="card-title" href="/campground/show"><%=camp.title%></h5>
                    <p class="card-text" href="/campground/show"><%=camp.description%></p>
                    <p class="card-text" ><small class="text-body-secondary"><%=camp.location%></small></p>
                    <a href="/campground/<%=camp._id%>" class="btn btn-primary">View</a>
                    
                    </div>
                </div>
                </div>
            </div>
        <% } %>
    </div>
    
<script>
      const maptilerApiKey = '<%- process.env.MAPTILER_API_KEY %>';
      const campgrounds = { features: <%- JSON.stringify(campgrounds) %>}

      maptilersdk.config.apiKey = maptilerApiKey;

    const map = new maptilersdk.Map({
        container: 'cluster-map',
        style: maptilersdk.MapStyle.STREETS,
        center: [-103.59179687498357, 40.66995747013945],
        zoom: 3
    });

    map.on('load', function () {
        map.addSource('campgrounds', {
            type: 'geojson',
            data: campgrounds,
            cluster: true,
            clusterMaxZoom: 14, // Max zoom to cluster points on
            clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
        });

        map.addLayer({
            id: 'clusters',
            type: 'circle',
            source: 'campgrounds',
            filter: ['has', 'point_count'],
            paint: {
                // Use step expressions (https://docs.maptiler.com/gl-style-specification/expressions/#step)
                // with three steps to implement three types of circles:
                'circle-color': [
                    'step',
                    ['get', 'point_count'],
                    '#00BCD4',
                    10,
                    '#2196F3',
                    30,
                    '#3F51B5'
                ],
                'circle-radius': [
                    'step',
                    ['get', 'point_count'],
                    15,
                    10,
                    20,
                    30,
                    25
                ]
            }
        });

        map.addLayer({
            id: 'cluster-count',
            type: 'symbol',
            source: 'campgrounds',
            filter: ['has', 'point_count'],
            layout: {
                'text-field': '{point_count_abbreviated}',
                'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
                'text-size': 12
            }
        });

        map.addLayer({
            id: 'unclustered-point',
            type: 'circle',
            source: 'campgrounds',
            filter: ['!', ['has', 'point_count']],
            paint: {
                'circle-color': '#11b4da',
                'circle-radius': 4,
                'circle-stroke-width': 1,
                'circle-stroke-color': '#fff'
            }
        });

        // inspect a cluster on click
        map.on('click', 'clusters', async (e) => {
            const features = map.queryRenderedFeatures(e.point, {
                layers: ['clusters']
            });
            const clusterId = features[0].properties.cluster_id;
            const zoom = await map.getSource('campgrounds').getClusterExpansionZoom(clusterId);
            map.easeTo({
                center: features[0].geometry.coordinates,
                zoom
            });
        });

        // When a click event occurs on a feature in
        // the unclustered-point layer, open a popup at
        // the location of the feature, with
        // description HTML from its properties.
        map.on('click', 'unclustered-point', function (e) {
            const { popUpMarkup } = e.features[0].properties;
            const coordinates = e.features[0].geometry.coordinates.slice();

            // Ensure that if the map is zoomed out such that
            // multiple copies of the feature are visible, the
            // popup appears over the copy being pointed to.
            while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
                coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
            }

            new maptilersdk.Popup()
                .setLngLat(coordinates)
                .setHTML(popUpMarkup)
                .addTo(map);
        });

        map.on('mouseenter', 'clusters', () => {
            map.getCanvas().style.cursor = 'pointer';
        });
        map.on('mouseleave', 'clusters', () => {
            map.getCanvas().style.cursor = '';
        });
    });
    </script>
    <!-- <script src="/public/javascript/clustermap.js"></script> -->