JSFiddle - React, Tailwind, and code Playground

by Rolf Friedrich

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.css">
<div id="deliverymap"></div>

CSS

#deliverymap {
  display:blocK;
  height:400px;
}

JavaScript

var lat         = 50.291472,
            lng         = 8.506511;
        var deliveryMap = L.map( 'deliverymap' );
         
       
        var grayIcon = L.icon({
            iconUrl: './wp-content/uploads/2018/10/marker-icon_sw.png',
            shadowUrl: '',
            iconSize:     [25, 41], // size of the icon
            shadowSize:   [0, 0], // size of the shadow
            iconAnchor:   [12, 41], // point of the icon which will correspond to marker's location
            shadowAnchor: [0, 0],  // the same for the shadow
            popupAnchor:  [0, -45] // point from which the popup should open relative to the iconAnchor
        });
        var circle      = L.circle( [ lat, lng ], {
            color       : '#cca300',
            fillColor   : '#FFCC00',
            fillOpacity : 0.5,
            radius      : 65000
        } ).addTo( deliveryMap );
        var marker      = L.marker( [ lat, lng ], { icon: grayIcon } ).addTo( deliveryMap );

        marker.bindPopup( "<b>A. Adam GmbH</b><br>Langgasse 2, 61267 Neu-Anspach." ).openPopup();
        circle.bindPopup( "Lieferzone für unsere Öfen" );
      
deliveryMap.setView( [ lat, lng ], 8 ); 

var rect = L.rectangle(circle.getBounds());

var polyline = L.polyline( [ [lat, lng], [rect.getBounds().getNorthEast().getCenter().lat, rect.getBounds().getCenter().lng ]], {color: 'red'}).addTo(deliveryMap);
      
 console.log( rect.getBounds().getCenter(), 'center' );
console.log( rect.getBounds(), 'bounds' );