diff --git a/src/app/features/noah-playground/components/map-playground/map-playground.component.ts b/src/app/features/noah-playground/components/map-playground/map-playground.component.ts
index 7b000f48..a6f88842 100644
--- a/src/app/features/noah-playground/components/map-playground/map-playground.component.ts
+++ b/src/app/features/noah-playground/components/map-playground/map-playground.component.ts
@@ -21,9 +21,7 @@ import {
 } from '@shared/mocks/critical-facilities';
 import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
 import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
-
 type MapStyle = 'terrain' | 'satellite';
-
 @Component({
   selector: 'noah-map-playground',
   templateUrl: './map-playground.component.html',
@@ -144,7 +142,336 @@ export class MapPlaygroundComponent implements OnInit, OnDestroy {
    * implementation.
    */
   addCriticalFacilityLayers() {
-    CRITICAL_FACILITIES_ARR.forEach((cf) => this._loadCriticalFacilityIcon(cf));
+    //  CRITICAL_FACILITIES_ARR.forEach((cf) => this._loadCriticalFacilityIcon(cf));
+    const hospital = 'assets/geojson/hospitals_g.geojson';
+    const fire = 'assets/geojson/fire_station_g.geojson';
+    const police = 'assets/geojson/police_station_g.geojson';
+    const school = 'assets/geojson/schools_g.geojson';
+
+    this.map.on('load', () => {
+      this.map.addSource('fireStations', {
+        type: 'geojson',
+        data: fire,
+        cluster: true,
+        clusterMaxZoom: 14,
+        clusterRadius: 50,
+      });
+      this.map.addSource('hospitals', {
+        type: 'geojson',
+        data: hospital,
+        cluster: true,
+        clusterMaxZoom: 14,
+        clusterRadius: 50,
+      });
+      this.map.addSource('policeStations', {
+        type: 'geojson',
+        data: police,
+        cluster: true,
+        clusterMaxZoom: 14,
+        clusterRadius: 50,
+      });
+      this.map.addSource('schools', {
+        type: 'geojson',
+        data: school,
+        cluster: true,
+        clusterMaxZoom: 14,
+        clusterRadius: 50,
+      });
+
+      //form points
+      this.map.addLayer({
+        id: 'fireStations-critical',
+        type: 'circle',
+        source: 'fireStations',
+        filter: ['has', 'point_count'],
+        paint: {
+          'circle-radius': [
+            'step',
+            ['get', 'point_count'],
+            20,
+            100,
+            30,
+            750,
+            40,
+          ],
+          'circle-stroke-width': 1,
+          'circle-color': '#fb5f5f',
+          'circle-stroke-color': '#fb5f5f',
+        },
+      });
+
+      this.map.addLayer({
+        id: 'hospitals-critical',
+        type: 'circle',
+        source: 'hospitals',
+        paint: {
+          'circle-radius': [
+            'step',
+            ['get', 'point_count'],
+            20,
+            100,
+            30,
+            750,
+            40,
+          ],
+          'circle-stroke-width': 1,
+          'circle-color': '#5fa2fb',
+          'circle-stroke-color': '#5fa2fb',
+        },
+      });
+
+      this.map.addLayer({
+        id: 'police-critical',
+        type: 'circle',
+        source: 'policeStations',
+        paint: {
+          'circle-radius': [
+            'step',
+            ['get', 'point_count'],
+            20,
+            100,
+            30,
+            750,
+            40,
+          ],
+          'circle-stroke-width': 1,
+          'circle-color': '#eccb57',
+          'circle-stroke-color': '#eccb57',
+        },
+      });
+
+      this.map.addLayer({
+        id: 'schools-critical',
+        type: 'circle',
+        source: 'schools',
+        paint: {
+          'circle-radius': [
+            'step',
+            ['get', 'point_count'],
+            20,
+            100,
+            30,
+            750,
+            40,
+          ],
+          'circle-stroke-width': 1,
+          'circle-color': '#05bc08',
+          'circle-stroke-color': '#05bc08',
+        },
+      });
+      // //for cluster count
+      this.map.addLayer({
+        id: 'cluster-count',
+        type: 'symbol',
+        source: 'fireStations',
+        filter: ['has', 'point_count'],
+        layout: {
+          'text-field': '{point_count_abbreviated}',
+          'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
+          'text-size': 12,
+        },
+      });
+
+      this.map.addLayer({
+        id: 'cluster-count-hospi',
+        type: 'symbol',
+        source: 'hospitals',
+        filter: ['has', 'point_count'],
+        layout: {
+          'text-field': '{point_count_abbreviated}',
+          'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
+          'text-size': 12,
+        },
+      });
+
+      this.map.addLayer({
+        id: 'cluster-count-police',
+        type: 'symbol',
+        source: 'policeStations',
+        filter: ['has', 'point_count'],
+        layout: {
+          'text-field': '{point_count_abbreviated}',
+          'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
+          'text-size': 12,
+        },
+      });
+
+      this.map.addLayer({
+        id: 'cluster-count-school',
+        type: 'symbol',
+        source: 'schools',
+        filter: ['has', 'point_count'],
+        layout: {
+          'text-field': '{point_count_abbreviated}',
+          'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
+          'text-size': 12,
+        },
+      });
+
+      // unclustered/single point
+      this.map.addLayer({
+        id: 'unclustered-fire',
+        type: 'circle',
+        source: 'fireStations',
+        filter: ['!', ['has', 'point_count']],
+        paint: {
+          'circle-color': '#fb5f5f', //unclustered must be a photo
+          'circle-radius': 3,
+          'circle-stroke-width': 1,
+          'circle-stroke-color': '#fb5f5f',
+        },
+      });
+
+      this.map.addLayer({
+        id: 'unclustered-hospital',
+        type: 'circle',
+        source: 'hospitals',
+        filter: ['!', ['has', 'point_count']],
+        paint: {
+          'circle-color': '#5fa2fb', //unclustered must be a photo
+          'circle-radius': 3,
+          'circle-stroke-width': 1,
+          'circle-stroke-color': '#5fa2fb',
+        },
+      });
+
+      this.map.addLayer({
+        id: 'unclustered-police',
+        type: 'circle',
+        source: 'policeStations',
+        filter: ['!', ['has', 'point_count']],
+        paint: {
+          'circle-color': '#eccb57', //unclustered must be a photo
+          'circle-radius': 3,
+          'circle-stroke-width': 1,
+          'circle-stroke-color': '#eccb57',
+        },
+      });
+
+      this.map.addLayer({
+        id: 'unclustered-school',
+        type: 'circle',
+        source: 'schools',
+        filter: ['!', ['has', 'point_count']],
+        paint: {
+          'circle-color': '#05bc08', //unclustered must be a photo
+          'circle-radius': 3,
+          'circle-stroke-width': 1,
+          'circle-stroke-color': '#05bc08',
+        },
+      });
+      //schools
+      this.map.on('click', 'unclustered-school', (e) => {
+        const geometry = e.features[0].geometry;
+        let coordinates00: [number, number] = [0, 0];
+        if (geometry.type === 'Point') {
+          coordinates00 = [geometry.coordinates[0], geometry.coordinates[1]];
+        }
+        const schoolName = e.features[0].properties.name;
+        const coordinates = coordinates00;
+        // 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 mapboxgl.Popup()
+          .setLngLat(coordinates)
+          .setHTML(`School Name: ${schoolName}`)
+          .addTo(this.map);
+      });
+
+      //fire station
+      this.map.on('click', 'unclustered-fire', (e) => {
+        const geometry = e.features[0].geometry;
+        let coordinates00: [number, number] = [0, 0];
+        if (geometry.type === 'Point') {
+          coordinates00 = [geometry.coordinates[0], geometry.coordinates[1]];
+        }
+        const FireStationName = e.features[0].properties.name;
+        const coordinates = coordinates00;
+        // 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 mapboxgl.Popup()
+          .setLngLat(coordinates)
+          .setHTML(`Fire Station Name: ${FireStationName}`)
+          .addTo(this.map);
+      });
+
+      //hospitals
+      this.map.on('click', 'unclustered-hospital', (e) => {
+        const geometry = e.features[0].geometry;
+        let coordinates00: [number, number] = [0, 0];
+        if (geometry.type === 'Point') {
+          coordinates00 = [geometry.coordinates[0], geometry.coordinates[1]];
+        }
+        const hospitalName = e.features[0].properties.name;
+        const coordinates = coordinates00;
+        // 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 mapboxgl.Popup()
+          .setLngLat(coordinates)
+          .setHTML(`Hospital Name: ${hospitalName}`)
+          .addTo(this.map);
+      });
+
+      //Police Station
+      this.map.on('click', 'unclustered-police', (e) => {
+        const geometry = e.features[0].geometry;
+        let coordinates00: [number, number] = [0, 0];
+        if (geometry.type === 'Point') {
+          coordinates00 = [geometry.coordinates[0], geometry.coordinates[1]];
+        }
+        const PoliceStation = e.features[0].properties.name;
+        const coordinates = coordinates00;
+        // 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 mapboxgl.Popup()
+          .setLngLat(coordinates)
+          .setHTML(`Police Station Name: ${PoliceStation}`)
+          .addTo(this.map);
+      });
+
+      this.map.on('mouseenter', 'fireStations-critical', () => {
+        this.map.getCanvas().style.cursor = 'pointer';
+      });
+      this.map.on('mouseenter', 'fireStations-critical', () => {
+        this.map.getCanvas().style.cursor = '';
+      });
+
+      this.map.on('mouseenter', 'hospitals-critical', () => {
+        this.map.getCanvas().style.cursor = 'pointer';
+      });
+      this.map.on('mouseenter', 'hospitals-critical', () => {
+        this.map.getCanvas().style.cursor = '';
+      });
+
+      this.map.on('mouseenter', 'police-critical', () => {
+        this.map.getCanvas().style.cursor = 'pointer';
+      });
+      this.map.on('mouseenter', 'police-critical', () => {
+        this.map.getCanvas().style.cursor = '';
+      });
+
+      this.map.on('mouseenter', 'schools-critical', () => {
+        this.map.getCanvas().style.cursor = 'pointer';
+      });
+      this.map.on('mouseenter', 'schools-critical', () => {
+        this.map.getCanvas().style.cursor = '';
+      });
+    });
   }
 
   /**