JSFiddle - React, Tailwind, and code Playground

by Arthur Lutkevichus

HTML

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<div id="map"></div>

CSS

#map {
    height: 400px;
    width: 600px;
}

JavaScript

const size = 10;
const zoom = 11;

var map = L.map('map').setView([44.635, 22.653], zoom);
var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

var marker = L.marker([44.63, 22.65], {
  draggable: true,
  icon: L.icon({
    iconUrl: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgdmlld0JveD0iMCAwIDEwMCAxMDAiCiAgICAgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNTAiIGZpbGw9InJnYmEoMCwxMDAsMTI4LC4yNSkiIHN0cm9rZT0icmdiYSgwLDEwMCwxMjgsLjUpIiBzdHJva2Utd2lkdGg9IjIiIC8+Cjwvc3ZnPgo=',
    //iconUrl: 'https://via.placeholder.com/1000',
    iconSize: [size * zoom, size * zoom], // size of the icon
    iconAnchor: [size * zoom / 2, size * zoom / 2], // point of the icon which will correspond to marker's location
  })
}).addTo(map);

map.on("zoomend", () => {
  const newZoom = map.getZoom();
  const newSize = size * newZoom;

  const icon = marker.options.icon;
  icon.options.iconSize = [newSize, newSize];
  icon.options.iconSize = [newSize / 2, newSize / 2];
  marker.setIcon(icon);
  console.log({
    newZoom,
    newSize
  });
});

/* var circle = L.circle([44.63, 22.65], {radius: 600, draggable: true}).addTo(map);

circle.on("mousedown touchstart", () => {
map.dragging.disable();
        });

map.on("mousemove touchmove", (e) => {
            if (!map.dragging.enabled()) {
                circle.setLatLng(e.latlng);
            }
        });

map.on("mouseup touchend", () => {
map.dragging.enable();
        }); */