JSFiddle - React, Tailwind, and code Playground

by Chinmay Pendharkar

HTML

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<div id="map"></div>
ar

CSS

#map { height: 400px; }

JavaScript

var map = L.map('map').setView([1.21, 103.84], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var marker=L.marker([1.21, 103.84],{
   icon:L.divIcon({
     html:'<i class="far fa-dot-circle" style="color:#000;"></i>',
     className:'marker-cls',
     iconAnchor:[6,6]
   })
 }).addTo(map);
 console.log(marker.iconSize)