Edit in JSFiddle

// 画像サイズ兼地図サイズ
const height = 354;
const width = 663;
const bounds = [[0,0], [height,width]]; 
// leafletに地図として画像を登録
const map = L.map('map', {crs: L.CRS.Simple});
L.imageOverlay('https://i2.wp.com/cpoint-lab.co.jp/wp-content/uploads/2019/03/storm_diagram_00.png?ssl=1', bounds).addTo(map); // 画像をboundsの大きさとして地図に追加
map.fitBounds(bounds); // 描画領域をboundsに設定

// 装飾。原点が左下のXY座標系。第一象限のイメージ
L.circle([height-80, 80], {color: 'hsl(90deg,50%,50%)',radius: 80}).addTo(map);

const marker = L.marker([80, 80]);
marker.bindPopup('大本になっているこのResponseクラスはSymfonyのResponseクラス').openPopup();
marker.addTo(map)

L.rectangle([[height-3,177],[height-140,280]], {color: "hsl(335deg,25%,50%)", weight: 1}).addTo(map);

const vertex = [[height-150, 300],[height-150, width],[90, width],[90, width-200],[135, width-300]];
L.polygon(vertex, {color: 'hsl(210deg,25%,100%)'}).addTo(map);
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>

<div id="map" style="height: 354px; width: 663px;"></div>

<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>