OpenLayers: Adding custom marker

Display a map with OpenLayers

by Geoapify

HTML

<div id="my-map"></div>

CSS

html,
body,
#my-map {
  width: 100%;
  height: 100%;
  margin: 0;
}


.ol-popup {
  position: relative;
  background: white;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  font-family: sans-serif;
  font-size: 14px;
  color: #333;
  white-space: nowrap;
}

/* The balloon arrow */
.ol-popup::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid white;
}

JavaScript

// OpenLayers doesn't have native support of Vector maps
// Use the "ol-mapbox-style" plugin to display maps (https://github.com/openlayers/ol-mapbox-stylet)
// npm install ol-mapbox-style

// The API Key provided is restricted to JSFiddle website
// Get your own API Key on https://myprojects.geoapify.com
var myAPIKey = "6dc7fb95a3b246cfa0f3bcef5ce9ed9a";

olms.apply('my-map', `https://maps.geoapify.com/v1/styles/positron/style.json?apiKey=${myAPIKey}`).then((map) => {
    const markerCoords = ol.proj.fromLonLat([2.2945, 48.85825]); // Eiffel Tower
    
    // Set map center and zoom to focus on Eiffel Tower
    map.getView().setCenter(markerCoords);
    map.getView().setZoom(15);

    const marker = new ol.Feature({
      geometry: new ol.geom.Point(markerCoords),
      name: 'Eiffel Tower',
    });

    marker.setStyle(new ol.style.Style({
      image: new ol.style.Icon({
        src: `https://api.geoapify.com/v2/icon/?type=awesome&color=%23fcd3b2&size=60&icon=monument&contentSize=25&contentColor=%232b2b2b&noWhiteCircle&scaleFactor=2&apiKey=${myAPIKey}`,
        width: 45,
        height: 66, // PNG image size: width Ă— height
        anchor: [0.5, 60/66],  // Bottom-center, adjusted for shadow
        anchorXUnits: 'fraction',
        anchorYUnits: 'fraction'
      })
    }));

    const vectorLayer = new ol.layer.Vector({
      source: new ol.source.Vector({
        features: [marker],
      }),
    });

    map.addLayer(vectorLayer);
    
       
    // Create popup element
    const popupElement = document.createElement('div');
    popupElement.className = 'ol-popup';
    popupElement.innerHTML = 'Eiffel Tower';
    document.body.appendChild(popupElement);

    const overlay = new ol.Overlay({
      element: popupElement,
      positioning: 'bottom-center',
      stopEvent: false,
      offset: [0, -(60 + 8 /* tooltip size */ )], // move above the marker
    });

    map.addOverlay(overlay);

    // Show...