text: import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
  import L from 'leaflet';
  
  delete L.Icon.Default.prototype._getIconUrl;
  
  L.Icon.Default.mergeOptions({
      iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
      iconUrl: require('leaflet/dist/images/marker-icon.png'),
      shadowUrl: require('leaflet/dist/images/marker-shadow.png')
  });
  
  const DeliveryZone = () => {
      const position = [47.92341742, 106.93247223, 16]
      var logo = {lat: 47.9237598, lng: 106.934300}
  
      return (
  
          <MapContainer center={position} zoom={15} scrollWheelZoom={false}>
              <TileLayer
                  attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                  url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
              />
               <Marker position={logo}>
              <Popup>
                A pretty CSS3 popup. <br /> Easily customizable.
              </Popup>
            </Marker>
          </MapContainer>
      );
  };
  
  export default DeliveryZone;
  