Adding Markers & info windows in map

This documentation provides methods for adding markers and info windows to marker.

Adding Default Marker

olaMaps
  .addMarker({ offset: [SET OFFSET POSITION], anchor: [SET ANCHOR POSITION] })
  .setLngLat([SET MARKER COORDINATES])
  .addTo(myMap)

Set custom color marker

olaMaps
  .addMarker({ offset: [SET OFFSET POSITION], anchor: [SET ANCHOR POSITION], color:[SET COLOR] })
  .setLngLat([SET MARKER COORDINATES])
  .addTo(myMap)

Set draggable marker

olaMaps
  .addMarker({ offset: [SET OFFSET POSITION], anchor: [SET ANCHOR POSITION], color:[SET COLOR], draggable:true })
  .setLngLat([SET MARKER COORDINATES])
  .addTo(myMap)

Adding custom marker

Add your custom marker image

.customMarkerClass {
    height: 30px;
    width: 40px;
    background-image: [YOUR CUSTOM MARKER IMAGE];
  }

Create a div and add append styles to that div

var customMarker = document.createElement('div')
customMarker.classList.add('customMarkerClass')

Add div to element options in marker

olaMaps
  .addMarker({element: customMarker, offset: [SET OFFSET POSITION], anchor: [SET ANCHOR POSITION] })
  .setLngLat([SET MARKER COORDINATES])
  .addTo(myMap)

Get marker position on drag

const marker = olaMaps
  .addMarker([MARKER STYLES])
  .addTo(myMap)

function onDrag() {
  const lngLat = marker.getLngLat()
}

marker.on('drag', onDrag)

Remove Marker

const marker = olaMaps
  .addMarker([MARKER STYLES])
  .addTo(myMap)

marker.remove();

Adding info windows to your marker

You can set text or add an HTML element to marker info windows

Create info windows and set text to your info windows

const popup = olaMaps
  .addPopup({ offset: [SET OFFSET POSITION], anchor: [SET ANCHOR POSITION] })
  .setText([SET YOUR POPUP TEXT])

Create info windows and set HTML element to your info windows

const popup = olaMaps
  .addPopup({ offset: [SET OFFSET POSITION], anchor: [SET ANCHOR POSITION] })
  .setHTML([ADD YOUR POPUP ELEMENT])

Adding info windows to your markers

olaMaps
  .addMarker([MARKER STYLES])
  .setPopup(popup)
  .addTo(myMap)

Example

let olaMap = olaMaps.init({
          style: 'https://api.olamaps.io/tiles/vector/v1/styles/default-light-standard/style.json',
          container: 'map',
          center: [77.61648476788898, 12.932223492103944],
          zoom: 15,
        })

var olaIcon = document.createElement('div')
olaIcon.classList.add('olalogo')

olaMaps
  .addMarker({ element: olaIcon, offset: [0, -10], anchor: 'bottom' })
  .setLngLat([77.61648476788898, 12.931423492103944])
  .addTo(myMap)

olaMaps
  .addMarker({ offset: [0, 6], anchor: 'bottom' })
  .setLngLat([77.61248476788898, 12.934223492103444])
  .addTo(myMap)

const popup = olaMaps.addPopup({ offset: [0, -30], anchor: 'bottom' }).setHTML('<div>This is a simple Popup</div>')

olaMaps
  .addMarker({
    offset: [0, 6],
    anchor: 'bottom',
    color: 'red',
    draggable: true,
  })
  .setLngLat([77.6196390456908, 12.93321052215299])
  .setPopup(popup)
  .addTo(myMap)