Add a Marker

After applying the style, add a vector layer with a point feature. Here it is styled as a circle.

olms.apply('map', 'https://styles.maptoolkit.org/summer.json').then(function (map) {
  map.getView().setCenter(ol.proj.fromLonLat([2.3522, 48.8566]));
  map.getControls().forEach(function (c) { if (c instanceof ol.control.Attribution) map.removeControl(c); });
  map.getView().setZoom(13);
  const feature = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat([2.3522, 48.8566])) });
  const layer = new ol.layer.Vector({
    source: new ol.source.Vector({ features: [feature] }),
    style: new ol.style.Style({ image: new ol.style.Circle({ radius: 9, fill: new ol.style.Fill({ color: '#e8551a' }), stroke: new ol.style.Stroke({ color: '#fff', width: 2 }) }) })
  });
  map.addLayer(layer);
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css" />
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/olms.js"></script>
  <style>
    html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
    #map { width: 100%; height: 100%; }
    .mtk-logo { position: absolute; left: 8px; bottom: 8px; z-index: 2; line-height: 0; }
    .mtk-logo img { height: 24px; display: block; }
    .mtk-attrib { position: absolute; right: 0; bottom: 0; z-index: 2; background: transparent; font: 11px/1.4 system-ui, sans-serif; padding: 2px 6px; text-shadow: 0 0 2px #fff, 0 0 2px #fff; }
    .mtk-attrib a { color: #1a73e8; text-decoration: none; }
  </style>
</head>
<body>
  <div id="map"></div>
  <a class="mtk-logo" href="https://www.maptoolkit.com/" target="_blank" rel="noopener"><img src="./maptoolkit-logo.png" alt="Maptoolkit" /></a>
  <div class="mtk-attrib">&copy; <a href="https://www.maptoolkit.com/copyright/" target="_blank" rel="noopener">Maptoolkit</a> &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">OSM</a></div>
  <script>
olms.apply('map', 'https://styles.maptoolkit.org/summer.json').then(function (map) {
  map.getView().setCenter(ol.proj.fromLonLat([2.3522, 48.8566]));
  map.getControls().forEach(function (c) { if (c instanceof ol.control.Attribution) map.removeControl(c); });
  map.getView().setZoom(13);
  const feature = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat([2.3522, 48.8566])) });
  const layer = new ol.layer.Vector({
    source: new ol.source.Vector({ features: [feature] }),
    style: new ol.style.Style({ image: new ol.style.Circle({ radius: 9, fill: new ol.style.Fill({ color: '#e8551a' }), stroke: new ol.style.Stroke({ color: '#fff', width: 2 }) }) })
  });
  map.addLayer(layer);
});
  </script>
</body>
</html>

Basic Map Add a Popup