Help with OneMap integration into Angular

I’m very new with OneMap and have recently tried to integrate it with my web app using the map example html code. However, when I serve the project, the map does not seem to load.

OneMapNotAppearing

<html>
    <head>
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
          <script src="https://cdn.onemap.sg/leaflet/onemap-leaflet.js"></script>
    </head>

      <body>
          <h1>Singapore Map</h1>
          <div id='map' style='height:800px;'></div>
      </body>
      <script>

        //Numbers show Zoom, Latitude, Longitude and Opacity
        var map = onemap.initializeMap('map', "default", 11, 1.3, 103.8, 0.8);
        var backLayer = onemap.addBackLayer(map,L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
          detectRetina: true,
          attribution: '© OpenStreetMap contributors',
          maxZoom: 18,
          minZoom: 0,
          opacity: 1
        }));

        var frontLayer = onemap.addFrontLayer(map,L.tileLayer("https://maps-{s}.onemap.sg/v3/PACDC/{z}/{x}/{y}.png", {
          detectRetina: true,
          attribution: '© OneMap',
          maxZoom: 18,
          minZoom: 0,
          opacity: 0.5
        }));

        var removeLayer = onemap.addFrontLayer(map,L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
          detectRetina: true,
          attribution: '© OpenStreetMap contributors',
          maxZoom: 18,
          minZoom: 0,
          opacity:1
        }));

        //Removed Layer from Map

        onemap.removeLayer(map,removeLayer);

        //API token
        onemap.config("MY-ACCESS-TOKEN-HERE");

        var themeObj = onemap.retrieveTheme("kindergartens");

        var data = onemap.pointTheme2GeoJSON(themeObj);

        var geojson = L.geoJSON(data, {onEachFeature: function (feature, layer) {layer.bindPopup('<h1>'+feature.properties.NAME+'</h1><p>Description: '+feature.properties.DESCRIPTION+'</p>');
              //Sets Icon information

            var icon = L.icon({
                      iconUrl: feature.properties.ICON
                  });
            layer.setIcon(icon)
          }});

          geojson.addTo(map);

          //Fit bound to markers

          map.fitBounds(geojson.getBounds());

      </script>
</html>

I’ve been looking through it and I can’t seem to figure out what I’m missing. Am I supposed to import something in the component? Any help on this would be appreciated.

As the script given is a pure html and not suitable to angularjs app. you need to have create your own controller.

Figured that was the issue. I’ve managed to port the map and layers into the controller, however, the GeoJSON refuses to work. How would I go about importing a theme and applying it using Angular 6?

EDIT: An example of one of the errors I’m facing
TypescriptError1

that function only works on our default onemap’s CDN leaflet. You can try to code within your controllers with TurfJS’s functionality and apply your necessary needs into Angular 6.

References: