Add basic map

app/components/map.gjs

@@ -0,0 +1,35 @@
+import { modifier } from 'ember-modifier';
+import 'ol/ol.css';
+import Map from 'ol/Map.js';
+import View from 'ol/View.js';
+import { fromLonLat } from 'ol/proj.js';
+import LayerGroup from 'ol/layer/Group.js';
+import { apply } from 'ol-mapbox-style';
+
+let mapInstance;
+
+const setupMap = modifier((element) => {
+  if (mapInstance) return;
+
+  const openfreemap = new LayerGroup();
+
+  mapInstance = new Map({
+    target: element,
+    layers: [openfreemap],
+    view: new View({
+      center: fromLonLat([99.05738, 7.56087]),
+      zoom: 12.5,
+      projection: 'EPSG:3857',
+    }),
+  });
+
+  apply(openfreemap, 'https://tiles.openfreemap.org/styles/positron');
+
+});
+
+<template>
+  <div
+    {{setupMap}}
+    style="position: absolute; inset: 0;"
+  ></div>
+</template>

app/styles/app.css

@@ -1 +1,20 @@
 /* Ember supports plain CSS out of the box. More info: https://cli.emberjs.com/release/advanced-use/stylesheets/ */
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+}
+
+#root,
+#ember-testing {
+  height: 100%;
+}
+
+/* Ensure map container has a visible background while tiles load */
+[style*='position: absolute; inset: 0;'] {
+  background: #f8f9fa;
+}

app/templates/application.gjs

@@ -1,7 +1,10 @@
 import { pageTitle } from 'ember-page-title';
+import Map from '#components/map';
 
 <template>
   {{pageTitle "M/\RCO"}}
 
+  <Map />
+
   {{outlet}}
 </template>