Leaflet demo

For update marker position

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.css">
<div id="map"></div>
  <div style="position: absolute">
    <svg id="pattern" xmlns="http://www.w3.org/2000/svg" version="1.1">
      <defs>
        <pattern id="image" width="1" height="1" viewBox="0 0 100 100" preserveAspectRatio="none">
          <image xlink:href="https://i.imgur.com/zGDMRAg.png" width="100" height="100" preserveAspectRatio="none"></image>
        </pattern>
      </defs>
    </svg>
  </div>

CSS

#map {
    height: 500px;
    width: 100%;
}
.leaflet-zoom-animated .leaflet-interactive {
  fill: url(#image);
}

JavaScript

var Leaflet = window.L;

var map = Leaflet.map('map', {
  boxZoom: false,
  attributionControl: false,
  zoomControl: false,
  zoomSnap: 0.1,
  zoomDelta: 0.3,
});
Leaflet.tileLayer.wms('https://www.ign.es/wms-inspire/pnoa-ma', {
  layers: 'OI.OrthoimageCoverage',
  format: 'image/png',
  transparent: false,
  attribution: '©&thinsp;Instituto Geográfico Nacional de España',
  maxZoom: 20,
}).addTo(map);
map.setView({ lat: 42.47857039467103, lng: -2.485329705332649 }, 15);

Leaflet.geoJSON(getGeoJson(), {style: {
        color: '#50f4b0',
        weight: 2,
        fillOpacity: 1,
      }}).addTo(map);


function getGeoJson() { return...