MapLibre: Custom Map Markers

Draw GeoJSON.Points as layer with MapLibre GL

by Geoapify

HTML

<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css">
<script src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script>
<div id="my-map"></div>

CSS

body {
      margin: 0;
      padding: 0;
    }

    #my-map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }

JavaScript

// The API Key provided is restricted to JSFiddle
// Get your own key at https://myprojects.geoapify.com
const myAPIKey = "6dc7fb95a3b246cfa0f3bcef5ce9ed9a"

// Statue of Liberty coordinates
const pinCoords = [-74.0445481714432, 40.6892534]

const map = new maplibregl.Map({
  container: "my-map",
  center: pinCoords,
  zoom: 16,
  style: `https://maps.geoapify.com/v1/styles/klokantech-basic/style.json?apiKey=${myAPIKey}`,
})

map.addControl(new maplibregl.NavigationControl())

const markerIconSize = {
  iconWidth: 45,
  iconHeight: 60,
  iconHeightWithShadow: 66,
}

// Create a DOM element for the marker
const el = document.createElement("div")
el.className = "marker"

// Set the marker background image from Geoapify Marker Icon API
// - type=awesome: Font Awesome shape
// - icon=monument: uses the "monument" symbol
// - size=60: marker height in pixels (without shadow)
// - contentSize=25: size of the icon inside the marker
// - noWhiteCircle: removes the default white background circle
// - scaleFactor=2: generates a retina-ready image
el.style.backgroundImage = `url(https://api.geoapify.com/v2/icon/?type=awesome&color=%23c3e2ff&size=60&icon=monument&contentSize=25&contentColor=%232b2b2b&noWhiteCircle&scaleFactor=2&apiKey=${myAPIKey})`

el.style.backgroundSize = "contain" // Ensure the background image scales inside the div
el.style.backgroundRepeat = "no-repeat" // Prevent background from repeating
el.style.width = `${markerIconSize.iconWidth}px` // Set marker width (e.g., 45px)
el.style.height = `${markerIconSize.iconHeightWithShadow}px` // Set marker height (e.g., 66px = icon height + shadow)

// Add the marker to the map
new maplibregl.Marker({
  element: el,
  anchor: "bottom", // Align marker by bottom (where the tip touches the map)

  // Offset the marker to visually align the icon's bottom (ignoring the shadow area)
  // e.g., offset = 66 - 60 = 6px upward shift
  offset: [0,...